@charset "UTF-8";
@import url(font.css);
@import url(all.min.css);

:root {
  --color: orange;
}

[class $= "inner"] {
	width: 1400px;
	margin: 50px auto;
}

/* input 중 type="date"만 제외하고 스타일 적용 */
input:not([type="date"]) {
  /* 공통 스타일 */
	padding: 0 5px;
	box-sizing: border-box;
}

.pc {display: block;}
.mobile {display: none;}

#header {
  width: 100%;
  height: 80px;
}

#header .header_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#header h1 {
  width: 200px;
}

#header h1 a {
  display: block;
}

#header .navi {
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#header .navi li {
  width: 150px;
}

#header .navi li a {
  display: block;
  width: 100%;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  transition: all 0.2s;
}

#header .navi>li {
  position: relative;
  height: 100%;
  align-content: center;
}

#header .navi>li:not(:last-child) {
  margin-right: 10px;
}

ul.navi_list {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.navi_list li {
  height: 50px;
  align-content: center;
}

.navi_list li a {
  background: #fff;
}

.navi > li.active .navi_list {
  max-height: 500px;
}

.navi > li.active > a,
.navi > li.active .navi_list a:hover {
  font-weight: bold;
  letter-spacing: 0.05rem;
}

#header li.gnb {display: none;}

#header .gnb a.login {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 15px;
  transition: all 0.2s;
}

#header .gnb a.login i {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 50px;
  align-content: center;
  text-align: center;
  color: #222;
  background: #eee;
}

#header .gnb a.login:hover {
  font-weight: bold;
}


#header .mobile-btn {
	display: none;
  cursor: pointer;
  color: #222;
}


/* 메인 콘텐츠 */
/* 공통 */
.title {
  text-align: center;
  margin-bottom: 30px;
}

.title h2 {
  font-size: 25px;
}

.title p {
  margin-top: 10px;
}

/* 메인 슬라이드 */
#visual img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  object-position: bottom;
}

#main #visual .slider li {
  position: relative;
}

#main #visual .slider li .title {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

#main #visual .slider li .title h1 {
  font-size: 35px;
}




/* 추천골프 */
.best_golf {
  position: relative;
  top: -100px;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto 100px;
  box-sizing: border-box;
  padding-top: 100px;
  border-radius: 25px;
  overflow: hidden;
  background: #fff;
}

.best_golf .cont_wrap {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.best_golf .cont_wrap .list_wrap {
  display: flex;
  margin: auto;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.best_golf .cont_wrap .list_wrap li {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

.best_golf .cont_wrap .list_wrap li a {
  display: block;
}


.best_golf .cont_wrap .list_wrap li .title {
  margin-top: 20px;
  text-align: left;
  box-sizing: border-box;
  padding: 0 10px;
}

.best_golf .cont_wrap .list_wrap li .img_box {
  width: 100%;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
}

.best_golf .cont_wrap .list_wrap li .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}

.best_golf .cont_wrap .list_wrap li:hover img {
  transform: scale(1.05);
}


.best_golf .cont_wrap .btn_wrap {
  position: relative;
  width: 1200px;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
}

.best_golf .cont_wrap .btn_wrap li {
  position: absolute;
  top: 55%;
  z-index: 1;
  width: 45px;
  height: 45px;
  box-sizing: border-box;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  align-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.best_golf .cont_wrap .btn_wrap li:first-child {
  left: 2%;
}

.best_golf .cont_wrap .btn_wrap li:last-child {
  right: 2%;
}

.best_golf .cont_wrap .btn_wrap li:hover {
  background: rgba(255, 255, 255, 0.9);
}


.dot_nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 8px;
}

.dot_nav li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.dot_nav li.active {
  background: #333;
}




/* 카테고리 탭 */
#cont-2 .tab_list {
  margin-bottom: 50px;
}

#cont-2 .tab_list ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#cont-2 .tab_list li {
  position: relative;
  width: 150px;
  height: 150px;
  align-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.tab_list li:hover,
.tab_list li.active {
  color: #8cc11d;
}

.tab_list li::after {
  position: absolute;
  left: 50%;
  bottom: 5%;
  content: '';
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  background: #8cc11d;
  transition: all 0.2s;
}


.tab_list li:hover::after,
.tab_list li.active::after {
  position: absolute;
  left: 50%;
  bottom: 5%;
  content: '';
  width: 30%;
  height: 3px;
  transform: translateX(-50%);
  background: #8cc11d;
}

#cont-2 .tab_list li img {
  display: block;
  margin: auto;
  width: 80px;
  height: 80px;
}

#cont-2 .tab_list li p {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}


/* 검색 */
#main #cont-2 .golf-search .title {
  text-align: center;
  font-size: 18px;
  margin: 18px 0 12px;
}

#main #cont-2 .pill {
  display: flex;
  align-items: stretch;
  gap: 30px;
  max-width: 1000px;
  margin: 50px auto;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 0 30px;
}

#main #cont-2 .field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: relative;
}

#main #cont-2 .field-label {
  margin-bottom: 6px;
  font-weight: bold;
}

#main #cont-2 .field input,
#main #cont-2 .field select {
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
}

#main #cont-2 .search-btn {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 8px;
  border-radius: 50px;
  background: #8cc11d;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  place-items: center;
  transition: all 0.2s;
}
#main #cont-2 .search-btn:hover {background: rgb(89, 121, 20);}



/* 검색 결과 달력 */
/* 메인&서브 공통스타일 */
.calendar {
  width: 1400px;
  margin: 0 auto 100px;
}

.calendar .calendar_date {
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.calendar .slide_btn_prev {
  position: absolute;
  left: -15px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 2;
}

.calendar .slide_btn_next {
  position: absolute;
  right: -15px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 2;
}

.calendar .slide_btn_prev,
.calendar .slide_btn_next {
  box-sizing: border-box;
  border-radius: 50px;
  border: 1px solid;
  color: #999;
  background: #fff;
  opacity: 0.8;
  width: 30px;
  height: 30px;
  text-align: center;
  align-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar .slide_btn_prev:hover,
.calendar .slide_btn_next:hover {
  color: #333;
}

.calendar .slide_view {
  overflow-x: hidden;
  width: 1400px;
  padding-bottom: 5px;
  box-sizing: border-box;
  /* touch-action: pan-y; */
}

.calendar ul.golf_list,
.calendar ul.date_list {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform .28s ease;
  /* cursor: grab; */
}

.calendar ul.golf_list li,
.calendar ul.date_list li {
  text-align: center;
  cursor: pointer;
}

/* section.calendar .is-dragging {
  cursor: grabbing;
  transition: none !important;
} */


input:focus,
select:focus{outline:2px solid #c7d2fe;border-color:#a5b4fc}


#main .days {
  opacity: 0.6;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

#main .date {
  margin-bottom: 3px;
}

#main .use {
  font-size: 0.85rem;
  opacity: 0.8;
}


/* 공통스타일 */
#main ul.golf_list .item,
#main .date_wrap {
  width: 107px;
  padding: 5px 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: all 0.2s;
}

#main ul.golf_list .item:hover,
#main ul.date_list li:hover .date_wrap,
#main ul.date_list li.active .date_wrap {
  border: 1px solid #8cc11d;
  background: rgb(244 255 205 / 50%);
}

#main ul.date_list li.inactive:hover .date_wrap,
#main ul.date_list li.inactive .date_wrap{
  background: #ddd;
  border: 1px solid #ddd;
}

#main ul.golf_list .item:not(:last-child) {
  margin-bottom: 10px;
}

#main ul.golf_list li.item_wrap.inactive .item {
  border: none;
}



/* 푸터 */  
#footer {
  background-color: #333;
  color: #ddd;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 14px;
  letter-spacing: 1.4px;
  position: relative;
}

#footer .inner {
  width: 65%;
  margin: 50px auto;
}

.finfo_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 1000px;
  margin: auto;
}

ul.finfo li {
  height: 40px;
  align-items: center;
  align-content: center;
}

ul.finfo li b {
  margin-right: 20px;
  display: inline-block;
}

ul.finfo li.owner {
  display: flex;
  gap: 50px;
}

    
#footer h1 .flogo a img {
  width: 200px;
  opacity: 0.8;
  transition: all 0.2s;
}

#footer h1 .flogo a:hover img{
  opacity: 1;
}


.fadd_wrap {
  margin-top: 50px;
}

ul.fadd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

ul.fadd a {
  display: block;
  padding: 5px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  opacity: 0.8;
  transition: all 0.2s;
}

ul.fadd a:hover {
  border-bottom: 1px solid #ddd;
  opacity: 1;
}

.fcopy_wrap {
  margin-top: 20px;
}

ul.fcopy {
  text-align: center;
}

a.jam_company {
  opacity: 0.5;
  font-weight: bold;
  transition: all 0.2s;
}

a.jam_company:hover {
  opacity: 1;
}



/* 퀵버튼 */
#quick_menu {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
}

#quick_menu a {
  height: 70px;
  width: 70px;
  display: block;
  text-align: center;
  align-content: center;
  box-sizing: border-box;
  border-radius: 10px;
  color: #fff;
  background: #8cc11d;
  transition: all 0.2s;
}

#quick_menu a:hover {
  background: rgb(89, 121, 20);
}





/* 서브페이지 */
/* 공통스타일 */
#sub_wrap .sub_banner {
  position: relative;
  height: 300px;
}

#sub_wrap .sub_banner .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

#sub_wrap .sub_banner .bg_img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../images/001.jpg) no-repeat center;
  background-size: cover;
  filter: brightness(0.8);
}

#sub_wrap .best_golf {
  top: 0;
}

#sub_wrap .page-title {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

#sub_wrap .page-title h2 {
  font-size: 22px;
}

#sub_wrap.booking_live section.res_stat .page-title,
#sub_wrap.booking_reg section.grid_wrap .page-title,
#sub_wrap.res_reg section.search .page-title,
#sub_wrap.tee section.search .page-title {
  margin-bottom: 0;
}

#sub_wrap.booking_live section.res_overseas .page-title,
#sub_wrap.booking_live section.res_domestic .page-title {
  margin-bottom: -30px;
}



/* 기본 버튼 */
#sub_wrap .act_btn {
  box-sizing: border-box;
  padding: 5px 10px;
  cursor: pointer;
  background: #777;
  color: #fff;
  font-size: 15px;
  border-radius: 2px;
  transition: all 0.2s;
}

#sub_wrap .act_btn.active,#sub_wrap .act_btn:hover {
  background: #333;
}


/* 등록 버튼 */
#sub_wrap .reg_btn {
	box-sizing: border-box;
	padding: 5px 10px;
	align-content: center;
	cursor: pointer;
	background: #8cc11d;
	color: #fff;
	font-size: 15px;
	border-radius: 2px;
	transition: all 0.2s;
}
#sub_wrap .reg_btn:hover {background: rgb(89, 121, 20);}



/* 날짜 버튼 */
#sub_wrap .date_btn {
  box-sizing: border-box;
  padding: 5px 10px;
  cursor: pointer;
  background: #3c9aff;
  color: #fff;
  font-size: 15px;
  border-radius: 2px;
  transition: all 0.2s;
}
#sub_wrap .date_btn:hover,
#sub_wrap .date_btn.active {background: #0063cc;}


#sub_wrap input:not([type="radio"]):not([type="checkbox"]),
#sub_wrap select {
  height: 30px;
  background: #fff;
}


/* 추천 골프 */
#sub_wrap .best_golf .cont_wrap {
  max-width: 1500px;
}

#sub_wrap .best_golf .cont_wrap .btn_wrap {
  width: 1500px;
}


/* 공지사항 */
section.notice_group .inner {width: 1200px;}
section.notice_group a.go_btn {
  display: block;
  margin-left: auto;
  width: fit-content;
  font-weight: bold;
  padding: 5px 10px;
  letter-spacing: 0.1rem;
  transition: all 0.2s;
}

section.notice_group .notice_group {
  margin-top: 30px;
}

section.notice_group .notice_group li {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  background: #fafafa;
  transition: all 0.2s;
}

section.notice_group .notice_group li:not(:last-child) {
  margin-bottom: 20px;
}

section.notice_group .notice_group li a {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  padding: 20px 30px;
  align-content: center;
}


section.notice_group .notice_group li .notice_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

section.notice_group .notice_group li .notice_title p {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
  overflow: clip;
}

section.notice_group .notice_group li .notice_title i {
  background: #f2f4f7;
  text-align: center;
  align-content: center;
  box-sizing: border-box;
  border-radius: 50px;
  padding: 10px;
  font-size: 20px;
}

section.notice_group .notice_group li:hover {
  background: #eee;
}



/* 양도/조인 */
#sub_wrap.join #cont-2 .inner {
  margin: 100px auto 30px;
}

#sub_wrap.join #cont-2 .golf-search .title h2 {
  font-weight: normal;
}

#sub_wrap.join #cont-2 .golf-search .flex_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


#sub_wrap.join #cont-2 .golf-search .pill {
  display: flex;
  gap: 10px;
}

#sub_wrap.join #cont-2 .golf-search .field {
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 10px;
}

#sub_wrap.join #cont-2 .golf-search .field-label {
  font-size: 12px;
  line-height: 1;
  margin-bottom: 6px;
}

#sub_wrap.join #cont-2 .golf-search .field input,
#sub_wrap.join #cont-2 .golf-search .field select {
  font-size: 14px;
  background: #fff;
}

#sub_wrap.join #cont-2 .golf-search .flex_wrap .pill {
  margin: 0;
}

a.add_btn {
  display: block;
  box-sizing: border-box;
  padding: 10px 25px;
  border-radius: 10px;
  background: #8cc11d;
  color: #fff;
  transition: all 0.2s;
}

a.add_btn:hover {
  background: #739d1a;
}


/* 달력 */
#sub_wrap.join .calendar_date {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#sub_wrap.join ul.golf_list, #sub_wrap.join ul.date_list {
  gap: 0;
}

#sub_wrap.join .slide_btn_prev,
#sub_wrap.join .slide_btn_next {
  top: 50%;
}

#sub_wrap.join ul.date_list li {
  flex: 0 0 calc((1200px - 6 * var(--gap)) / 7);
  min-width: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 20px 0;
  border: 1px solid #eee;
  font-size: 15px;
  transition: all 0.2s;
}

#sub_wrap.join ul.date_list li .days {
  margin-bottom: 3px;
}

#sub_wrap.join ul.date_list li:not(:last-child) {
  border-right: 1px solid transparent;
}

/* 날짜 선택 보기 */
#sub_wrap.join ul.date_list li:hover,
#sub_wrap.join ul.date_list li.active {
  border: 1px solid #8cc11d;
  background: rgb(244 255 205 / 50%);
}

/* 예약 없는 날짜 */
#sub_wrap.join ul.date_list li.inactive:hover,
#sub_wrap.join ul.date_list li.inactive {
	background: #ccc;
    border: 1px solid #fff;
    opacity: 0.5;
}


#sub_wrap.join .calendar .use {
	display: none;
	margin-top: 5px;
    font-weight: bold;
}

#sub_wrap.join .golf_list {
  margin: 30px auto 50px;
}


/* Table */
#sub_wrap.join .table-wrap {overflow: auto;}
#sub_wrap.join table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  text-align: center;
}

#sub_wrap.join thead th {
  padding: 12px 14px;
  border-bottom: 2px solid #eee;
}

#sub_wrap.join tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

#sub_wrap.join tbody tr:hover { background: var(--hover); }


#sub_wrap.join .golf_list .item_wrap {display: none;}
#sub_wrap.join .golf_list .item_wrap.is-active {display: table-row-group;}
#sub_wrap.join .golf_list .item_wrap .empty-row td {
  padding: 36px 0;
  color: #888;
  background: #fafafa;
  text-align: center;
  font-weight: 600;
}


/* 공통스타일 */
/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  gap: 8px;
}

.pagination__pages {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; margin-right: auto;
}

.page {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center; 
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid transparent; 
  border-radius: 10px;
  background: #fff;
  color: #222;
  font-weight: 600; 
  font-size: 14px;
  transition: all 0.2s;
}

.page:hover {
  border: 1px solid #ddd;
  background: #eee;
}

.page--current:hover,
.page--current {
  color: #8cc11d;
  border: 1px solid;
  background: rgb(244 255 205 / 50%);
}

.page--ellipsis {
  cursor: default;
  pointer-events: none;
}

nav.pagination a.btn {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  color: #222;
  font-size: 15px;
  opacity: 0.7;
  transition: all 0.2s;
}

nav.pagination a.btn:hover {
  opacity: 1;
}

nav.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}




/* 예약실적 통계 */
/* ----- Page header ----- */
#sub_wrap.res_stat .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#sub_wrap.res_stat .breadcrumbs { color: #222; font-size: 12px; }

/* ----- Toolbar (filters) ----- */
#sub_wrap.res_stat .toolbar {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 100px;
	padding-bottom: 20px;
	border-bottom: 2px solid #222;
	font-size: 14px;
	align-items: center;
}

#sub_wrap.res_stat .filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(9, minmax(100px, 1fr));
}

#sub_wrap.res_stat .field {
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #eee;
}

#sub_wrap.res_stat .field.is-wide { grid-column: span 2; }



/* ----- Meta row ----- */
#sub_wrap.res_stat .meta-row {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 10px;
  font-size: 14px;
}
#sub_wrap.res_stat .chips { display: flex; gap: 8px; flex-wrap: wrap; }
#sub_wrap.res_stat .chip { background: transparent; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; color: #475569; font-weight: 600; }

/* ----- Table wrapper ----- */
#sub_wrap.res_stat .table-wrap {
  width: 100%;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

#sub_wrap.res_stat table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1200px;
  border: 1px solid #ddd;
}
#sub_wrap.res_stat thead th {
  position: sticky; 
  top: 0; 
  z-index: 2;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  background: #f9fafb;
  color: #374151;
  font-size: 15px; 
}
#sub_wrap.res_stat .subheader:last-child,
#sub_wrap.res_stat tfoot td:not(:last-child),
#sub_wrap.res_stat tbody td:not(:last-child),
#sub_wrap.res_stat thead th:not(:last-child) {
  border-right: 1px solid #ddd;
}
#sub_wrap.res_stat tbody td {
  border-bottom: 1px solid #ddd;
  padding: 10px 5px;
  text-align: right;
  font-size: 14px;
}
#sub_wrap.res_stat tbody td:first-child, #sub_wrap.res_stat thead th:first-child { text-align: center; }
#sub_wrap.res_stat tbody td:nth-child(2), #sub_wrap.res_stat thead th:nth-child(2) { text-align: center; }

/* group column (그린피) */
#sub_wrap.res_stat .group-header { text-align: center; }
#sub_wrap.res_stat .subheader { font-weight: 600; color: #111827; background: #eef2ff; }

/* row styles */
#sub_wrap.res_stat tbody tr:nth-child(odd) { background: #fcfcfd; }
#sub_wrap.res_stat tbody tr:hover { background: #f5f7fb; }

/* footer */
#sub_wrap.res_stat tfoot td {
  padding: 10px;
  background: #f9fafb;
  text-align: right;
  font-weight: 700;
}

/* utils */
#sub_wrap.res_stat .w-80 { width: 80px; }
#sub_wrap.res_stat .w-120 { width: 120px; }





/* 예약실적 등록 */
/* 패널 */
#sub_wrap.res_reg .form-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-top: 2px solid;
}
#sub_wrap.res_reg .form-grid thead th{
  background:#f5f6f8;
  color:#222;
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid #ddd;
  padding:8px 5px;
}
#sub_wrap.res_reg .form-grid tbody td{
  border-bottom:1px solid #ddd;
  /* padding:8px 5px; */
}

#sub_wrap.res_reg td.memo .inline-field {
  justify-content: space-between;
  width: 100%;
}


/* 컨트롤 */
#sub_wrap.res_reg .control{width:100%}
#sub_wrap.res_reg .input,
#sub_wrap.res_reg .select{
  width:100%;
  border-radius:2px;
  background:#fff;
  font-size: 14px;
}
#sub_wrap.res_reg .input::placeholder{color:#9ca3af}
#sub_wrap.res_reg .checkbox{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* 보조 행 (두번째 줄) */
#sub_wrap.res_reg .inline-field{display:inline-flex;align-items:center;gap:8px;margin-right:12px;font-size:12px;color:#374151;white-space:nowrap}
#sub_wrap.res_reg .cond-wrap {
  display:flex;
  align-items:center;
  gap:6px; /* 간격 */
}
#sub_wrap.res_reg .cond-wrap .label {
  white-space:nowrap;
}
#sub_wrap.res_reg .cond-wrap .select {
  width:80px; /* 필요시 조절 */
}


/* 예약실적 현황 */
#sub_wrap .table-wrap .page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- Controls (top filter area) ---- */
#sub_wrap.res_reg .label{
  color: #222;
  font-weight: bold;
  font-size: 14px;
}
#sub_wrap.res_reg .control{display:flex;gap:8px}

#sub_wrap.res_reg .input,
#sub_wrap.res_reg  .select{
  border: 1px solid #ddd;
  background: #fff;
}


#sub_wrap.res_reg .toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}


/* ---- filter ---- */
#sub_wrap.res_reg .table-wrap .table-filter {
  display: flex;
  justify-content: space-between;
}

#sub_wrap.res_reg .table-wrap .table-filter .toolbar,
#sub_wrap.res_reg .table-wrap .table-filter .select_wrap {
	display: flex;
	font-size: 14px;
	gap: 5px;
	align-items: center;
}

#sub_wrap.res_reg .table-wrap .table-filter select {
  width: 90px;
}
#sub_wrap.res_reg .table-wrap .table-filter .dates-row {
  display: flex;
  align-items: center;
  height: 30px;
  gap: 5px;
}

#sub_wrap.res_reg .table-wrap .toolbar .search {
  display: flex;
  gap: 5px;
}
#sub_wrap.res_reg .table-wrap .toolbar .search input {
  width: 140px;
}

/* ---- Table ---- */
#sub_wrap.res_reg .table-wrap .table-container {
  margin-top: 30px;
  border-top: 2px solid;
}

#sub_wrap.res_reg .table-wrap table{border-collapse:separate;border-spacing:0;min-width:1200px;width:100%}
#sub_wrap.res_reg .table-wrap thead th{
  background: #f8fafc;
  border-bottom: 1px solid #ddd;
  padding: 20px 10px;
  font-size: 15px;
  color: #222;
  text-align: center;
}

#sub_wrap.res_reg .table-wrap tbody tr.finish td {background:#eee;}

#sub_wrap.res_reg .table-wrap tbody td{
  border-bottom:1px solid #ddd;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
}

#sub_wrap.res_reg .table-wrap tbody td.res_date {
  color: #007bff;
  font-weight: bold;
}

#sub_wrap.res_reg .table-wrap tbody td.manager {
  font-weight: bold;
  color: #007bff;
}

#sub_wrap.res_reg .table-wrap tbody td.res_user {
  font-weight: bold;
  color: #00a300;
}

#sub_wrap.res_reg .table-wrap tbody td.res_user span {
  color: #222;
  font-weight: normal;
}

#sub_wrap.res_reg .table-wrap tbody td.num.active {
  font-weight: bold;
  color: #007bff;
}

#sub_wrap.res_reg .table-wrap tbody td.num.inactive {
  font-weight: bold;
  color: #ff3d00;
}


/* ---- Badges & pills ---- */
#sub_wrap.res_reg .table-wrap .badge{
  font-size: 14px;
  font-weight: bold;
}

#sub_wrap.res_reg .table-wrap .badge.inactive {
  color: #ff3d00;
}

#sub_wrap.res_reg .table-wrap .pill{
  display:inline-block;
  border-radius:50px;
  width: 23px;
  height: 23px;
  align-content: center;
  font-weight: bold;
  font-size:12px;
  color: #fff;
}

#sub_wrap.res_reg .table-wrap .pill.active {
  background: #55c755;
}
#sub_wrap.res_reg .table-wrap .pill.inactive {
  background: #ff6464;
}

#sub_wrap.res_reg .table-wrap .btn-xs{
  padding:6px 8px;
  border-radius: 2px;
  background: #aaa;
  cursor: pointer;
  transition: all 0.2s;
}

#sub_wrap.res_reg .table-wrap .btn-xs:hover {background: #888;}

#sub_wrap.res_reg .table-wrap .btn-xs.active {background: #ffb100;}
#sub_wrap.res_reg .table-wrap .btn-xs.active:hover {background: #d89700;}

#sub_wrap.res_reg .table-wrap .note{color:#222;font-size:12px}

/* 내장자 입력 + 동일 체크박스 정렬 */
#sub_wrap.res_reg .guest-field {
  display: flex;
  align-items: center;
  gap: 8px;          /* 입력창과 체크박스 간격 */
  width: 100%;
}

#sub_wrap.res_reg .guest-field .input {
  flex: 1 1 auto;    /* 입력창이 남는 공간 꽉 차도록 */
}

#sub_wrap.res_reg .guest-field .checkbox {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}



/* =========================
   Responsive (<= 1024)
========================= */
@media (max-width: 1024px) {
  /* 상단 툴바/필터 줄바꿈 */
  #sub_wrap.res_reg .toolbar,
  #sub_wrap.res_reg .table-wrap .table-filter {
    flex-wrap: wrap;
    gap: 8px;
  }
  #sub_wrap.res_reg .table-wrap .table-filter .toolbar,
  #sub_wrap.res_reg .table-wrap .table-filter .select_wrap {
    flex-wrap: wrap;
  }

  #sub_wrap.res_reg .table-wrap .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
}

/* =========================
   Mobile (<= 768px)
========================= */
@media (max-width: 768px) {
  /* ---------- 입력 테이블: 카드형 전환 ---------- */
  #sub_wrap.res_reg .form-grid,
  #sub_wrap.res_reg .form-grid thead,
  #sub_wrap.res_reg .form-grid tbody,
  #sub_wrap.res_reg .form-grid tr,
  #sub_wrap.res_reg .form-grid th,
  #sub_wrap.res_reg .form-grid td {
    display: block;
    /* width: 100%; */
  }

  /* 헤더 숨김 */
  #sub_wrap.res_reg .form-grid thead { display: none; }

  /* 행을 카드처럼 */
  #sub_wrap.res_reg .form-grid tbody {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  /* 기본 셀 레이아웃 */
  #sub_wrap.res_reg .form-grid tbody td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;           /* 기존 padding 축소 */
    border-bottom: none;      /* 카드 내부 구분선은 제거 */
  }

  /* 라벨(헤더 대체) */
  #sub_wrap.res_reg .form-grid tbody td::before {
    content: attr(data-label);
    flex: 0 0 100px;          /* 라벨 폭 */
    font-weight: 700;
    color: #222;
    font-size: 14px;
    line-height: 1.4;
  }

  /* 컨트롤이 오른쪽에 꽉 차도록 */
  #sub_wrap.res_reg .form-grid tbody td .control,
  #sub_wrap.res_reg .form-grid tbody td .input,
  #sub_wrap.res_reg .form-grid tbody td .select {
    flex: 1 1 auto;
    min-width: 0;             /* iOS 줄바꿈 이슈 방지 */
  }

  /* 첫 번째(메인) 행의 각 셀에 라벨 주입 (HTML 수정 없이) */
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(1)::before { content: "지역"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(2)::before { content: "골프장"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(3)::before { content: "예약일"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(4)::before { content: "티타임"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(5)::before { content: "코스"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(6)::before { content: "구분"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(7)::before { content: "예약자"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(8)::before { content: "연락처"; }
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(9)::before { content: "예약자변경"; }

  #sub_wrap.res_reg .form-grid.result tbody tr:first-child td:nth-child(8)::before { content: "내장자"; }
  #sub_wrap.res_reg .form-grid.result tbody tr:first-child td:nth-child(9)::before { content: "연락처"; }

  /* 두 번째(보조) 행은 자체 라벨을 이미 포함하므로 ::before 제거하고 블록화 */
  #sub_wrap.res_reg .form-grid tbody tr:nth-child(2) td::before { content: ""; display: none; }
  #sub_wrap.res_reg .form-grid tbody tr:nth-child(2) td {
    display: block;
    padding: 6px 0;
  }

  /* 보조 행 내부 요소 줄바꿈 & 전체폭 */
  #sub_wrap.res_reg .inline-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-right: 0;
    white-space: normal;
  }
  #sub_wrap.res_reg td.memo .inline-field { gap: 8px; }
  #sub_wrap.res_reg .inline-field .input { flex: 1 1 160px; }

  #sub_wrap.res_reg .cond-wrap .select { width: 90px; } /* 손가락 터치 고려 약간 확대 */

  /* 체크박스 라벨(“동일”)이 헤더에만 있어 모바일에서 사라지므로,
     내장자 셀 아래 보조 안내를 제공 (시각적 텍스트) */
  #sub_wrap.res_reg .form-grid tbody tr:first-child td:nth-child(9) {
    position: relative;
  }

  /* 상단 컨트롤 & 입력 폰트 미세 조정 */
  #sub_wrap.res_reg .input,
  #sub_wrap.res_reg .select {
    font-size: 14px;
  }

  /* ---------- 현황 테이블: 스크롤/헤더 고정/축소 ---------- */
  #sub_wrap.res_reg .table-wrap .table-container {
    margin-top: 16px;
    border-top: 2px solid;
    overflow-x: auto;               /* 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
  }

  #sub_wrap.res_reg .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 8px;              /* 여백 축소 */
    font-size: 14px;
  }

  #sub_wrap.res_reg .table-wrap tbody td {
    padding: 8px 4px;               /* 여백 축소 */
    font-size: 13px;
    white-space: nowrap;            /* 줄바꿈 방지로 행 높이 과도 증가 방지 */
  }

  /* 버튼/뱃지 크기 조정 */
  #sub_wrap.res_reg .table-wrap .btn-xs { padding: 5px 7px; font-size: 12px; }
  #sub_wrap.res_reg .table-wrap .badge { font-size: 12px; }
  #sub_wrap.res_reg .table-wrap .pill {
    width: 20px; height: 20px; font-size: 11px;
  }

  /* 상단 검색 입력 너비 축소 */
  #sub_wrap.res_reg .table-wrap .toolbar .search input { width: 120px; }
  #sub_wrap.res_reg .table-wrap .table-filter select { width: 84px; }
}





/* 부킹게시판 */
#sub_wrap.booking #cont-2 .golf-search .flex_wrap .pill {
  margin: 0;
  align-items: center;
}
#sub_wrap.booking #cont-2 .golf-search .flex_wrap .pill .segmented button{
  box-sizing: border-box;
  padding: 5px 10px;
  background: #777;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}


#sub_wrap.booking #cont-2 .golf-search .flex_wrap .pill .segmented button:hover,
#sub_wrap.booking #cont-2 .golf-search .flex_wrap .pill .segmented button.active {
  background: #333;
}




/* 부킹게시판(등록) */
#sub_wrap.booking_reg .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.book_list.full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 160px 1fr;
}


#sub_wrap.booking_reg .book_list {
  display: flex;
}

#sub_wrap.booking_reg .label {
  background: #eee;
  width: 150px;
  text-align: center;
  align-content: center;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}

#sub_wrap.booking_reg .label.inline {
  background: none;
  width: auto;
}

.book_list.greenfee .inline {
  display: flex;
  align-items: center;
  gap: 20px;
}

.book_list.greenfee span.notice {
  font-size: 14px;
  color: #ff3d00;
}


#sub_wrap.booking_reg .field {
  flex: 1 1 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
  box-sizing: border-box;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 2px;
}

#sub_wrap.booking_reg .book_list:nth-child(1) .label,
#sub_wrap.booking_reg .book_list:nth-child(2) .label,
#sub_wrap.booking_reg .book_list:nth-child(1) .field,
#sub_wrap.booking_reg .book_list:nth-child(2) .field {
  border-top: 2px solid #222;
}



#sub_wrap.booking_reg .field input, 
#sub_wrap.booking_reg .field select {
  width: auto;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

#sub_wrap.booking_reg textarea {
  width: 100% !important;
  min-height: 300px;
}

#sub_wrap.booking_reg .actions {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 50px;
}



/* 선티 관리 */
#sub_wrap.tee .page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* form-grid */
#sub_wrap.tee table.form-grid {
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#sub_wrap table.form-grid td#courseWrap {
    font-size: 15px;
	align-content: center;
}

#sub_wrap.tee .table-wrap .table-filter {
  justify-content: space-between;
}

#sub_wrap.tee .table-wrap .table-filter .select_wrap {
  gap: 5px;
  width: auto;
}

#sub_wrap.tee .form-grid tbody td label {
  font-size: 13px;
}

/* 테이블 기본 세팅 */
#sub_wrap.tee .form-grid { width:100%; table-layout: fixed; border-collapse: collapse; }
#sub_wrap.tee .form-grid th, .form-grid td { padding:8px 10px; vertical-align: top; }
#sub_wrap.tee .form-grid td { overflow: hidden; text-overflow: ellipsis; }
#sub_wrap.tee .form-grid td.col-center-change {  vertical-align: middle; text-align: center;}

/* 두 번째 행 공통 래퍼: 한 셀 안에서 자동 줄바꿈 */
#sub_wrap.tee .form-grid .inline-field{
  display:flex;
  align-items:center;
  gap: 8px 12px;
  flex-wrap: wrap;        /* ← 칸 안에서 다음 줄로 내려감 */
  min-width: 0;           /* flex 아이템 과폭 방지 */
}

/* 라벨 고정폭(서로 높이/정렬 안정) */
#sub_wrap.tee .form-grid .inline-field .label{
  flex: 0 0 110px;        /* 필요하면 90~120px로 조절 */
  color:#666;
}

/* 인풋/셀렉트는 남는 폭을 차지 */
#sub_wrap.tee .form-grid .inline-field .input,
#sub_wrap.tee .form-grid .inline-field input[type="text"],
#sub_wrap.tee .form-grid .inline-field input[type="number"],
#sub_wrap.tee .form-grid .inline-field select{
  flex: 1 1 160px;        /* 줄어들고 줄바꿈 가능 */
  min-width: 0;
}

/* 체크/라디오 묶음 보기 좋게 */
#sub_wrap.tee .form-grid .inline-field label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space: nowrap;    /* 단어 중간 줄바꿈 방지 (원하면 지워도 됨) */
  margin-right: 8px;
}

/* 옵션 칸은 라벨이 많아 여유 간격 */
#sub_wrap.tee .form-grid td[colspan="4"] .inline-field{
  gap: 6px 14px;
}

/* 메모 + 등록 버튼은 좌우 배치 */
#sub_wrap.tee .form-grid .memo .inline-field{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

#sub_wrap.tee .form-grid .memo .input{ min-width: 0; }




/* 두 번째 행 전체를 한 칸으로 */
#sub_wrap.tee .form-grid .subrow td { padding-top: 10px; }

/* 한 줄 정렬(좁으면 줄바꿈) */
#sub_wrap.tee .row-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-wrap: wrap; */
}

/* 각 블록 */
#sub_wrap.tee .row-inline .group{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 옵션 정렬 */
#sub_wrap.tee .row-inline .group.option {
    width: 35%;
}

/* 체크/라디오 라벨 */
#sub_wrap.tee .row-inline .chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

#sub_wrap.tee .row-inline .input{ min-width: 0; }
#sub_wrap.tee .row-inline .w80{ width:80px !important; }
#sub_wrap.tee .row-inline .w140{ width:140px !important; }
#sub_wrap.tee .row-inline .w160{ width:160px !important; }

#sub_wrap.tee .row-inline .grow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: 195px;
}




#sub_wrap.tee .table-wrap .table-filter .toolbar {
  width: auto;
  justify-content: normal;
  align-items: center;
}


#sub_wrap.tee .table-wrap .table-filter .toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
}


#sub_wrap.tee .filterbar{
  display:flex;
  justify-content: space-between;
  padding: 0 0 10px;
}

#sub_wrap.tee .field_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

#sub_wrap.tee .field{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size: 15px;
}

#sub_wrap.tee .field.inline{
  gap:8px;
  margin-right:6px;
}

#sub_wrap.tee .field > label{
  font-size:15px;
}

#sub_wrap.tee .radio{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
#sub_wrap.tee .radio input{
  appearance:none;
  width:14px;
  height:14px;
  border:1.5px solid #9ca3af;
  border-radius:50%;
  position:relative;
}
#sub_wrap.tee .radio input:checked{
  border-color:#2563eb;
}
#sub_wrap.tee .radio input:checked::after{
  content:"";
  position:absolute;inset:3px;
  background:#2563eb;border-radius:50%;
}

#sub_wrap.tee .field input#start,
#sub_wrap.tee .field input#end,
#sub_wrap.tee .field input#sch_sdate,
#sub_wrap.tee .field input#sch_edate,
#sub_wrap.tee .field select {
  border: 1px solid #ddd;
}

#sub_wrap.tee .actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}


/* table-container */
#sub_wrap.tee .table-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#sub_wrap.tee .table-container th {
  padding: 20px 0 !important;
}

#sub_wrap.tee .table-container td {
  border: 1px solid #ddd;
}

#sub_wrap.tee .table-container th,
#sub_wrap.tee .table-container td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

#sub_wrap.tee .table-container .cell {
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#sub_wrap.tee .table-container .cell select {
  border: 1px solid #ddd;
  width: calc(100% / 3);
  border-radius: 2px;
}

#sub_wrap.tee .table-container .cell.stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#sub_wrap.tee .table-container .btn, 
#sub_wrap.tee .table-container .btn-xs, 
#sub_wrap.tee .table-container .pill { flex: 0 0 auto; }

#sub_wrap.tee .table-container td>.flex_wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;    
}

#sub_wrap.tee .table-container td.controls {
  overflow: visible;
  white-space: normal;
}

#sub_wrap.tee .table-container td.controls .cell input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

#sub_wrap.tee .table-container .cell input {
  box-sizing: border-box;
  width: 100% !important;
  height: 30px;
  border: 1px solid #ddd;
}

#sub_wrap.tee .table-container .cell.align input {
	max-width: 80px !important;
}

#sub_wrap.tee .table-wrap .table-container td .act_btn.inactive,
#sub_wrap.tee .table-wrap .table-container td .act_btn.inactive:hover {
	cursor: default;
	background: #e76b6b;
}

#sub_wrap.tee .table-container td .cell .btn-xs {
  margin: auto;
}


	.select2-container--default.select2-container {
		width: 200px !important;
	}


/* 모바일에서 인풋류를 꽉 채우기 */
@media (max-width: 600px) {
  /* 각 입력 그룹이 한 줄 전체를 차지 */
  #sub_wrap .row-inline .group,
  #sub_wrap .form-grid .inline-field,
  #sub_wrap .form-grid .memo .inline-field {
    width: 100%;
  }

  /* 인풋/셀렉트/텍스트에어리어가 남는 폭을 모두 먹도록 */
  #sub_wrap .row-inline .input,
  #sub_wrap .form-grid .inline-field .input,
  #sub_wrap .row-inline input[type="text"],
  #sub_wrap .row-inline input[type="number"],
  #sub_wrap .row-inline select,
  #sub_wrap .row-inline textarea {
    width: 100%;
    flex: 1 1 0;   /* ← 고정폭 대신 유연하게 */
    min-width: 0;  /* ← flex 과폭 방지 */
  }

  /* 고정 유틸폭 해제 (.w80, .w160, .grow 등) */
  #sub_wrap .row-inline .w80,
  #sub_wrap .row-inline .w160,
  #sub_wrap .row-inline .grow {
    width: 100% !important;
  }

  /* 만약 테이블 colgroup이 폭을 묶고 있으면 풀어주기 */
  #sub_wrap .form-grid { table-layout: auto; }
  #sub_wrap .form-grid col { width: auto !important; }
}


/* 실시간 예약내역 */
/* 실시간 예약내역-예약현황 */
section.res_stat ul.flex_wrap {
  display: flex;
  box-sizing: border-box;
  border-top: 2px solid;
}

section.res_stat li.flex_list {
  display: flex;
  align-items: center;
  width: calc(100% / 3);
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

section.res_stat li.flex_list:not(:last-child) {
  border-right: 0;
}

section.res_stat li.flex_list .list_data,
section.res_stat li.flex_list .list_title {
  width: 50%;
  height: 50px;
  align-content: center;
}

section.res_stat li.flex_list .list_title {
  background: #eee;
}


section.res_stat li.flex_list .list_data {
  color: #555;
}

section.res_stat li.flex_list .list_data span {
  color: #ff7800;
}

section.res_stat .desc {
  box-sizing: border-box;
  border: 3px solid #ddd;
  margin-top: 20px;
  padding: 20px;
  font-size: 14px;
  color: #777;
}

section.res_stat .desc li:not(:last-child) {
  margin-bottom: 3px;
}



/* 실시간 예약내역-부킹서비스/국내/해외 */
/* 공통 리셋 */
#sub_wrap.booking_live .table-filter * { box-sizing: border-box; }

/* 레이아웃: 행들 사이 간격 */
#sub_wrap.booking_live .table-filter { 
  display: flex; 
  gap: 12px;              /* 행 간격 */
}

/* 각 행(=select_wrap) */
#sub_wrap.booking_live .table-filter .select_wrap {
  display: flex;
  align-items: center;    /* 수직 가운데 정렬 */
  gap: 8px;               /* 컨트롤 간격 */
}

/* 컨트롤 공통 규격 */
#sub_wrap.booking_live .table-filter .input,
#sub_wrap.booking_live .table-filter .select,
#sub_wrap.booking_live .table-filter .act_btn {
  border: 1px solid #e5e7eb;
  font-size: 14px;
}


/* input / select 가로폭 가이드 */
#sub_wrap.booking_live .table-filter .input { width: 100px; }
#sub_wrap.booking_live .table-filter .select.control { width: 150px; }

/* select 기본 스타일 차이 줄이기 */
#sub_wrap.booking_live .table-filter .select {
  background: #fff;
  position: relative;
}

/* 라디오 그룹 */
#sub_wrap.booking_live .table-filter .radio_group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#sub_wrap.booking_live .table-filter .radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

#sub_wrap.booking_live .table-filter .radio input {
  width: 14px; 
  height: 14px;
}


#sub_wrap.booking_live .table-container {
  margin-top: 30px;
  border-top: 2px solid;
  min-width: 1200px;
}

#sub_wrap.booking_live .table-filter .select_wrap {
  display: flex;
  width: calc(100% / 3);
}

#sub_wrap.booking_live .table-container thead th {
  background: #f8fafc;
  border-bottom: 1px solid #ddd;
  padding: 20px 10px;
  font-size: 15px;
  color: #222;
  text-align: center;
}

#sub_wrap.booking_live .table-container tbody td {
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  text-align: center;
}

#sub_wrap.booking_live .table-filter .select_wrap .input, 
.booking_live .table-filter .select_wrap select {
  height: 30px;
  background: #fff;
}

#sub_wrap.booking_live .table-container tbody td.controls .pill {
  width: fit-content;
  margin: auto;
  padding: 3px 8px;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 14px;
}

#sub_wrap.booking_live .table-container tbody td.controls .pill.active {
  background: #2563eb;
  color: #ffff;
}

#sub_wrap.booking_live .table-container tbody td.controls .pill.inactive {
  background: #ff7800;
  color: #ffff;
}

#sub_wrap.booking_live .table-container tbody td.actions {
  /* justify-content: center; */
  display: table-cell;
}





/* 실시간 부킹 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.no-scroll{overflow:hidden;}
.mobile-only{display:none !important;}
.bottom-sheet{display:none !important;}

@media (max-width:768px){
  #reserveDesktopPill{display:none !important;}
  .mobile-only{display:block !important;}
  
  #reserveMobileLabel,
  #mobileSearchLabel{ 
    text-overflow: clip;
    width: 90%;
    text-align: left;
    margin: auto;
  }

  .mobile-searchbar{
    width:min(680px,92vw);height:48px;margin:20px auto 0;
    padding:0 16px 0 14px;display:flex;align-items:center;justify-content:space-between;
    border-radius:9999px;border:1px solid #e6e7ea;background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.06);font-size:14px;color:#9aa1aa;
  }
  .mobile-searchbar i{font-size:18px;color:#8cc11d;}

  .bottom-sheet{display:block !important;position:fixed;inset:0;z-index:1000;pointer-events:none;}
  .bottom-sheet[aria-hidden="true"] .sheet-backdrop{opacity:0;}
  .bottom-sheet[aria-hidden="true"] .sheet-panel{transform:translateY(100%);}
  .bottom-sheet[aria-hidden="false"]{pointer-events:auto;}

  .sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);transition:opacity .25s ease;}
  .sheet-panel{
    position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;
    border-top-left-radius:16px;border-top-right-radius:16px;background:#fff;
    padding:14px 16px 16px;box-shadow:0 -6px 24px rgba(0,0,0,.16);transition:transform .28s ease;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .sheet-grabber{width:44px;height:4px;border-radius:999px;background:#e5e7eb;margin:4px auto 12px;}
  .sheet-close{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:1px solid #eee;background:#fff;font-size:20px;}
  .sheet-section{padding:6px 2px 10px;}
  .sheet-section h4{font-size:14px;margin:6px 2px;color:#6b7280;}
  .sheet-list{list-style:none;margin:0;padding:0;border:1px solid #f1f2f5;border-radius:12px;overflow:hidden;}
  .sheet-list li{padding:14px 12px;border-bottom:1px solid #f1f2f5;cursor:pointer;}
  .sheet-list li:last-child{border-bottom:0;}
  .sheet-list li:active{background:#f7f7f9;}
  .sheet-list li.selected{color:#8cc11d;font-weight:600;}
  .sheet-actions{padding-top:12px;}
  .apply-btn{width:100%;height:44px;border-radius:10px;background:#8cc11d;color:#fff;border:0;font-weight:600;}

  /* 아코디언 */
  .acc-header{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-weight:600;
  }
  .acc-caret{
    width:8px;height:8px;border-right:2px solid #9aa1aa;border-bottom:2px solid #9aa1aa;
    transform: rotate(45deg);transition: transform .2s ease;margin-left:10px;
  }
  .acc-header[aria-expanded="true"] .acc-caret{transform: rotate(-135deg);}
  .acc-panel{overflow:hidden;transition:max-height .25s ease, padding .2s ease;max-height:0;padding:0 2px;}
  .acc-panel.open{padding:8px 2px 4px;max-height: fit-content;}

  #sub_wrap.res_live .res_list .count {
    padding: 5px 10px;
    text-align: center;
  }

	#sub_wrap.res_live #reserve-shared {
		padding: 15px 10px;
  	}

	#sub_wrap.res_live #reserve-form div#rf-cancel {
		text-align: center !important;
		font-size: 14px;
	}

	#sub_wrap.res_live .reserve-actions {
		text-align: center;
	}

}


#sub_wrap .mobile-cards {
  display: none;
}

/* 카드 */
#sub_wrap.res_live .card {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 30px auto 50px;
}
#sub_wrap.res_live .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom: 2px solid #222;
}


/* 클럽 리스트 */
#sub_wrap.res_live .club-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* 날짜별 리스트 on/off */
#sub_wrap.res_live .res_list .club-list.item_wrap { display: none; }
#sub_wrap.res_live .res_list .club-list.item_wrap.is-active { display: block; }

/* 비어있는 날 안내문 스타일 */
#sub_wrap.res_live .res_list .club-list.item_wrap .empty-row {
  padding: 36px 0;
  color: #888;
  background: #fafafa;
  text-align: center;
  font-weight: 600;
}

#sub_wrap.res_live details.club{border-top:1px solid #ddd}
#sub_wrap.res_live details.club:first-child{border-top:none}
#sub_wrap.res_live summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:18px 16px}
#sub_wrap.res_live .res_list .count{
  background: green;
  color: #fff;
  border-radius: 50px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 12px;
}

/* 표/버튼(기존 스타일 유지 가정) */
#sub_wrap.res_live .golf-table { width:100%; border-collapse:collapse; min-width:1100px }
#sub_wrap.res_live .golf-table th, #sub_wrap.res_live .golf-table td { padding:14px 12px; border-bottom:1px solid #ddd; font-size:14px }
#sub_wrap.res_live .act_btn{
  display:inline-block;
  border:1px solid #ddd;
  background:#fff;
  color:#666;
  border-radius:10px;
  padding:6px 16px;
  font-weight:700;
  text-decoration: none;
}


/* 열 정렬/너비 */
#sub_wrap.res_live .golf-table th.col-area   { width:100px; }
#sub_wrap.res_live .golf-table th.col-time   { width:100px; }
#sub_wrap.res_live .golf-table th.col-course { width:120px;  }
#sub_wrap.res_live .golf-table th.col-hole   { width:80px;  }
#sub_wrap.res_live .golf-table th.col-people { width:80px;  }
#sub_wrap.res_live .golf-table th.col-booking { width: 80px; }
#sub_wrap.res_live .golf-table th.col-price  { width:120px; display: none;}
#sub_wrap.res_live .golf-table th.col-author { width:120px; }
#sub_wrap.res_live .golf-table th.col-action { width:180px; text-align:center; }
#sub_wrap.res_live .golf-table td:last-child  { text-align:center; } /* 예약 버튼 칸 */

#sub_wrap.res_live .time-row td:last-child {
  text-align: center;
  box-sizing: border-box;
  border-top: 2px solid #eeeeee;
}

/* 비고가 길 때 한 줄 말줄임 */
#sub_wrap.res_live .golf-table td.note{
  max-width: 280px;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

/* 아코디언: 기본은 감춤 */
#sub_wrap.res_live .reserve-row{ display:none; }
#sub_wrap.res_live .reserve-row.is-open{ display:table-row; }

/* (선택) 부드러운 펼침 느낌 - 내부 박스만 트랜지션 */
#sub_wrap.res_live .reserve-row .reserve-box{
  max-height:0; 
  overflow:hidden; 
  padding:0 16px; 
  transition:max-height .25s ease, padding .25s ease;
}

#sub_wrap.res_live .reserve-row.is-open .reserve-box{
  max-height:800px;
  padding: 30px 50px;
}

/* 컨테이너가 들어가는 행 */
#sub_wrap.res_live .reserve-row td{
  background:#f9fafb;
  border-bottom:1px solid #ddd;
  padding:0;
}

/* 컨테이너 박스 */
#sub_wrap.res_live .reserve-box{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#reserve-shared {
    padding: 30px;
}

#sub_wrap.res_live .reserve-box input, #sub_wrap.res_live .reserve-box textarea {
  box-sizing: border-box;
  border: 1px solid #ddd;
}

/* 상단 줄 */
#sub_wrap.res_live .reserve-head{
  display:flex; 
  align-items:center; 
  gap:10px; 
  flex-wrap:wrap;
}
#sub_wrap.res_live .reserve-head strong{ font-size:16px }
#sub_wrap.res_live .reserve-head .meta{ color:#64748b; font-size:13px }

/* 내용 그리드 */
#sub_wrap.res_live .reserve-grid {
  display:grid;
  gap: 10px 16px;
  grid-template-columns: 100px 1fr 100px 1fr;
  align-items: center;
  text-align: left;
  margin-top: 20px;
}

#sub_wrap.res_live #reserve-form div#rf-cancel {
  text-align: right;
  font-weight: bold;
  margin: 10px 0;
}

#sub_wrap.res_live button#rf-cancel.act_btn {
  border-radius: 2px;
  padding: 5px 10px;
  font-weight: normal;
  transition: all 0.2s;
}

#sub_wrap.res_live button#rf-cancel.act_btn:hover {
  background: #aaa;
}






/* 로그인 */
#sub_wrap.login {
  height: 70vh;
  align-content: center;
  margin:0;
  color:#1f2937;
  background: radial-gradient(1200px 600px at 50% -200px, #ffffff 0, #f7f7f8 65%);
}
#sub_wrap.login .card{
  margin:auto;
  width:100%;
  max-width:560px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow:0 20px 40px rgba(0,0,0,.06);
  padding: 50px;
  box-sizing: border-box;
}
#sub_wrap.login .title{
  text-align:center;
  letter-spacing:.06em;
  font-weight:800;
  font-size:28px;
}
#sub_wrap.login .subtitle{
  text-align:center;
  color:#6b7280;
  margin:-2px 0 24px;
  font-size:14px;
}
#sub_wrap.login .field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
#sub_wrap.login .label{font-size:13px; color:#6b7280;}
#sub_wrap.login .input{
  /* width:100%; */
  height:48px !important;
  padding:0 14px;
  border:1px solid #e5e7eb;
  border-radius:2px;
  outline:0;
  background:#fff;
  font-size:15px;
  transition: all 0.2s;
}
#sub_wrap.login .actions{margin-top:8px}
#sub_wrap.login .btn{
  width:100%;
  height:52px;
  border:0;
  border-radius:10px;
  background:#8cc11d;
  color:#ffffff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition: all 0.2s;
}
#sub_wrap.login .btn:hover{transform:translateY(-1px)}
#sub_wrap.login .btn:active{transform:translateY(0)}
#sub_wrap.login .options{
  display:flex; 
  align-items:center;
  gap:10px; 
  margin: 30px 0;
  color: #6b7280;
  font-size: 14px;
  justify-content: center;
}
#sub_wrap.login .checkbox{width:18px; height:18px;}
#sub_wrap.login .links{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
#sub_wrap.login .link-btn{
  flex:1 1 180px;
  height:40px; border-radius:10px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer; font-size:14px; color:#374151; transition:background .15s;
}
#sub_wrap.login .link-btn:hover{background:#f9fafb}





/* 공지사항-리스트 */
.notice_list .select, 
.notice_list .input, 
.notice_list .btn{
	height:42px !important; 
	border:1px solid #ddd; 
	background:#fff; 
	border-radius: 2px;
	padding:0 12px; 
	font-size:14px;
}


/* 게시판 */
.notice_list .board{ 
	border-radius: 2px; 
	overflow:hidden;
	border-bottom: 0;
}

h2#board-title {
  text-align: center;
  margin-bottom: 30px;
}

.notice_list table{
	width:100%; 
	border-collapse:collapse;
}
.notice_list th, .notice_list td{
	border-bottom:1px solid #ddd; 
	padding:18px 14px; 
	text-align:center
}
.notice_list thead th{
	background:#fcfcfd; 
	font-weight:700; 
	color:#374151; 
	background: #fafafa;
  border-bottom: 2px solid #222;
}
.notice_list td.title{
	text-align:left;
	margin-bottom : 0;
}
.notice_list .title a{
	color:inherit; 
	text-decoration:none;
}
.notice_list .title a:hover{text-decoration:underline}


.notice_list .toolbar{
	/* display:grid;
	grid-template-columns: 160px 1fr 88px;
	align-items:stretch; */
	gap:10px;
	justify-content: center;
	width: 50%;
	margin: 30px auto;

	display: flex;
	align-items: center;
}

.notice_list .toolbar .select,
.notice_list .toolbar .input,
.notice_list .toolbar .btn{
  height:42px !important;
  padding:0 12px;
  border:1px solid #ddd;
  border-radius:2px;
  box-sizing:border-box;
  font-size:14px;
}

.notice_list .toolbar .select { flex: 0 0 160px; }
.notice_list .toolbar .btn    { flex: 0 0 80px;  }
.notice_list .toolbar .input  { flex: 1 1 260px; min-width: 200px; }

/* 버튼 중앙정렬 및 텍스트 들뜸 방지 */
.notice_list .toolbar .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;   /* iOS/안드에서 높이 불일치 방지 */
  padding:0;       /* 버튼 내부 패딩 균일화 */
}


/* === 모바일: 테이블 -> 리스트(제목 | 날짜) === */
@media (max-width:760px){
  .notice_list .inner {
    width: 100%;
  }

	.notice_list .board thead{display:none;}

  .notice_list tbody {
    box-sizing: border-box;
    border-top: 2px solid;
  }
	.notice_list .board tbody tr{
		display: flex;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 8px;
    	padding: 10px 20px;
		border-bottom: 1px solid #ddd;
		flex-direction: column;
		align-items: flex-start;
	}

	/* 불필요한 기본 테이블 스타일 제거 */
	.notice_list .board tbody td{
		border:0; padding:0; background:transparent; text-align:left;
	}
	.notice_list .board tbody td::before{content:none;} /* 카드형 라벨 제거 */

	/* 숨길 컬럼: 번호, 작성자, 조회수 */
	.notice_list .board tbody td:nth-child(1),
	.notice_list .board tbody td:nth-child(4),
	.notice_list .board tbody td:nth-child(5){display:none;}

	/* 제목 */
	.notice_list .board tbody td.title a{
		display:block;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		font-weight:600;
	}

	/* 등록일(오른쪽 정렬로 한 줄 표시) */
	.notice_list .board tbody td:nth-child(3){
		text-align:right;
		color:#666;
		font-size:13px;
	}

	.notice_list .toolbar {
		margin: 15px 0;
		grid-template-columns: auto 200px auto;
		gap: 8px;
		width: 100%;
	}

	.notice_list .toolbar .select, 
	.notice_list .toolbar .input, 
	.notice_list .toolbar .btn {padding: 0;}

	.notice_list .select, 
	.notice_list .input, 
	.notice_list .btn{
		height: fit-content !important; 
	}

  .notice_list nav.pagination {
    width: 90%;
  }
	
}




/* 공지사항-뷰 */
.notice_view .nv-wrap{max-width:1400px; margin:100px auto;}

/* 헤더 */
.notice_view .nv-header{
	display:flex; 
	flex-direction: row-reverse;
	justify-content: start;
	align-items:center; 
	gap:8px; 
	flex-wrap:wrap; 
	padding:6px 0 10px;
}
.notice_view .nv-title{font-size:26px; font-weight:800; margin:0}
.notice_view .nv-badge{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:700; color:#fff; background: orange;}


.notice_view .nv-meta{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:center;
	font-size:14px; color:#4b5563;
	padding: 10px 0 20px;
	border-bottom: 2px solid #222;
}
.notice_view .nv-meta li{display:flex; align-items:center}
.notice_view .nv-meta li+li::before{content:""; display:inline-block; width:1px; height:12px; background:#d6d6d6; margin:0 12px 0 0}
.notice_view .nv-meta .key{color:#6b7280; margin-right:4px}


.notice_view .nv-divider{height:1px; background:#ddd; margin:30px 0}


/* 본문 이미지 섹션 */
.notice_view .nv-figure{position:relative; margin: 30px auto; background:#fff}
.notice_view .nv-figure img{display:block; width:100%; height:auto}
.notice_view .nv-zoom{position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); border:1px solid #ddd; text-decoration:none}
.notice_view .nv-zoom::before{content:""; width:18px; height:18px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center/contain}


.notice_view .nv-content{padding:8px 2px 0; line-height:1.7; font-size:16px; color:#374151}


/* 하단 버튼 */
.notice_view nav.nv-actions {text-align: center;}
.notice_view .nv-btn{display:inline-flex; align-items:center; justify-content:center; min-width:140px; height:42px; padding:0 18px; border-radius:10px; background:#8cc11d; color:#fff; text-decoration:none; font-weight:700}
.notice_view .nv-btn:hover{background:#739d1a;}


/* 반응형 */
@media (max-width:760px){
	.notice_view .nv-wrap {
		margin: 50px auto;
		width: 100%;
	}

  .notice_view .nv-header,
  .notice_view .nv-content {
    width: 90%;
    margin: auto;
  }

	.notice_view .nv-title{font-size:22px}
	.notice_view .nv-meta{
    font-size:13px;
    box-sizing: border-box;
    padding: 10px 20px 20px;
  }
  .notice_view .nv-figure {width: 90%;}
	.notice_view .nv-btn{min-width:120px; height:40px}
}


/* 블랙리스트 */
.black_list td.title {
    text-align: center;
}



/*768~1280 Tablet */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  [class $= "inner"] { width: 90%;  margin: 50px auto;}
	
  .navi>li>a {width: 12vw;}


}


/* 모바일버전 */
@media screen and (max-width: 768px) {
  [class $= "inner"] {
    width: 90%;
    margin: 50px auto;
  }

  .pc {display: none;}
  .mobile {display: block;}
  
  #header {height: 50px;}
  #header h1 {width: 120px;}
  #header .header_box {
    justify-content: space-between;
    box-sizing: border-box;
    width: 90%;
    margin: auto;
  }

  #header h1 a, #header h1 a img {display: block;}
  
  #header .navi {
    display: none;/*JS 처리 예정*/

    line-height: 3;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    height: 300%;
    padding-top: 30px;
    background: #fff;
    z-index: 10;
  }

  #header .navi li {
    width: 90%;
    margin: auto;
    margin-bottom: 10px;
  }

  #header .navi li a {
    text-align: left;
  }

  #header .navi>li {
    position: static;
    height: auto;
  }
  
  #header .navi>li:not(:last-child) {
    margin-right: auto;
  }

  ul.navi_list {
    position: static;
    transform: none;
  }
  .navi_list li {
    height: 40px;
  }
  .navi_list li a {
    background: none;
  }

  #header li.gnb {
    display: block;
    margin-top: 30px;
  }
  #header div.gnb {display: none;}
  #header .gnb a.login {
    justify-content: start;
    padding: 0;
  }
  

  #header .mobile-btn {
    display: block;
    position: static;
    transform: translateX(10px);
    font-size: 30px;
    padding: 10px;
    background: none;
    opacity: 0.7;
  }  
  #header .mobile-btn .fa-bars {display: block;}
  #header .mobile-btn .fa-times {display: none;}
  #header .mobile-btn.on .fa-bars {display: none;}
  #header .mobile-btn.on .fa-times {display: block;}


  /* 메인 */
  /* 메인 슬라이드 */
  #visual .slider li {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  #visual img {
    display: block;
    height: 100%;
  }
  #visual .slider li .title {
    width: 90%;
    margin: auto;
  }
  #main #visual .slider li .title h1 {
    font-size: 30px;
  }


  /* 메인 콘텐츠 */
  /* 공통스타일 */
  .title {
    text-align: left;
  }
  .title h2 {
    font-size: 23px;
  }

  .dot_nav {
    margin-top: 0;
  }

  
  /* 추천골프 */
  #sub_wrap   .best_golf,
  .best_golf {
    position: static;
    margin: 50px auto;
    padding-top: 0;
  }

  #sub_wrap  .best_golf .cont_wrap .btn_wrap,
  .best_golf .cont_wrap .btn_wrap {
    width: 100%;
  }

  #sub_wrap .best_golf>.title,
  .best_golf>.title {
    width: 90%;
    margin: 0 auto 30px;
  }

  #sub_wrap .best_golf .cont_wrap .list_wrap li .img_box,
  .best_golf .cont_wrap .list_wrap li .img_box {
    height: 200px; /* 필요시 조절 */
  }


  /* 공지사항 */
  section.notice_group .inner {
    width: 90%;
  }
  section.notice_group .flex_wrap {
    display: flex;
    justify-content: space-between;
  }

  section.notice_group .notice_group {
    margin-top: 0;
  }

  section.notice_group .notice_group li a {
    padding: 20px;
  }

  section.notice_group .notice_group li .notice_title p {
    width: 85%;
  }

  section.notice_group .notice_group li .notice_title i {
    font-size: 15px;
  }




  /* 카테고리 목록(실시간부킹/양도/조인) */
  #cont-2 .inner {
    width: 100%;
  }

  #cont-2 .tab_list {
    margin-bottom: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }

  #cont-2 .tab_list ul {
    gap: 0;
    width: 90%;
    margin: auto;
  }

  #cont-2 .tab_list li {
    width: calc(100% / 3);
    height: 110px;
    color: #aaa;
  }
  
  #cont-2 .tab_list li img {
    width: 50px;
    height: 50px;
  }

  #cont-2 .tab_list li p {
    margin-top: 15px;
  }

  .tab_list li:hover::after, .tab_list li.active::after {bottom: 0;}
  .tab_list li:hover, .tab_list li.active {color: #8cc11d !important;}


  /* 달력 */
  .calendar {
    max-width: 1400px;
    width: 90%;
    margin: 30px auto;
  }
  
  .calendar .slide_view {
    width: 100%;
  }


  /* 태블릿 이하 */
  .calendar ul.date_list, .calendar ul.golf_list { gap: 8px; }

  .calendar ul.date_list li,
  .calendar ul.golf_list li {
    flex: 0 0 100px;
  }

  .calendar .slide_btn_prev,
  .calendar .slide_btn_next {
    top: 50%;
    width: 28px; height: 28px;
  }

  #main .days { font-size: 0.8rem; }
  #main .use  { font-size: 0.8rem; }

  /* 푸터 */
  #footer .inner {
    width: 90%; 
    line-height: 1.3; 
    text-align: center;
  }

  .finfo_wrap {
    width: 100%;
    text-align: left;
    justify-content: start;
    font-size: 13px;
  }

  ul.finfo li {
    height: auto;
    padding-bottom: 15px;
  }

  ul.finfo li.owner {
    gap: 0;
    justify-content: space-between;
  }

  ul.finfo .flogo {
    margin-bottom: 20px;
  }

  ul.finfo li b {
    margin-right: 10px;
  }

  
  .fadd_wrap {
    margin-top: 20px;
  }

  ul.fadd {
    justify-content: start;
    gap: 5px;
  }

  ul.fadd a {
    padding: 5px 10px 5px 0;
  }


  .fcopy_wrap {
    margin-top: 10px;
  }

  ul.fcopy {
    text-align: left;
    font-size: 11px;
  }


  /* 퀵버튼 */
  #quick_menu {
    right: 20px;
    bottom: 50px;
  }

  #quick_menu a {
    height: 50px;
    width: 50px;
    opacity: 0.5;
  }



  /* 서브페이지 */
  /* 공통스타일 */
  #sub_wrap .sub_banner {
    height: 200px;
  }

  #sub_wrap .sub_banner .title {
    width: 90%;
    text-align: center;
  }

  
  nav.pagination {
    display: flex;
    width: 100%;
    margin: 20px auto;
    padding: 0;
  }
  
  nav.pagination a.btn {
    gap: 5px;
    padding: 7px 1px;
    font-size: 12px;
  }
  
  .page {
    min-width: 30px;
    height: 30px;
  }


  /* 공지사항 */
  .notice_list .toolbar{
    width:90%;
    margin:16px auto;
    gap:6px;
    justify-content:stretch;
    flex-wrap: nowrap;
  }
  .notice_list .toolbar .select { flex:0 0 110px; }
  .notice_list .toolbar .btn    { flex:0 0 72px; }
  .notice_list .toolbar .input  {
    flex:1 1 auto;
    min-width:0;
  }

  .notice_list .toolbar .select,
  .notice_list .toolbar .input,
  .notice_list .toolbar .btn{
    height:38px;
    padding:0 10px;
    font-size:13px;
  }



  /* 예약실적 등록(res_reg) */
  #sub_wrap.res_reg input:not([type="radio"]):not([type="checkbox"]), #sub_wrap.res_reg select {
    height: 32px;
    width: 48.6%;
  }

  #sub_wrap .table-wrap .page-title {
    display: flex;
    justify-content: unset;
    align-items: center;
    flex-direction: column;
  }

  #sub_wrap.tee .table-wrap .page-title {
    flex-direction: row;
  }

  #sub_wrap .page-title h2 {
    font-size: 22px;
    margin-right: auto;
  }


  /* 버튼 */
  #sub_wrap .date_btn,
  #sub_wrap .act_btn {
    font-size: 14px;
  }





  /* 양도/조인 */
  #sub_wrap.join #cont-2 form.golf-search {
    width: 90%;
    margin: auto;
  }

  #sub_wrap.join #cont-2 .golf-search .title h2 {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
  }

  #sub_wrap.join #cont-2 .golf-search .flex_wrap {
    justify-content: unset;
    flex-direction: column;
    gap: 30px;
  }






  /* 예약실적 통계 */
  #sub_wrap.res_stat .toolbar {
    grid-template-columns: auto;
    gap: 20px;
  }
  
  #sub_wrap.res_stat .field.is-wide { grid-column: span 1; }

  #sub_wrap.res_stat .filters {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  #sub_wrap.res_stat .table-wrap {
    overflow-x: auto;
  }

  /* 예약실적 등록 */
  #sub_wrap.res_reg .table-wrap .table-filter {
    display: block;
  }

  #sub_wrap.res_reg .table-wrap .table-filter select {
    width: 100% !important;
    height: 32px;
  }

  

  /* #sub_wrap.res_reg .table-wrap .table-filter .toolbar,  */
  #sub_wrap.res_reg .table-wrap .table-filter .select_wrap {
    display: flex;
    font-size: 14px;
    gap: 5px;
    flex-wrap: wrap;
  }
  #sub_wrap.res_reg .table-wrap .table-filter .dates-row {
    margin-top: 5px;
    justify-content: space-between;
    width: 100%;
  }



  #sub_wrap.res_reg .toolbar {
    /* gap: 8px;
    justify-content: start; */
    margin: 20px auto 0 0;
    display: block !important;
  }

  #sub_wrap.res_reg .table-wrap .toolbar .search {
    display: flex;
    width: 100%;
    margin-top: 20px;
  }

  #sub_wrap.res_reg .table-wrap .toolbar .search input {width: 84%;}

  #sub_wrap.res_reg .search .act_btn {
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
  }

  #sub_wrap.res_reg .table-wrap .table-container {overflow-x: auto;}

  #sub_wrap.res_reg .table-wrap .page-title .toolbar {display: none !important;}
  #sub_wrap.res_reg .table-filter .toolbar .segmented {display: none;}

  #sub_wrap.res_reg .table-wrap .toolbar .search {justify-content: space-between;}



  /* 선티관리 */
  #sub_wrap.tee .form-grid td.col-center-change {text-align: left;}

  	#sub_wrap.tee .row-inline {
		gap: 20px;
		flex-wrap: wrap;
	}

  #sub_wrap.tee .row-inline .w160,
  #sub_wrap.tee .row-inline .w80 {width: 203px !important;}
  #sub_wrap.tee .row-inline .grow,
  #sub_wrap.tee .row-inline .grow .input {width: 100%;}

  #sub_wrap.tee .row-inline .group.align .label {width:101.88px;}

	/* 옵션 정렬 */
  	#sub_wrap.tee .row-inline .group.option {
		/* gap: 10px 20px; */
		width: 100%;
	}

  #sub_wrap.tee .field_wrap,
  #sub_wrap.tee .filterbar {
    flex-wrap: wrap;
  }

  
  #sub_wrap.tee .field.inline {
    gap: 20px;
    margin-right: 0;
    width: 100%;
  }



  
  #sub_wrap.tee .table-wrap .table-filter .toolbar {
    display: flex !important;
  }

  #sub_wrap.tee .filterbar {
    flex-direction: column;
    gap: 12px;
  }
  #sub_wrap.tee .field_wrap {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  #sub_wrap.tee .field,
  #sub_wrap.tee .field select,
  #sub_wrap.tee .field input[type="date"] {
    width: 100%;
    background: #fff;
    border-radius: 2px;
  }
  #sub_wrap.tee .field.tee_date {
    display: flex;
    justify-content: space-between;
    gap: 5px;
  }

  
  #sub_wrap.res_reg .table-wrap .toolbar .search {justify-content: unset;}

  #sub_wrap.tee .actions {
    /* width: 100%;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 0; */
    display: none;
  }



  #sub_wrap.tee .table-wrap .table-filter .toolbar{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
  }

  #sub_wrap.tee .table-wrap .table-filter .toolbar > *{
    flex: 0 0 auto;
    min-width: 0;
  }

  #sub_wrap.tee .table-wrap .table-filter .toolbar .segmented{
    margin-left: auto;
  }

  #sub_wrap.tee .table-wrap .table-filter .toolbar .search{
    margin-left: auto;
    display: flex;
    gap: 6px;
    margin-top: 0;
  }

	#sub_wrap.tee .table-wrap .table-filter select {
        width: 49% !important;
	}

  #sub_wrap.res_reg .table-wrap .toolbar .search{ justify-content: initial; }

  #sub_wrap.tee .table-container td {border: none;}

  
	.select2-container--default.select2-container {
		width: 100% !important;
	}

	#sub_wrap.tee .table-wrap .table-container td .act_btn {
		font-size: 13px;
	}

	#sub_wrap.tee .table-container .cell {
    	gap: 5px;
	}

	#sub_wrap.tee .table-container .cell.align input {
		max-width: 60px !important;
	}
  

  /* 실시간 예약 내역 */
  #sub_wrap.booking_live section.res_stat ul.flex_wrap {
    flex-direction: column;
  }

  #sub_wrap.booking_live section.res_stat li.flex_list {
    width: 100%;
  }

  #sub_wrap.booking_live section.res_stat li.flex_list:not(:last-child) {
    border-right: 1px solid #ddd;
    border-bottom: 0;
  }

  #sub_wrap.booking_live section.res_stat .desc li:not(:last-child) {
    margin-bottom: 10px;
  }


  #sub_wrap.booking_live .table-filter {
    flex-direction: column; 
    gap: 12px;
    width: 100%;
  }
  #sub_wrap.booking_live .table-filter .select_wrap {
    width: 100%;
    flex-wrap: wrap; 
    gap: 8px;
    align-items: center;
  }

  #sub_wrap.booking_live .table-filter .input,
  #sub_wrap.booking_live .table-filter .select.control {
    flex: 1 1 140px; 
    width: auto; 
    min-width: 0;
    height: 34px;
    border-radius: 2px;
  }
  
  #sub_wrap.booking_live .table-filter input[type="date"] {
    flex: 1 1 160px;
    height: 34px;
  }


  #sub_wrap.booking_live .table-filter .radio_wrap {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    gap: 12px;
    width: 100%;
  }

  #sub_wrap.booking_live .table-filter .radio_group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  #sub_wrap.booking_live .table-filter .radio_wrap .act_btn {
    margin-left: auto;
    height: 34px;
  }


  #sub_wrap.booking_live .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 2px solid #222;
    min-width: 0;
  }
  #sub_wrap.booking_live .table-container table {
    min-width: 1200px;
    table-layout: fixed;
  }
  
  
	#sub_wrap.booking_live .actions {
		display: flex;
		flex-direction: column;
	}

  
	#sub_wrap.booking_live .table-container tbody td.actions {}


	#sub_wrap.booking_live .table-container tbody td .act_btn {
		padding: 8px 10px; 
		margin: 0;
    	width: auto;
	}


  

  /* 실시간 부킹 */
  #sub_wrap.join #cont-2 .golf-search .flex_wrap {
    flex-direction: column-reverse;
    gap: 30px;
  }

  #sub_wrap.join #cont-2 .golf-search .flex_wrap .btn_wrap {
    width: 100%;
    text-align: center;
  }

  #sub_wrap.join #cont-2 .golf-search .flex_wrap .pill {
    width: 100%;
    margin: auto;
    justify-content: center;
  }

  #sub_wrap.join #cont-2 .golf-search .field {
    width: calc(100% / 4);
    padding: 5px 0;
  }

  #sub_wrap.join #cont-2 .golf-search .field input, #sub_wrap.join #cont-2 .golf-search .field select {
    width: 100%;
  }



  /* PC용 표는 숨김 */
  #sub_wrap.res_live .table-wrap { display:none; }

  /* 카드 컨테이너 */
  #sub_wrap.res_live .mobile-cards {
    display:grid;
    gap:12px;
    padding:12px 0;
  }

  /* 카드 */
  #sub_wrap.res_live .mcard {
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:16px;
    padding:14px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
  }

  /* 상단 배지 */
  #sub_wrap.res_live .badges {
    display:flex; 
    gap: 15px;
    justify-content: center;
  }

  #sub_wrap.res_live .badge {
    font-size:12px; 
    font-weight:700;
    /* display:inline-flex; 
    align-items:center;
    padding:6px 10px;
    border-radius: 10px;
    background:#f1f5f9; 
    color:#64748b; */
  }

  #sub_wrap.res_live .badge--primary {
    background:#8dc11d1e; 
    color:#8cc11d; 
    font-weight:800;
  }

  #sub_wrap.res_live .badge:first-child {
    position: relative;
  }

  #sub_wrap.res_live .badge:first-child::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 75%;
    background: #ddd;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 클럽명 */
  #sub_wrap.res_live .mobile-cards .title {
    font-weight: 900;
    font-size: 25px;
    margin: 20px 0;
    color: #111;
    text-align: center;
    display: none;
  }

  /* 시간 / 캐디 */
  #sub_wrap.res_live .infos {
    display:flex; 
    gap:14px; 
    margin: 10px 0;
    color:#111; 
    flex-wrap:wrap; 
    justify-content: center;
  }
  #sub_wrap.res_live .info {
    display:flex; 
    gap:6px; 
    align-items:center;
    font-weight:700; 
  }

  #sub_wrap.res_live .infos i {
    color: #8cc11d;
  }


  /* 칩(금액, 부부/커플, 매니저 등) */
  #sub_wrap.res_live .chips {
    display:flex; 
    gap:6px; 
    justify-content: center;
  }
  #sub_wrap.res_live .chip {
    display:inline-flex; 
    align-items:center; 
    gap:6px;
    padding: 5px; 
    border-radius:8px;
    background:#f8fafc; 
    font-size:12px; 
    font-weight:700;
    border:1px solid #eef2f7;
  }

  /* 예약 버튼 */
  #sub_wrap.res_live .actions {
    margin-top:12px;
  }
  #sub_wrap.res_live .actions .reg_btn {
    display:block; 
    width:100%;
    border-radius:12px;
    background:#8cc11d; 
    color:#fff;
    padding:12px 0; 
    text-align:center;
    text-decoration:none;
  }

  .pagination {
    padding: 0;
  }

  /* 모바일용 신청 폼 패널 */
  #sub_wrap.res_live .mobile-reserve {
    background:#f9fafb; 
    border:1px solid #e5e7eb; 
    border-radius:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.05); 
    overflow:hidden;
  }
  #sub_wrap.res_live .mobile-reserve .reserve-box { padding:18px 16px; }
  #sub_wrap.res_live .mobile-reserve .reserve-grid {
    display:grid; gap:10px 12px; grid-template-columns: 90px 1fr;
  }
  #sub_wrap.res_live .mobile-reserve .reserve-grid .field--full { grid-column: 1 / -1; }
  #sub_wrap.res_live .mobile-reserve .reserve-grid input.input {width: 100%;}
  #sub_wrap.res_live .reserve-grid textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    resize: vertical;
  }
  #sub_wrap.res_live .mobile-reserve .reserve-actions { margin-top:10px; }
  #sub_wrap.res_live .mobile-reserve .reg_btn {
    display:block; width:100%; border:0; border-radius:12px;
    background:#8cc11d; color:#fff; padding:12px 0; font-weight:900; text-align:center;
  }

  /* 닫기 버튼(선택) */
  #sub_wrap.res_live .mobile-reserve .reserve-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  #sub_wrap.res_live .mobile-reserve .close-reserve{
    border:0; background:#e5e7eb; border-radius:8px; padding:6px 10px; font-weight:700; cursor:pointer;
  }


  /* 공통: 입력들은 기본적으로 label 오른쪽 전체를 차지 */
  #sub_wrap.res_live .reserve-grid .input,
  #sub_wrap.res_live .reserve-grid .textarea,
  #sub_wrap.res_live .reserve-grid input,
  #sub_wrap.res_live .reserve-grid textarea,
  #sub_wrap.res_live .reserve-grid select {
    grid-column: 2 / -1;   /* 2번째 컬럼부터 끝까지 */
    width: 100%;
    box-sizing: border-box;
  }

  /* 비고: 라벨(.field--full) 다음 오는 요소를 전체 폭으로 */
  #sub_wrap.res_live .reserve-grid .field--full + .textarea,
  #sub_wrap.res_live .reserve-grid .field--full + textarea,
  #sub_wrap.res_live .reserve-grid .field--full + * {
    grid-column: 1 / -1;   /* 좌~우 끝까지 */
  }

  /* textarea 기본 높이도 함께 */
  #sub_wrap.res_live .reserve-grid textarea {
    min-height: 96px;      /* 필요에 맞게 */
    resize: vertical;
  }



  /* 로그인 */
  #sub_wrap.login {height: auto;}
  #sub_wrap.login .card {padding: 50px 30px; background: #fafafa;}
  #sub_wrap.login .input {height: 40px !important;}
  #sub_wrap.login .link-btn {flex: 1 1 90px;}
  
}

/* select2 컨테이너 높이 및 전체 스타일 맞추기 */
.select2-container--default.select2-container {
  width: 250px; /* 필요시 너비 조절 */
  font-size: 14px;
  font-family: inherit;
  color:#222 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {color:#222 !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {margin-top:-5px;}
/* 선택 박스 기본 스타일 */
.select2-container--default .select2-selection--single {
  color:#f00;
  background-color: #fff;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  height: 32px !important;
  line-height: 20px;
  padding: 0;
  box-sizing: border-box;
}


/* 셀럭트2 라이브러리 영역 선택된 텍스트 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px !important;
  color: #333;
  padding-left: 2px;
}

/* 화살표 영역 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px;
  right: 6px;
  width: 20px;
}

/* 화살표 아이콘 색상 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #666 transparent transparent transparent;
}

/* 포커스 시 테두리 색상 변경 (기본 select 박스 느낌 유지) */
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #66afe9;
  outline: 0;
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

/* 1) 기본 삼각형 숨김 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

/* 2) 커스텀 아이콘 추가 (↓ 아이콘) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute;      /* Select2 기본이 absolute */
  right: 8px;              /* 필요 시 조정 */
  top: 70% !important;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  display: block;
  width: 16px; height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  /* data-URI: 두께/색상 변경 쉬운 stroke 기반 chevron */
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23666' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
      <polyline points='6 9 12 15 18 9'/></svg>");
  opacity: .9;
}

/* 3) 열림 상태(위로 회전) */
.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  transform: rotate(180deg);
}

/* 4) 포커스/호버 시 명암 강조 */
.select2-container--default .select2-selection--single:hover .select2-selection__arrow::after,
.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__arrow::after{
  filter: brightness(0);
  opacity: 1;
}

/* 5) 비활성(disabled) 컬러 다운 */
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow::after {
  opacity: .4;
}

.pop_wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2;
	display: none;
}

.pop_wrap.on {
	display: block;
}

.pop_wrap .inner_wrap {
	box-sizing: border-box;
	padding: 50px;
	width: 1400px;
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
}

.pop_wrap i.fa-solid.fa-xmark {
	font-size: 25px;
	cursor: pointer;
}

.pop_wrap input {
	height: auto;
}

.pop_wrap th, 
.pop_wrap td {
	border: 1px solid #ddd;
	text-align: center;
}

.pop_wrap th {
	height: 30px;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: normal;
}

.pop_wrap td input {
	width: 90%;
	box-sizing: border-box;
	border: 1px solid #eee;
}

.pop_wrap td {
	height: 40px;
	font-size: 14px;
	font-weight: normal;
}

th.name {
	width: 10%;
}

th.date {
	width: 10%;
}

th.course {
	width: 5%;
}

th.time {
	width: 5%;
}

th.price {
	width: 10%;
}

th.memo {
	width: 25%;
}

th.user {
	width: 15%;
}

th.number {
	width: 15%;
}

th.btn {
	width: 5%;
	display: table-cell;
}

.pop_wrap td.pc {
	display: table-cell;
}


@media (max-width: 768px) {
	.pop_wrap .inner_wrap {
		padding: 30px;
		width: 90%;
	}

	.pop_wrap .page-title {
		margin-bottom: 15px;
		padding-bottom: 10px;
	}

	.pop_wrap table tbody {
		display: flex;
		flex-direction: row;
	}

	.pop_wrap tr {
		display: flex;
		flex-direction: column;
	}

	.pop_wrap tr:nth-child(1) {
		width: 40%;
	}

	th.name,
	th.date,
	th.course,
	th.time,
	th.price,
	th.memo,
	th.user,
	th.number,
	th.btn {
		width: 100%;
		align-content: center;
	}

	.pop_wrap tr:nth-child(2) {
		width: 60%;
	}

	.pop_wrap td {
		height: 30px;
		align-content: center;
	}

	.pop_wrap td input {
		height: 25px !important;
	}

	.pop_wrap .modify_btn.mobile {
		width: fit-content;
		margin: 20px auto 0;
	}

	.pop_wrap td.pc,
	th.btn.pc {
		display: none;
	}

}