@font-face {
    font-family : 'GmarketSans M';
    font-style: normal;
    src : url(../fonts/GmarketSansTTFMedium.ttf) format("truetype");
}

@font-face {
    font-family : 'GmarketSans B';
    font-style: normal;
    src : url(../fonts/GmarketSansTTFBold.ttf) format("truetype");
}

*{padding: 0; margin: 0; box-sizing: border-box;}
ul,ol,li{list-style: none;}
a,a:link,a:visited{display: block; color: inherit; text-decoration: none;}
input,select,button{outline: 0; border: 0; font-size: 1.2rem;}
/* 기준 글자크기. 이 값 하나가 화면 전체를 좌우한다 —
   나머지가 전부 rem 이라 여기만 바꾸면 글자와 여백이 같은 비율로 커진다.
   10px 이 작다는 현장 의견으로 15px 로 올렸다(기존 대비 +50%).
   ⚠️모바일/태블릿은 main_t.css 가 14px 로 따로 덮는다. */
html {font-size: 15px;}
body{font-size: 1.2rem; color:#000; line-height:1.5; font-family:'naR', '맑은 고딕','Malgun Gothic','돋움',Dotum,sans-serif; background-color: #eff0f6;}

/* ★메뉴 폭은 px 로 고정한다. rem 이면 기준 글자크기(15px)에 끌려 360px 로 벌어져
   본문이 밀리고 가로 스크롤이 생긴다. 글자만 커지고 메뉴는 그대로여야 한다. */
aside {position: fixed; z-index: 999; float: left; width: 240px; height: 100%; background-color: #1e232e; color: #fff;}
/* ★min-width 를 두지 않는다.
   글자를 15px 로 키운 뒤 1280px 고정폭 때문에 창이 좁으면 페이지 전체가 좌우로 밀렸다.
   넓은 표는 .data-grid-body 가 자기 안에서 가로 스크롤하므로(overflow-x:auto)
   페이지까지 밀릴 이유가 없다. */
section {position: absolute; margin-left: 240px; width: calc(100% - 240px);}
header {background-color: #fff; box-shadow: 0 0 1rem 0 rgb(41 48 66 / 10%); height: auto; padding: 1rem 2rem 1.5rem 2rem;}
article {display: flex; width: 100%; flex-direction: column; height: auto; padding: 1rem;}
article.header_toggle_mt {margin-top: 0 !important;}
footer {width: 100%;}

.container {padding: 1rem; width: 100%;}
.container_row {width: 50%;}
.container_row02 {width: 35%;}
.container_row03 {width: 65%;}
.row {flex-direction: row;}
.item img {width: 100%;}

/*sideBar*/
.sideBar_btn {height: 8.1rem; line-height: 10.5rem; white-space: nowrap; overflow: hidden; padding-left: 2rem;}
.sideBar_btn a {display: flex; align-items: center; height: 100%;}
.logo {font-family: 'GmarketSans M'; display: block; font-size: 2rem; margin-top: 0.6rem; line-height: 1.3;}

.sideBar_nav {cursor: pointer;}
/* ★데스크톱 — 메뉴가 창 높이보다 길면 메뉴 목록만 굴린다(2026-09-30).
   로고 줄(.sideBar_btn 8.1rem)은 붙박이로 남기고 남은 높이만 쓴다 — 다 들어가면
   스크롤이 없고(auto), 넘칠 때만 생긴다. 세로 스크롤 자리(스크롤바 폭)만큼 240px
   메뉴 줄이 좁아져도 가로로 굴러가지 않게 overflow-x 는 숨긴다.
   태블릿은 main_t.css 가 자기 규칙(overflow-y:scroll · 높이 114px)을 그대로 쓴다 —
   is-mobile(UA 판정)로 갈라 이 규칙은 데스크톱에만 걸린다. */
html:not(.is-mobile) .sideBar_nav {
    height: calc(100% - 8.1rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #4a5568 transparent;
}
.sideBar_nav > ul > li {transition: width 0.5s linear; white-space: nowrap; overflow: hidden;}
.has_sub01.open {background-color: #4766FF;}
.has_sub01.open .nav01 {display: block;}
.sideBar_nav > ul > li.active, .sideBar_nav_title:hover {background-color: #4766FF;}
.sideBar_nav > ul > li > a {display: flex; align-items: center; width: 240px; height: 5rem;}
.sideBar_nav_title {padding: 1rem 2rem; border-bottom: 0.1rem solid #3f485f; cursor: pointer; overflow: hidden;}
.sideBar_nav_title > .nav_icon {font-size: 1.4rem; margin-right: 1.8rem;}
.nav_arrow {margin-left: auto; font-size: 1rem;}
.has_sub01:first-child > .sideBar_nav_title {border-top: 0.1rem solid #3f485f;}

.nav01, .nav02 {display: none; color: #fff; background-color: #262e3d;}
.nav01 > li > .sideBar_nav_sub01 {display: flex;}
.nav02 {background-color: #2c3649;}
.sideBar_nav_sub01, .sideBar_nav_sub02 {color: #fff; padding: 1.5rem 2rem 2rem 3.2rem; line-height: 0.8rem;}
.nav01 li:first-child a, .nav02 li:first-child a {padding: 2rem 2rem 1.5rem 3.2rem;}
.sideBar_nav_sub02 {padding-left: 4.4rem;}
.sideBar_nav_sub01:hover {color: #9cabff;}
.sideBar_nav_sub02:hover {color: #9cabff;}

.sideBar_nav_title.color {background-color: #4766FF;}
.sideBar_nav_sub01.color_sub01 {color: #9cabff;}
.sideBar_nav_sub02.color_sub02 {color: #9cabff;}

.sidBar_toggle_close {position: absolute; top: 1.5rem; right: -4rem;}
.toggle_close_btn {padding: 0.1rem 0.6rem; background-color: #4766FF; display: block; border-radius: 0.3rem;}

/*header*/
.header_sub {display: flex; align-items: center; height: 3rem;}
.menu_c {color: #4766FF; font-weight: bold;}

/* 레거시 header 아래의 제목 영역(.header_title_box — `>> 메뉴명` · 대시보드 바로가기 .header_shortcut)은
   사용자 결정(admin-21)으로 빠졌다 — 레거시 예외 */

.header_btn_box {border-top: 0.1rem solid #edeef1; padding-top: 1.3rem; margin-top: 0.7rem;}
.header_btn_box > ul > li {display: inline-block; cursor: pointer;}
.header_btn_box > ul > li > span {display: block;}
.header_btn, .table_btn {font-weight: bold;}
.header_btn, .table_btn, .btn_close, select, input {height: 2.7rem; background-color: #fff; padding: 0.4rem 0.5rem; border: 0.1rem solid #ddd; margin-right: 0.2rem; vertical-align: middle;}
.header_btn, .table_btn, select {cursor: pointer;}
.input_check {margin-left: 0.8rem;}
.btn_c {background-color: #4766FF; color: #fff; border: 0.1rem solid #4766FF;}
.btn_c02 {background-color: #262e3d; color: #fff; border: 0.1rem solid #262e3d;}
.btn_c03 {color: #1e232e; background-color: #fff; border: 0.1rem solid #1e232e;}
.content_btn.btn_r {display: none;}
#header_toggle {padding: 0.4rem 0.8rem;}
.arrow {transform: rotate(180deg);}

/*header_toggle*/
/* 검색 조건은 늘 펼쳐 둔다. 매번 펼쳐야 검색창이 나오는 게 번거롭다는 요청(2026-08-04).
   접는 기능 자체를 없앴으므로 여는 화살표 버튼도 숨긴다(main.js 의 토글 핸들러도 제거함). */
.header_toggle_box {display: block;}
#header_toggle {display: none;}
.header_toggle_item {margin-top: 1.5rem;}
.header_toggle_item > ul > li {display: inline-block; vertical-align: middle; margin: 0 0.4rem 0.5rem 0;}
.header_toggle_item > ul > li > label {color: #4766FF; font-weight: bold;}

/**/
.top_nav_r {font-size: 1.9rem; margin-left: auto;}
.top_nav_r > ul > li {display: inline-block; cursor: pointer;}
#toggle {cursor: pointer; margin-right: 0.6rem; display: block; background-color: #4766FF; padding: 0.1rem 0.5rem; border-radius: 0.3rem; color: #fff;}

/*top_nav_r-hover_menu*/
.menu_user {position: relative;}
.menu_user > .fa-caret-down {font-size: 1.2rem; margin-left: 0.4rem;}
.menu_hover {display: none; position: absolute; top: 3.8rem; right: 0; background-color: #fff; border: 0.1rem solid #edeef1; font-size: 1.2rem; box-shadow: 0 0 1rem 0 rgb(41 48 66 / 15%);}
.menu_hover > li:first-child {border-bottom: 0.1rem solid #edeef1; padding: 1.3rem 1.5rem;}
.menu_hover > li {padding: 0.5rem 1.5rem; color: #000; white-space: nowrap;}
.menu_hover > li:nth-child(2) {padding-top: 1.3rem;}
.menu_hover > li:last-child {padding-bottom: 1.3rem;}
.menu_hover > .menu_hover_list:hover {color: #4766FF; font-weight: bold}
.top_user_name {font-size: 1.2rem; font-weight: bold; margin-left: 0.4rem; line-height: 4.4rem;}
.user_name {color: #4766FF; font-weight: bold;}
.menu_user:hover > .menu_hover {display: block;}

/*footer*/
.footer {background-color: #5a5d6a; color: #fff; text-align: center; padding: 1.5rem;}

/*scroll_btn*/
.scroll_top_btn, .scroll_bottom_btn {display: none; position: fixed; right: 2rem; cursor: pointer; height: 3.5rem; box-shadow: 0 0 1rem 0 rgb(41 48 66 / 20%);}
.scroll_top_btn {bottom: 6rem;}
.scroll_bottom_btn {bottom: 2rem;}

/*calendar*/
.calendar_wrap .date_c01 {color: #212121; font-weight: 500;}
.calendar_wrap em {font-style: initial;}
.calendar_wrap em.op5 {opacity: 0.5;}
.calendar_wrap em.c_gray {text-decoration: line-through; opacity: 0.5;}
.calendar_wrap em.c_red {color: red; text-decoration: line-through; opacity: 0.5;}

.calendar_wrap .calendar_header {
    width: 100%;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 3rem;
}
.calendar_wrap .calendar_header .calendar_month {position: relative; width: 21rem; float: left;}
.calendar_wrap .calendar_header .btn {
    position: absolute;
    top: 0;
    width: 2.8rem;
    height: 2.8rem;
    background-repeat: no-repeat;
    font-size: 0;
    background-position: center;
    cursor: pointer;
}
.calendar_wrap .calendar_header .date-prev {
    height: 100%;
    left: 0;
    background-color: #fff;
}
.calendar_wrap .calendar_header .date-next {
    height: 100%;
    right: 0;
    background-color: #fff;
}
.calendar_wrap .calendar_header .date-next::before, .calendar_wrap .calendar_header .date-prev::before {content: "\f137"; font-family: "Font Awesome 5 Free"; font-size: 2.6rem; font-weight: 600; color: #4766FF;}
.calendar_wrap .calendar_header .date-next::before {content: "\f138";}
.calendar_wrap .calendar_header .calendar_title {
    display: inline-block;
    text-align: center;
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 600;
}
.calendar_wrap .calendar_header .calendar_status {float: right; margin-top: 1.1rem; font-size: 1.3rem;}
.calendar_status span {margin-left: 0.4rem;}
.calendar_status span::before {content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #424242; margin: 0 0.4rem 0.2rem 0;}
.calendar_wrap .calendar_body .calendar_t {
    margin-top: 2rem;
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0;
    border: 0;
    width: 100%;
}
.calendar_wrap .calendar_body .calendar_t th {
    width: 14%;
    border: 0.1rem solid #d7d8d9;
    height: 3.2rem;
    font-size: 1.4rem;
    background-color: #eff0f6;
    font-weight: 600;
}
.calendar_wrap .calendar_body .calendar_t .c_red {color: #e60012 !important; font-weight: 500 !important;}
.calendar_wrap .calendar_body .calendar_t .c_blue {color: #296ddd; font-weight: 500 !important;}
.calendar_wrap .calendar_body tbody {display: table-row-group; vertical-align: middle; border-color: inherit;}
.calendar_wrap .calendar_body tbody td {
    font-size: 1.6rem;
    vertical-align: top;
    border: 0.1rem solid #d7d8d9;
    background-color: #fff;
}
.calendar_wrap .calendar_body tbody td.off {background-color: #fff7f7; color: #333;}
.calendar_wrap .calendar_body tbody td .num {
    height: 4rem;
    line-height: 3.7rem;
    position: relative;
    background-color: #fff;
    border-bottom: 0.1rem solid #dadada;
    padding: 0 0.8rem;
}
.calendar_wrap .calendar_body tbody td .num.on {color: #282828;}
.calendar_wrap .calendar_body tbody td .num button {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    display: inline-block;
    vertical-align: middle;
    display: inline-block;
    color: #1a1a1a;
    height: 2.8rem;
    line-height: 2.4rem;
    padding: 0 1.2rem;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    border-radius: 0.3rem;
    cursor: pointer;
    background-color: #5AD9A4;
    font-weight: 600;
    font-size: 1.4rem;
}
.calendar_wrap .calendar_body tbody td .reservation_box {
    padding: 1rem;
    position: relative;
    min-height: 9rem;
    vertical-align: middle;
    font-size: 1.4rem;
    color: #e60012;
    letter-spacing: -0.3px;
    line-height: 1.8;
}
.calendar_wrap .calendar_body tbody td .reservation_item {cursor: pointer;}