@charset "UTF-8";
/**************************************
 * ui.css
 * 공통 Frame
 * 플러그인 커스텀 - 사용한 프레임워크의 전체 css가 아닌 필요한 부분만 가져옴.
 * 범용 공통 스타일
 * 개별화면 스타일
 * 2025/11 By "PARK EUN HEE"
/**************************************/

/**************************************
 S: 공통 Frame
/**************************************/
/*** S: 전체 컨테이너  ***/
.wrapper {
    display: flex;
    flex-direction: column;
    min-width: var(--min-width);
    min-height: 100dvh;
}
/*
.wrapper::after {
  content: '1680이상';
  padding: 4px 8px;
  background: red;
  position: fixed;
  right: 10px;
  top: 10px;
  font-weight: 500px;
  border-radius: 4px;
  color: #fff;
  z-index: 1000;
}

@media all and (max-width: 1679px) {
  .wrapper::after {
    content: '1080~1680 미만';
    background: green;
  }
}

@media all and (max-width: 1079px) {
  .wrapper::after {
    content: '800~1080 미만';
    background: blue;
  }
}

@media all and (max-width: 799px) {
  .wrapper::after {
    content: '320 ~ 800 미만';
    background: orange;
  }
}

@media all and (max-width: 359px) {
  .wrapper::after {
    content: '360 미만';
    background: green;
  }
} */

.dim-body {
    overflow: hidden;
}

.dim-body .dim {
    position: fixed;
}

/* 딤을 body가 아닌 특정 영역 에서 호출할 경우  */
.dim-content {
    overflow: hidden !important;
}

.dim-content .dim {
    position: absolute;
    top: 0; /* 스크롤 된 높이만큼 동적으로 변경됨. */
    height: 100%;
}

.dim {
    background: rgba(0, 0, 0, 0.25);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--zIndex-dim);
}

.dim.show {
    opacity: 1;
}

/* 화면 리사이징 시 transition 제거 : 레이아웃이 변경되는 반응형 처리시 의도치 않은 transition 방지  */
.transition-none * {
    transition: none !important;
}

.transition-none *::before,
.transition-none *::after {
    transition: none !important;
}

/*** E: 전체 컨테이너  ***/

/*** S: 헤더 ***/
.header {
    height: var(--headHeight);
    display: flex;
    align-items: center;
    z-index: var(--zIndex-head);
    flex-shrink: 0;
    padding: 0 40px;
    background: #f2f2f2;
}

.header h1 a {
    display: block;
}

.header-extra-area {
    display: flex;
    align-items: center;
    gap: 0 18px;
    padding-right: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.header .store-name {
    font-size: 20px;
    font-weight: 700;
    height: 28px;
}

.header-extra-menu {
    display: flex;
    gap: 18px;
    padding-left: 18px;
    border-left: 1px solid #d0d7dc;
}

.btn-header-icon {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
}

.btn-header-icon.coupon {
    background: url('../images/frames/header_coupon.svg') no-repeat center;
}

.btn-header {
    height: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    background: #272c30;
    border-radius: 11px;
    min-width: 70px;
    text-align: right;
    flex-shrink: 0;
}

.btn-header.ico-mail::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url('../images/frames/ico_mail.svg');
}

@media all and (max-width: 599px) {
    .header {
        padding: 0 20px 0 10px;
    }

    .header h1 a {
        width: 200px;
    }

    .header-extra-area {
        display: none;
    }
}

/* 컨테이너 스타일 (선택) */
.btn-header-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
    margin-left: auto;
}

/* 선 공통 스타일 */
.btn-header-menu .menu-line {
    fill: none;
    stroke: #272c30;
    stroke-width: 4.5;
    stroke-linecap: round;
    transform-origin: center;
    transform-box: fill-box;
}

/* 기본 위치 (햄버거) */
.btn-header-menu .line-top {
    transform: translateY(0) rotate(0);
}
.btn-header-menu .line-mid {
    opacity: 1;
    transform: scaleX(1);
}
.btn-header-menu .line-bottom {
    transform: translateY(0) rotate(0);
}

/* --- 닫힐 때 (반대로 돌아가는) 애니메이션 --- */
.btn-header-menu.close-anim .line-top {
    animation: topLineToBurger 0.45s forwards;
}
.btn-header-menu.close-anim .line-mid {
    animation: midLineFadeIn 0.4s forwards;
}
.btn-header-menu.close-anim .line-bottom {
    animation: bottomLineToBurger 0.45s forwards;
}

/* --- 메뉴 열림(open) 상태 --- */
.btn-header-menu.open .line-top {
    animation: topLineToX 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.btn-header-menu.open .line-mid {
    animation: midLineFadeOut 0.4s ease forwards;
}

.btn-header-menu.open .line-bottom {
    animation: bottomLineToX 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* 위쪽 선: 중앙으로 모였다가 회전 (45°) */
/* line-top: 위로 약간 튀어올라 + 중앙 합류 + 회전 */
@keyframes topLineToX {
    0% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-4px) rotate(0); /* 위로 튀기 */
    }
    60% {
        transform: translateY(10px) rotate(0); /* 중앙보다 약간 더 내려가며 모임 */
    }
    100% {
        transform: translateY(10px) rotate(45deg);
    }
}

/* line-bottom: 아래로 튀었다가 + 중앙 합류 + 회전 */
@keyframes bottomLineToX {
    0% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(4px) rotate(0); /* 아래로 튀기 */
    }
    60% {
        transform: translateY(-10px) rotate(0);
    }
    100% {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* 가운데 선 사라짐 */
@keyframes midLineFadeOut {
    0% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(0.7);
    }
    100% {
        opacity: 0;
        transform: scaleX(0.2);
    }
}

/* ---------------- X → 햄버거 (Bounce 반대 모션) ---------------- */

@keyframes topLineToBurger {
    0% {
        transform: translateY(10px) rotate(45deg);
    }
    40% {
        transform: translateY(12px) rotate(15deg); /* 아래쪽으로 튐 */
    }
    70% {
        transform: translateY(-3px) rotate(0); /* 원래 위치보다 위로 튀기 */
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes bottomLineToBurger {
    0% {
        transform: translateY(-10px) rotate(-45deg);
    }
    40% {
        transform: translateY(-12px) rotate(-15deg); /* 위쪽으로 튐 */
    }
    70% {
        transform: translateY(3px) rotate(0); /* 아래로 튕기 */
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes midLineFadeIn {
    0% {
        opacity: 0;
        transform: scaleX(0.2);
    }
    50% {
        opacity: 1;
        transform: scaleX(0.8);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 부드러운 모션을 위해 벡터 효과 제거(픽셀 보정) */
svg {
    overflow: visible;
}

@media all and (max-width: 1079px) {
    .header {
        position: sticky;
        top: 0;
        padding: 0 20px 0 20px;
    }
    .header-extra-area {
        justify-content: flex-start;
    }

    .btn-header-menu {
        display: block;
    }
}

@media all and (max-width: 799px) {
    .header {
        padding: 0 12px 0 12px;
    }

    .header .store-name {
        display: none;
    }

    .btn-header-menu {
        display: block;
    }
}
/*** E: 헤더 ***/

/*** S: Sidebar ***/
.sidebar {
    width: 80px;
    background: #272c30;
    z-index: var(--zIndex-sidebar);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: 60px 10px 40px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    height: calc(100vh - 120px); /* calc((var(--vh) * 100));*/
    transition: 0.2s;
    align-items: flex-start;
    color: #fff;
}

.sidebar a,
.sidebar button,
.sidebar button::before,
.sidebar button::after,
.sidebar a::before,
.sidebar a::after {
    transition: none;
}

.sidebar a {
    color: inherit;
}

.sidebar.pc-expand {
    width: 280px;
}

.sidebar nav {
    width: 100%;
    flex: 1 1 auto;
}

.sidebar.pc-expand nav {
    overflow: hidden auto; /* 사이드 바가 확장된 경우 툴팁 hidden 됨 */
}

.menu-1depth {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-1depth-item {
    display: flex;
    flex-wrap: Wrap;
    position: relative;
}

.menu-1depth-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 50px;
    position: relative;
}

.menu-1depth-link .menu-img {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-1depth-link .menu-txt {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar.pc-expand:not(.m-show) .menu-1depth-link {
    width: 100%;
}

.sidebar.pc-expand:not(.m-show) .menu-1depth-link .menu-txt {
    width: auto;
}

/* 툴팁 */
.sidebar:not(.pc-expand):not(.m-show) .menu-1depth-link:hover .menu-txt {
    background: #fff;
    position: absolute;
    top: 10px;
    width: auto;
    left: 100%;
    opacity: 1;
    color: #1e1e1e;
    border-radius: 8px;
    padding: 5px 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
}

.sidebar.pc-expand:not(.m-show) .menu-toggle {
    width: 100%;
    height: 50px;
    top: 0;
    position: absolute;
}

.sidebar .menu-toggle {
    display: none; /* 1차 개발에서 1뎁스 제거 */
}

.menu-2depth-item {
    transition: none;
}

.menu-2depth-item a {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.menu-2depth {
    color: #fff;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: 0.4s;
    transition: none;
    display: none; /*  1차 개발에서 2뎁스 제거 */
}

.sidebar.pc-expand .menu-2depth.open {
    height: auto;
}

.menu-2depth-item > a {
    height: 40px;
    padding-left: 64px;
    gap: 10px;
}

.menu-2depth-item > a::before {
    content: '';
    width: 10px;
    height: 10px;
    background: url('../images/frames/ico_menu_leaf.svg') no-repeat center;
}

.btn-logout {
    margin-top: auto;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: url('../images/frames/ico_logout.svg') no-repeat center;
}

.btn-sidebar-expand {
    width: 60px;
    height: 50px;
    background: url('../images/frames/btn_sidebar_expand.svg') no-repeat center;
    margin-bottom: 12px;
}

.btn-sidebar-expand.on {
    width: 60px;
    height: 50px;
    background: url('../images/frames/btn_sidebar_collapse.svg') no-repeat center;
    margin-bottom: 12px;
}

.btn-menu-close {
    display: none;
}

@media all and (max-width: 1079px) {
    .sidebar {
        position: fixed;
        top: -100%;
        left: 20px;
        right: 20px;
        width: auto;
        height: auto;
        padding: 30px 40px 60px;
        transition:
                top 0.4s ease,
                opacity 0.2s ease; /* 사라질때 */
        opacity: 0;
    }

    .sidebar.m-show {
        top: 80px;
        opacity: 1;
        max-height: 90vh;
        padding-right: 20px;
    }

    .sidebar.m-show nav {
        overflow: auto;
        padding-right: 20px;
    }

    .menu-1depth-item {
        flex-wrap: nowrap;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid rgba(208, 215, 220, 0.6);
    }

    .sidebar .menu-toggle {
        display: none;
    }

    /* 1차 개발시 2뎁스 메뉴 디자인 제거*/
    /* .sidebar .menu-1depth-link {
    order: 3;
    margin-left: auto;
  } */

    /* 1차 개발 디자인 적용 */
    .menu-1depth-link,
    .menu-1depth-link .menu-txt {
        width: 100%;
    }

    .menu-1depth-link .menu-txt {
        /* width: auto; 1차 개발 디자인 적용*/
        font-size: 30px;
        font-weight: 300;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .menu-1depth-link .menu-img img {
        width: 32px;
        height: 32px;
    }

    .menu-1depth-link .menu-txt::after {
        content: '';
        width: 32px;
        height: 32px;
        background: url('../images/frames/ico_menu_go.svg') no-repeat center;
        flex-shrink: 0;
        margin-left: auto; /* 1차 개발 디자인 적용*/
    }

    .sidebar .menu-toggle {
        opacity: 1;
        width: auto;
        position: static;
        /* width: 200px; */

        flex-shrink: 0;
        order: 2;
        transition: none;
        flex: 0 0 auto;
        margin-left: auto;
        align-items: center;
        gap: 10px;
    }

    .sidebar .menu-toggle::after {
        content: '';
        width: 32px;
        height: 32px;
        background: url('../images/frames/ico_menu_go.svg') no-repeat center;
    }

    .menu-2depth {
        height: auto;
        padding: 0 7.8947%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 499px;
        transition: none;
        display: none; /* 1차 개발 시 2뎁스 제거*/
    }

    .menu-2depth-item a {
        width: auto;
    }

    .menu-2depth-item {
        width: 145px;
        transition: none;
    }

    .menu-2depth-item > a {
        padding: 0;
        font-size: 16px;
        font-weight: 700;
        transition: none;
    }

    .menu-2depth-item > a::before {
        content: none;
    }

    .btn-logout {
        display: none;
    }

    .btn-sidebar-expand {
        display: none;
    }

    .btn-menu-close {
        background: url('../images/frames/btn_menu_close.svg') no-repeat center;
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
    }

    .btn-menu-close:focus {
        background: url('../images/frames/btn_menu_close.svg') no-repeat center;
        display: block;
        width: 40px;
        height: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
        opacity: 0.8;
    }
}

@media all and (max-width: 799px) {
    .sidebar {
        padding: 10px 16px;
        left: 12px;
        right: 12px;
    }

    .sidebar.m-show nav {
        padding: 0;
    }

    .menu-1depth {
        gap: 0;
    }
    .menu-1depth-item {
        padding: 10px 0;
    }

    .menu-1depth-item:last-child {
        border: 0;
    }
    .menu-1depth-link .menu-txt {
        font-size: 22px;
    }
    .menu-1depth-link .menu-txt::after {
        background-size: 22px;
    }

    .menu-1depth-link .menu-img {
        width: 50px;
    }

    .menu-1depth-link .menu-img img {
        width: 26px;
        height: 26px;
    }
}
/*** E: Sidebar ***/

/*** S: 바디 컨테이너 ***/
.body-container {
    width: 100%;
    display: flex;
    padding: 0 20px 20px;
    gap: 20px;
    position: relative;
    flex: 1 1 auto;
}

/* 본문 .contents-box + .side-box 컨테이너 */
.contents-layout {
    flex: 1 1 auto;
    display: flex;
    gap: 20px;
    width: 100px;
    position: relative;
}

.contents-box {
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    width: 0px;
    flex: 1 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

@keyframes showFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.contents-box > * {
    max-width: 100%;
}

@media all and (max-width: 1679px) {
    .contents-box {
        padding: 40px 30px;
    }
}

@media all and (max-width: 799px) {
    .body-container {
        padding: 0 12px 20px;
    }

    .contents-box {
        padding: 20px 16px 30px;
        flex: 1 0 0;
    }
}

/* 우측 사이드 박스*/
.side-box {
    width: 500px;
    align-self: flex-start;
    padding: 40px 20px;
    background: #fff;
    border-radius: 16px;
}

.side-box .tit {
    color: #272a3d;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

@media all and (max-width: 1480px) {
    .contents-layout {
        flex-direction: column;
    }

    .contents-box {
        width: 100%;
    }

    .side-box {
        width: 100%;
    }
}
/*** E: 바디 컨테이너 ***/

/*** S: Footer ***/
.footer {
    padding: 20px 60px 40px;
    color: #272c30;
}

.footer .footer-links {
    margin-bottom: 40px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.footer .footer-links a {
    position: relative;
}

.footer .footer-links a::before {
    content: '';
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #272c30;
    position: absolute;
    left: -22px;
    top: 50%;
}

.footer .footer-links a:first-child::before {
    content: none;
}

.footer .footer-brand {
    margin-bottom: 10px;
}

.footer .copyright {
}

@media all and (max-width: 599px) {
    .footer .footer-links {
        gap: 8px 20px;
    }
    .footer .footer-links a::before {
        content: none;
    }
}
/*** E: Footer ***/

/*** S: Modal ***/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: none;
}

.modal-box {
    --boxX: -50%;
    --boxY: -50%;
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(var(--boxX), var(--boxY));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    transition: none;
}

.modal .dim {
    z-index: -1;
}

.btn-modal-close {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 32px;
    top: 32px;
    overflow: hidden;
    text-indent: -999px;
    background: url('../images/frames/btn_modal_close.svg') no-repeat center;
}

.modal-header {
    padding: 60px var(--padding-modal-hoz) 0;
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.modal-header h1 {
    font-size: 20px;
    font-weight: 700;
}

.modal-body {
    padding-top: 0;
    padding-left: var(--padding-modal-hoz);
    padding-right: var(--padding-modal-hoz);
    overflow: auto;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding-bottom: 1px; /* 바디 스크롤 버그 제거 */
}

/*** 옵션별 Modal 스타일 ****/
/* .msg 알럿, 컨펌용 */
.modal-box {
    opacity: 0;
    width: 490px; /* 기본 사이즈. 다른 사이즈가 필요할 경우 inline 스타일로 개별 적용. */
    max-width: 90%;
    transform: translate(var(--boxX), var(--boxY)) scale(0.95);
    max-height: 90dvh;
    transition:
            transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
            opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.modal-box.show {
    opacity: 1;
    transform: translate(var(--boxX), var(--boxY)) scale(1);
}

.modal-footer {
    padding-top: 40px;
}

.modal-footer.wrap {
    flex-wrap: wrap;
}

.modal-footer.wrap .txt-desc {
    width: 100%;
    margin-bottom: 20px;
}

/* 반응형 모달의 PC버전 기본 팝업 사이즈 - 사이즈 변경 필요시 .modal-box에 inline 스타일로 변경 */
.modal.m-slide .modal-box,
.modal.m-full .modal-box {
    width: 600px;
}

.modal-body > * {
    flex-shrink: 0;
}

.modal-footer {
    display: flex;
    gap: 8px;
    padding: 30px 42px var(--padding-modal-ver);
    justify-content: center;
}

.modal-footer .btn {
    background-color: #697375;
    border-color: #697375;
    height: var(--component-lg-height);
    width: 200px;
    flex: 0 1 auto;
    font-weight: 700;
}

/* 모달 박스 영역유무 케이스별 스타일 */
.btn-modal-close + .modal-body {
    /* 타이틀 없는 경우 */
    padding-top: 60px;
}
.modal-body:first-child {
    /* 타이틀 없고 close 버튼도 없는 경우 */
    margin-top: var(--padding-modal-ver);
}

.modal-body:last-child {
    /* 푸터 없을 경우  */
    padding-bottom: 0;
    margin-bottom: var(--padding-modal-ver);
}

/* 메시지 텍스트 */
.modal-msg-tit {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--marginVer);
    text-align: center;
}

.modal-msg-desc {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.modal-msg-desc + .tbl-data,
.modal-msg-desc + .list-info,
.modal-msg-desc + .form,
.form + .list-info {
    margin-top: var(--marginVer);
}

/* 반응형 모달 */
@media all and (max-width: 799px) {
    .modal-header {
        padding: 30px 16px 0;
        margin-bottom: 20px;
    }

    .modal-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal.m-slide .modal-box {
        opacity: 1;
        width: 100% !important;
        max-width: var(--max-width);
        min-width: var(--min-width);
        top: auto;
        left: 0;
        bottom: -100%;
        transform: none;
        border-radius: 24px 24px 0 0;
        transition: bottom 0.3s ease-in; /*사라질 때*/
    }

    .modal.m-slide .modal-box.show {
        bottom: 0;
        transition: bottom 0.3s ease-out; /*나올 때*/
    }

    .modal.m-slide .modal-footer {
        padding: 20px 16px;
    }

    .modal.m-slide .modal-footer .btn {
        height: var(--component-lg-height);
        font-size: 16px;
    }

    .modal.m-full .modal-box {
        top: 0;
        left: 50%;
        width: 100%;
        max-width: var(--max-width);
        bottom: 0;
        opacity: 0;
        transform: translateX(-50%);
        transition: opacity 0.3s;
        border-radius: 0;
        max-height: 100%;
    }

    .modal.m-full .modal-box.show {
        opacity: 1;
    }

    .modal.m-full .modal-header {
        height: var(--headHeight);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px var(--padding-modal-hoz);
        margin-bottom: 0;
    }

    .modal.m-full .modal-header h1 {
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 1;
    }

    .btn-modal-close {
        right: 20px;
        top: 20px;
    }
}
/*** E: Modal ***/

/**************************************
 E: 공통 Frame
/**************************************/

/**************************************
 S: 플러그인 스타일 커스텀
/**************************************/
/*** S: Select Custom ***/
.select {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    height: var(--component-md-height);
    /* position: relative; relative를 넣을 경우, 모달에서 드롭 박스가 스크롤 영역에 가려 지므로 제거 */
}

.ui-selectmenu-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    white-space: nowrap;
}

.ui-selectmenu-button.ui-button {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--component-border-default);
    border-radius: var(--radius-md);
    background-color: var(--component-bg);
    transition: border 0.2s;
    height: 100%;
    width: 100%;
    font-size: 14px;
    padding: 0 0 0 16px;
    display: flex;
    align-items: center;
}

.ui-selectmenu-button.ui-selectmenu-disabled {
    background: var(--bg-disabled);
    color: var(--fc-placeholder);
    cursor: default;
}

.select.trans .ui-selectmenu-button.ui-button {
    border: 0 none;
    padding-left: 20px;
    box-shadow: none;
}

.ui-selectmenu-button.ui-button.ui-selectmenu-button-open {
    border: 1px solid var(--color-primary);
    box-shadow: var(--component-shadow);
}

.ui-selectmenu-icon.ui-icon {
    background: url('../images/icon/ico_select_drop.svg') no-repeat left center;
    order: 4;
    width: 30px;
    height: var(--component-md-height);
    flex-shrink: 0;
}

.ui-selectmenu-button.ui-selectmenu-disabled .ui-selectmenu-icon.ui-icon {
    opacity: 0.2;
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: #fff;
    border: 1px solid var(--component-border-default);
    border-radius: var(--radius-md);
    z-index: 3000 !important;
}
.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
    padding: 8px 0;
    max-height: 458px;
}

@media all and (max-width: 600px), (max-height: 768px) {
    .ui-selectmenu-menu .ui-menu {
        max-height: 206px;
    }
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-weight: 700;
    padding: 2px 5px;
    margin: 5px 0 0 0;
    height: auto;
    border: 0;
}
.ui-selectmenu-open {
    display: block;
}

.ui-menu-item .ui-menu-item-wrapper {
    display: flex;
    align-items: center;
    padding: 2px 16px;
    cursor: pointer;
    min-height: 32px;
}

.ui-menu-item .ui-state-active {
    background: var(--color-primary);
    color: #fff;
}

.ui-state-disabled.ui-menu-item .ui-menu-item-wrapper {
    color: var(--fc-gray);
    cursor: default;
}
/*** E: Select Custom ***/

/*** S: DatePicker ***/
.ui-datepicker {
    width: 376px;
    padding: 36px 30px 24px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    display: none;
    margin-top: 3px;
    z-index: 3000 !important;
}

@media all and (max-width: 599px) {
    .ui-datepicker {
        left: 50% !important;
        transform: translatex(-50%);
    }
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    background: transparent;
    font-size: 24px;
    font-weight: 700;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 30px;
    width: 260px;
    justify-content: space-between;
    margin: 0 auto 20px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev.ui-state-hover {
    background: url('../images/icon/btn_prev.svg') no-repeat center;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
    background: url('../images/icon/btn_next.svg') no-repeat center;
    order: 3;
}

.ui-datepicker .ui-state-default {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    background: transparent;
    border: 0;
    font-weight: 500;
    transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
    color: inherit;
}

.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
    padding: 4px;
    font-weight: 500;
}

.ui-datepicker .ui-state-hover {
    background: #eceff1;
}

.ui-datepicker .ui-state-active {
    color: #fff;
    background: var(--color-primary);
}

.ui-datepicker-select-month > table,
.ui-datepicker-select-year > table {
    width: 282px;
    margin: 0 auto;
}
.ui-datepicker-select-month .ui-state-default,
.ui-datepicker-select-year .ui-state-default {
    width: 63px;
    height: 63px;
    border-radius: 8px;
    border: 1px solid #d0d7dc;
}

.ui-datepicker-select-month td,
.ui-datepicker-select-year td {
    padding: 4px;
}

.ui-datepicker-select-month .ui-state-hover,
.ui-datepicker-select-year .ui-state-hover {
    border-color: #eceff1;
}

.ui-datepicker-week-end:first-child {
    color: #fa5e4c;
}
/*** E: DatePicker ***/
/**************************************
 S: 플러그인 스타일 커스텀
/**************************************/

/**************************************
 S: 범용 공통 스타일
/**************************************/

/*** S: 공통 유틸리티 클래스 ***/
/*정렬클래스*/
.al {
    text-align: left !important;
}

.ar {
    text-align: right !important;
}

.ac {
    text-align: center !important;
}

/* font color */
.fc-default {
    color: var(--fc-default) !important;
}

.fc-red {
    color: var(--color-red) !important;
}

.fc-blue {
    color: var(--color-blue) !important;
}

.fc-gray {
    color: var(--fc-gray) !important;
}

.fc-primary {
    color: var(--color-primary) !important;
}
.fc-disabled {
    color: var(--fc-disabled) !important;
}

/* font weight */
.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* font size */
.fs-default {
    font-size: 14px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-16 {
    font-size: 16px !important;
}

/*마진,패딩 클래스*/
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-r {
    margin-right: 0 !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-16 {
    margin-bottom: 16px !important; /* row간 간격  */
}

.ml-20 {
    margin-left: 20px !important;
}

.mr-4 {
    margin-right: 4px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.pt-0 {
    padding-top: 0px !important;
}

.block {
    width: 100% !important;
    display: flex !important;
}

.stroke {
    text-decoration: line-through;
}

/*** E: 공통 유틸리티 클래스 ***/

/*** S: button, a, 버튼 컨테이너 ***/
/* button, a  */
.btn {
    background-color: var(--color-darkGray);
    color: #fff;
    border: 1px solid var(--color-darkGray);
    border-radius: var(--radius-md);
    font-size: 14px;
    height: var(--component-md-height);
    padding: 6px 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.btn:active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn::after,
.btn::before {
    background-position: center;
    background-repeat: no-repeat;
}

.btn.primary {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn.primary:active {
    background-color: #1c7e61;
    border-color: #1c7e61;
}

.btn.solid {
    border: 1px solid #6c7883;
    color: #6c7883;
    background: #fff;
}

.btn.solid:active {
    background: var(--color-primary-fill);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn.solid.primary {
    background-color: var(--color-primary-fill);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn.solid.primary:active {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn:disabled,
.btn.disabled {
    background-color: var(--bg-disabled) !important;
    color: #adb9c2 !important;
    border-color: var(--bg-disabled) !important;
}

.btn.round {
    border-radius: 40px;
}

.btn.md {
    height: var(--component-md-height) !important;
    font-size: 14px !important;
}

.btn.lg {
    height: var(--component-lg-height);
}

/* 페이징 더보기 버튼  */
.btn.solid.btn-more {
    color: var(--color-darkGray);
}

/* 텍스트형 링크 - 다운로드 */
.btn-txt {
    background: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.btn-txt + .btn-txt {
    padding-left: 10px;
    margin-left: 10px;
}

.btn-txt + .btn-txt::before {
    content: '';
    width: 1px;
    height: 10px;
    background: #4f4f4f;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 휴지통 삭제 버튼 */
.btn-delete {
    width: 30px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
    display: inline-block;
    background: url('../images/icon/btn_delete.svg') no-repeat center;
    background-size: 20px;
    flex-shrink: 0;
}

/* 화살표 아이콘 위/아래 토글 버튼 */
.btn-txt-expand {
    position: relative;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.btn-txt-expand::after {
    content: '';
    width: 12px;
    height: 12px;
    mask: url('../images/icon/btn_txt_expand.svg') no-repeat center;
    -webkit-mask: url('../images/icon/btn_txt_expand.svg') no-repeat center;
    background: var(--color-primary);
    margin-top: -1px;
}

.btn-txt-expand.selected::after {
    transform: rotate(-180deg);
}

/* 인풋 클리어 버튼 */
.btn-file-del {
    width: 20px;
    height: 20px;
    overflow: hidden;
    font-size: 0;
    background: url('../images/icon/btn_file_del.svg') no-repeat center;
    border: 0;
    flex-shrink: 0;
}

.btn-file-del:disabled {
    opacity: 0.3;
}

/* 그리드 sort 버튼 */
.btn-sort {
    width: 14px;
    height: 14px;
    overflow: hidden;
    text-indent: -999px;
    background: url('../images/icon/tbl_sort.svg') no-repeat center;
    margin-left: 6px;
}

.btn-sort.up {
    transform: rotate(-180deg);
}

/* .btn-area - 화면 하단 submit 등 주요 버튼 컨테이너 */
.btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.btn-area .btn {
    height: var(--component-lg-height);
    max-width: 100%;
    font-weight: 700;
}

.btn-area .btn:not(.primary):not(.solid) {
    background: #6c7883;
    border-color: #6c7883;
    color: #fff;
}

.btn-area .btn:not(.primary):not(.solid):active {
    background-color: var(--color-darkGray);
    border-color: var(--color-darkGray);
}

.side-box .btn-area .btn {
    min-width: 200px;
}

.contents-box .btn-area .btn {
    font-size: 16px;
    flex: 1 1 0;
    max-width: 324px;
}

.btn-area + .btn-area,
.btn-area + .paging-list,
.inline-group + .btn-area,
.btn-area + .list-info {
    margin-top: var(--marginVer);
}
/*** E: button, a, 버튼 컨테이너 ***/

/*** S: Input, Select ***/
.input,
.textarea {
    background-color: var(--component-bg);
    border: 1px solid var(--component-border-default);
    border-radius: var(--radius-md);
    color: #1e1e1e;
    height: var(--component-md-height);
    padding: 6px 16px;
    font-family: var(--font-family);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s;
    font-weight: 500;
}

.input {
    width: 300px;
    max-width: 100%;
}

.input.datepicker {
    width: 160px;
    padding-right: 30px;
    background: url('../images/icon/component_calendar.svg') no-repeat right 10px center;
    background-color: #fff !important;
    color: var(--fc-default) !important;
}

.input.datepicker:not([readonly]):not(:disabled) {
    cursor: pointer;
}

.input:focus,
.textarea:focus {
    border: 1px solid var(--color-primary);
    box-shadow: var(--component-shadow);
}

.input:disabled,
.input[readonly],
.textarea:disabled,
.textarea[readonly] {
    background-color: var(--bg-disabled);
    border: 1px solid var(--component-border-default);
    color: var(--fc-placeholder);
}

/* .input, .select */
.input.primary,
.select.primary {
    background-color: var(--color-primary);
    color: #fff;
}

.input.error,
.select.error,
.select.error + .ui-selectmenu-button.ui-button,
.textarea.error {
    border-color: #ff9d88;
    box-shadow: 0 0 0 3px rgba(255, 217, 208, 0.5);
}

/* 라인이 없는 input */
.input.input-trans:not(.datepicker) {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--fc-default);
    box-shadow: none;
}

/* textarea */
.textarea {
    height: 200px;
    padding-top: 12px;
}

.txtarea-group {
    position: relative;
}

.txtarea-group .txt-length {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.txt-length {
    text-align: right;
    color: #adb5bd;
    font-size: 10px;
}

/* 파일 선택 필드 */
.file-dialog {
    display: flex;
    gap: 10px;
    position: relative;
}

.file-dialog > .input {
    flex: 1 1 auto;
}

.file-dialog .input-clear {
    flex: 1 1 auto;
}

/* input + 삭제버튼 그룹*/
.input-clear {
    position: relative;
}

.input-clear .input {
    width: 100%;
    padding-right: 30px;
}

.input-clear .btn-file-del {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

/* 비밀번호 + 보기 버튼 그룹 */
.input-password {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.input-password .input {
    width: 100%;
    padding-right: 30px;
    transition: border 0.2s;
}

.input-password .input[type='password'] {
    color: var(--fc-gray);
}

.input-password .btn-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url('../images/icon/pw_eye_close.svg');
    overflow: hidden;
    text-indent: -999px;
}

.input-password .btn-eye.on {
    background: url('../images/icon/pw_eye.svg');
}

/* input + 검색 아이콘 버튼 그룹 */
.input-search {
    position: relative;
    width: 300px;
}

.input-search .input {
    width: 100%;
    padding-right: 30px;
    transition: border 0.2s;
}

@media all and (max-width: 799px) {
    .extra-area .input-search {
        flex: 1 1 auto;
        width: 200px;
    }
}

@media all and (max-width: 499px) {
    .extra-area .input-search {
        width: 100%;
    }
}

/* 돋보기 모양 버튼 */
.btn-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url('../images/icon/ico_search.svg');
    overflow: hidden;
    text-indent: -999px;
}

/*** E: Input, Select ***/

/*** S: Radio, Checkbox ***/
/* 기본 형 */
.checkbox,
.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--radio-size);
    width: auto;
    vertical-align: middle;
}

.checkbox input[type='checkbox'],
.radio input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
}

.checkbox label,
.radio label {
    transition: 0.1s;
    order: -1;
    display: flex;
    gap: var(--gap-sm);
}

.checkbox label::before,
.radio label::before {
    content: '';
    width: var(--radio-size);
    height: var(--radio-size);
    display: block;
    transition: 0.2s all;
}

.checkbox label::before {
    border-radius: 4px;
    background: #e9e9e9 url('../images/icon/ico_checkbox.svg') no-repeat center;
}

.radio label::before {
    border: 7px solid #e9e9e9;
    border-radius: 50%;
}

.checkbox input[type='checkbox']:checked ~ label::before {
    background: var(--color-primary) url('../images/icon/ico_checkbox.svg') no-repeat center;
}

.radio input[type='radio']:checked ~ label::before {
    border: 7px solid var(--color-primary);
}

.checkbox-group,
.radio-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.checkbox-group.block,
.radio-group.block {
    flex-direction: column;
}

/* 버튼형 */
.radio-btn,
.checkbox-btn {
    position: relative;
    white-space: nowrap;
    height: var(--component-md-height);
}

.radio-btn input[type='radio'],
.checkbox-btn input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.radio-btn input[type='radio'] ~ label,
.checkbox-btn input[type='checkbox'] ~ label {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    border-radius: 20px;
    border-radius: var(--radius-md);
    position: relative;
    transition: 0.1s;
    width: 100%;
    cursor: pointer;
}

.radio-btn input[type='radio'] ~ label {
    background: #fff;
    border: 1px solid #adb9c2;
    color: #6c7883;
}

.radio-btn input[type='radio']:checked ~ label {
    background: var(--color-primary-fill);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.radio-btn input[type='radio']:not(:checked):not(:disabled):hover ~ label {
    border-color: #101214;
    color: #272c30;
    z-index: 1;
}

.checkbox-btn input[type='checkbox'] ~ label {
    background: var(--color-primary-fill);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    z-index: 2;
}

.checkbox-btn input[type='checkbox']:checked ~ label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    z-index: 2;
}

.radio-btn input[type='radio']:hover ~ label i.ico,
.checkbox-btn input[type='checkbox']:hover ~ label i.ico {
    background: #272c30;
}

.radio-btn input[type='radio']:checked ~ label i.ico,
.checkbox-btn input[type='checkbox']:checked ~ label i.ico {
    background: var(--color-primary);
}

.radio-btn input[type='radio']:disabled ~ label,
.checkbox-btn input[type='checkbox']:disabled ~ label {
    background: var(--bg-disabled);
    border-color: var(--bg-disabled);
    color: var(--fc-disabled);
    cursor: default;
}

.radio-btn input[type='radio']:disabled ~ label i.ico,
.checkbox-btn input[type='checkbox']:disabled ~ label i.ico {
    background: var(--fc-disabled);
}

.checkbox-btn.all {
    height: var(--component-lg-height);
    font-weight: 700;
}

.checkbox-btn.all input[type='checkbox'] ~ label {
    background: #fff;
    border: 1px solid #adb9c2;
    color: #6c7883;

    width: 100%;
    gap: 10px;
}

.checkbox-btn.all input[type='checkbox'] ~ label::before {
    content: '';
    width: 20px;
    height: 20px;
    background: #d0d7dc url(../images/icon/ico_checkbox.svg) no-repeat center 3px;
    border-radius: 50%;
    transition: 0.2s;
}

.checkbox-btn.all input[type='checkbox']:checked ~ label::before {
    background-color: var(--color-primary);
}

.checkbox-btn.all input[type='checkbox']:checked ~ label {
    background: var(--color-primary-fill);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-col-group .checkbox-btn.all {
    grid-column: 1 / -1;
    margin-top: 20px;
}

/* 라디오 인라인 버튼 그룹 */
.btn-inline-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 8px;
}

/* 라디오/체크박스 버튼 컬럼 그룹 - 2 ~ 6열까지 체크, 라디오 버튼 배치 그룹  */
.btn-col-group {
    display: grid;
    gap: 10px;
    width: 100%;
    font-weight: 700;
}

.btn-col-group.col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.btn-col-group.col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.btn-col-group.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.btn-col-group.col-5 {
    grid-template-columns: repeat(5, 1fr);
}
.btn-col-group.col-6 {
    grid-template-columns: repeat(6, 1fr);
}

.btn-col-group + .btn-checkbox {
    margin-top: 40px;
}

.btn-col-group.lg button {
    height: var(--component-lg-height);
}

.btn-col-group.lg .radio-btn,
.btn-col-group.lg .checkbox-btn {
    height: var(--component-lg-height);
}

@media all and (max-width: 799px) {
    .btn-col-group.col-3,
    .btn-col-group.col-4,
    .btn-col-group.col-5,
    .btn-col-group.col-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (max-width: 499px) {
    .btn-col-group.col-3,
    .btn-col-group.col-4,
    .btn-col-group.col-5,
    .btn-col-group.col-6 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* 시간변경 버튼 배치 커스텀 */
.btn-col-group.time-change {
    display: flex;
    flex-wrap: wrap;
    height: 290px;
    flex-direction: column;
}

.btn-col-group.time-change .radio-btn {
    width: calc(50% - 5px);
}

/* switch */
.switch {
    /* background: green; */
    height: 30px;
    color: #b0b9c2;
    padding: 2px;
    border-radius: 18px;
    overflow: hidden;
    width: 48px;
    position: relative;
    text-indent: -999px;
    font-size: 0;
    display: inline-block;
}

.switch input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: #eceff1;
    transition: 0.2s;
}

.switch input:not(:disabled) {
    cursor: pointer;
}

.switch .switch-icon {
    pointer-events: none;
    width: 26px;
    height: 26px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transition: 0.2s;
}

.switch input:checked {
    background: var(--color-primary);
}

.switch input:checked ~ .switch-icon {
    left: 20px;
}

/* 버튼 형 체크박스: 동의/미동의 */
.btn-checkbox {
    overflow: hidden;
    border: 0;
    height: var(--component-md-height);
    position: relative;
    display: inline-block;
}

.btn-checkbox.lg {
    height: var(--component-lg-height);
}

.btn-checkbox input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    background: transparent;
    cursor: pointer;
}

.btn-checkbox .btn-check {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-darkGray);
    gap: 2px;
    color: #fff;
    border: 1px solid var(--color-darkGray);
    border-radius: var(--radius-md);
    transition: 0.2s;
    padding: 6px 20px 6px 16px;
    font-weight: 500;
}

.btn-checkbox .btn-check::before {
    content: '';
    width: 20px;
    height: 20px;
    mask: url('../images/icon/ico_checkbox.svg') no-repeat center;
    -webkit-mask: url('../images/icon/ico_checkbox.svg') no-repeat center;
    transition: 0.2s;
    mask-size: contain;
    -webkit-mask-size: contain;
    background: #fff;
}

.btn-checkbox input:disabled {
    cursor: default;
}

.btn-checkbox input:checked ~ .btn-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-checkbox input:checked ~ .btn-check::before {
    background: #fff;
}

.btn-checkbox input:disabled ~ .btn-check {
    background-color: var(--bg-disabled) !important;
    color: #adb9c2 !important;
    cursor: default;
    border-color: var(--bg-disabled) !important;
}

.btn-checkbox input:disabled ~ .btn-check::before {
    background: #adb9c2;
}

/*** E: Radio, Checkbox ***/

/*** S: Progress ***/
.progress {
    background: #e7e9ea;
    height: 8px;
    position: relative;
    border-radius: 4px;
}

.progress-bar {
    background: var(--color-primary);
    height: 8px;
    border-radius: 4px;
}
/*** E: Progress ***/

/*** S: Tabs ***/
/* 탭 공통 */
.tab-main,
.tab-sub {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    /* min-height: 40px; */
    position: relative;
}

/* 메인 탭 */
.tab-main {
    gap: 10px 40px;
}

.tab-main a {
    padding: 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--fc-gray-light);
    height: 36px;
    display: flex;
    position: relative;
}

.tab-main a.active {
    color: var(--color-primary);
}

.tab-main a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    background: transparent;
    left: 50%;
    transform: translateX(-50%);
}

.tab-main a.active::after {
    width: 100%;
    background: var(--color-primary);
}

/* 서브 탭 */
.tab-sub {
    gap: 6px 40px;
}

.tab-main + .tab-sub {
    margin-top: -14px;
}

.tab-sub li {
    position: relative;
    font-weight: 500;
}

.tab-sub li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -20px;
    width: 1px;
    height: 12px;
    background: #ccc;
    top: 50%;
    transform: translateY(-50%);
}

.tab-sub a {
    font-size: 14px;
    font-weight: 500;
    color: var(--fc-gray);
    height: 36px;
    line-height: normal;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 20px;
    border-radius: 18px;
    border: 1px solid #adb9c2;
}

.tab-sub a.active {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateZ(0); /* 특정 브라우저 텍스트 양쪽 이격 생기는 것 방지 */
}

.tit-area .tab-sub {
    margin-bottom: 0;
    width: auto;
}

@media all and (max-width: 1679px) {
    .tab-main {
        gap: 10px 20px;
    }
}

@media all and (max-width: 1079px) {
    .tab-sub {
        gap: 6px 10px;
    }
    .tab-sub li:not(:first-child)::before {
        content: none;
    }
}

@media all and (max-width: 799px) {
    .tab-main a {
        font-size: 22px;
        height: 28px;
    }
}
/*** E: Tabs ***/

/*** S: Layer Menu ***/
.layer-menu {
    background: #fff;
    border: 1px solid #d0d7dc;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    position: absolute;
    padding: 12px 14px;
    display: none;
}

.layer-menu.show {
    display: block;
}

.layer-menu .menu-link {
    display: flex;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 500;
    gap: 2px;
    align-items: center;
    padding-right: 10px;
    width: 100%;
}

.layer-menu .menu-link:disabled {
    opacity: 0.5;
}

.layer-menu .menu-link:disabled::before {
    opacity: 0.7;
}

.layer-menu .menu-link::before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
}

.layer-menu .ico-info::before {
    background-image: url('../images/icon/ico_layer_info.svg');
}

.layer-menu .ico-confirm::before {
    background-image: url('../images/icon/ico_layer_confirm.svg');
}

.layer-menu .ico-card::before {
    background-image: url('../images/icon/ico_layer_card.svg');
}

.layer-menu .ico-setting::before {
    background-image: url('../images/icon/ico_layer_setting.svg');
}

.layer-menu .ico-user::before {
    background-image: url('../images/icon/ico_layer_user.svg');
}

.layer-menu .ico-move::before {
    background-image: url('../images/icon/ico_layer_move.svg');
}

.layer-menu .ico-active::before {
    background-image: url('../images/icon/ico_layer_active.svg');
}

.layer-menu .ico-deactive::before {
    background-image: url('../images/icon/ico_layer_deactive.svg');
}

.layer-menu .ico-delete::before {
    background-image: url('../images/icon/ico_layer_delete.svg');
}

.layer-menu .ico-manage::before {
    background-image: url('../images/icon/ico_layer_manage.svg');
}

.layer-menu li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

/* 카드 레이아웃 레이어 메뉴 더보기 버튼 */
.btn-menu-toggle {
    width: 26px;
    height: 26px;
    background: url('../images/icon/btn_more.svg') no-repeat center;
}

.btn-menu-toggle:active {
    background-: red;
}
/*** E: Layer Menu ***/

/*** S: hr ***/
hr.line {
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    max-width: var(--max-width);
    margin-top: var(--marginVer);
    margin-bottom: var(--marginVer);
    width: 100%;
}
/*** E: hr ***/

/*** S: Typography ***/
/* 범용 안내문구  */
.txt-desc {
    font-weight: 500;
}

.txt-desc.warning {
    color: var(--color-red);
}

.txt-desc.primary {
    color: --color-primary;
}

.txt-desc.gray {
    color: #828282;
}

.txt-desc + .form {
    margin-top: var(--marginVer);
}

.txt-desc + .btn-col-group {
    margin-top: 24px;
}

/* table의 th 와 같은 레벨의 label 이 필요 할 경우 사용 (예: 너비를 100% 차지하는 textarea의 상단 타이틀) */
.form-tit {
    font-weight: 500;
    margin-bottom: 10px;
}

/* 필수 입력 불릿 */
.txt-req {
    width: 8px;
    height: 8px;
    text-indent: -999px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    transform: translateY(-7px);
}

.txt-req::after {
    content: '*';
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    color: var(--color-red);
    text-indent: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

/* 태그, 뱃지 */
.tag {
    display: inline-flex;
    height: 20px;
    font-size: 12px;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    line-height: normal;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 8px;
}

/* 기본 색상 - 검정색 */
.tag.solid {
    border: 1px solid var(--color-darkGray);
    color: var(--color-darkGray);
    font-weight: 700;
}

.tag.primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.tag.solid.primary {
    border-color: var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}

.tag.primary-fill {
    background: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-primary);
}

.tag.primary-fill.solid {
    border-color: var(--color-primary);
}

.tag.red {
    background: #fa5e4c;
    color: #fff;
    border-color: #fa5e4c;
}

.tag.gray {
    background: #eceff1;
    color: #6c7883;
}

.tag.blue {
    background: #2793ff;
    color: #fff;
    border-color: #2793ff;
}

.tag.pink {
    background: #ffd9d0;
    border-color: #ffd9d0;
}

.tag.black {
    background: #272c30;
    border-color: #272c30;
    color: #fff;
}

.tag.lg {
    font-size: 12px;
    height: 24px;
}

.tag.round {
    border-radius: 14px;
    padding: 0 10px;
}

/* 개별 클래스 있는 태그 */
[class^='tag-'] {
    display: inline-flex;
    height: 20px;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 4px;
    line-height: normal;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 8px;
}

.tag-machine {
    background: #eceff1;
    color: #6c7883;
}

.tag-nick {
    background: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-primary);
    margin-right: 4px;
}

.tag-am {
    background: #ffd9d0;
    border-color: #ffd9d0;
}
.tag-pm {
    background: #d3f1df;
    border-color: #d3f1df;
}

.tag-user {
    color: #272c30;
    height: 26px;
    gap: 2px;
}

.tag-user:not(.primary) {
    padding: 0;
}

.tag-user::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #87929c;
    mask: url('../images/icon/tag_user.svg') no-repeat center;
    -webkit-mask: url('../images/icon/tag_user.svg') no-repeat center;
    margin-right: 2px;
    flex-shrink: 0;
    mask-size: contain; /* 아이콘 비율 유지 */
    -webkit-mask-size: contain;
}

.tag-user b {
    font-size: 13px;
}

.tag-user.primary {
    background: #36404a;
    border: 1px solid #36404a;
    color: #fff;
    padding: 0 8px;
    border-radius: 4px;
}

.tag-user.primary::before {
    background: #fff;
}

/* 시작, 종료 시간 태그 */
.time-group {
    font-weight: 700;
    display: inline-flex;
    gap: 8px 20px;
    align-items: center;
    white-space: nowrap;
    flex-wrap: wrap;
    line-height: 1;
    color: #272c30;
    position: relative;
    font-size: 14px;
}

.time-group span {
    margin-right: 4px;
    display: inline-flex;
    height: 20px;
    font-size: 12px;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    line-height: normal;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 8px;
}

.start-time span {
    border: 1px solid var(--color-primary);
    background: #f4fcf7;
    color: var(--color-primary);
}

.end-time span {
    background: var(--color-primary);
    color: #fff;
}

.peak-time span {
    background: var(--color-red);
    color: #fff;
}

.off-peak-time span {
    background: #adb9c2;
    color: #fff;
}

.time-group.line > div:not(:last-child) {
    padding-right: 20px;
    position: relative;
}

.time-group.line > div:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background: #272c30;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media all and (max-width: 799px) {
    .time-group.line > div:not(:last-child) {
        padding-right: 0;
    }

    .time-group.line > div:not(:last-child)::after {
        content: none;
    }
}

/* 예약일자 */
.time-group.booking .start-time span {
    color: #6c7883;
    border-color: #6c7883;
    background: #fff;
}

.time-group.booking .end-time span {
    background: #6c7883;
}

.time-group.block {
    justify-content: flex-start;
}

.tbl-list .time-group {
    justify-content: center;
}

.tbl-list .time-group + span,
.tbl-list .time-group + b {
    margin-top: 4px;
    display: block;
}

/* input 힌트, 에러 메시지 - 인풋의 값이 유효하거나, 유효하지 않을 경우 사용하는 클래스 */
.input-msg {
    color: var(--color-primary);
    font-size: 12px;
}

.input-msg:not(:empty) {
    margin-top: 8px;
}

.input-msg.error {
    color: var(--color-red);
}

/*** E: Typography ***/

/*** S: Table ***/
/* 팝업용 입/출력 테이블. 또는 .tbl-data-line(페이지 전용 입/출력 테이블) 내부의 서브 테이블로 사용 가능 */
.tbl-data {
}

.tbl-data:not(:last-child) {
    margin-bottom: var(--marginVer);
}

.tbl-data tbody th,
.tbl-data tbody td {
    text-align: left;
    padding: 0 0 20px;
}

.tbl-data tbody th {
    font-weight: 500;
    vertical-align: top;
}

.tbl-data tbody td {
    font-weight: 500;
}

.tbl-data > tbody > tr:last-child > th,
.tbl-data > tbody > tr:last-child > td {
    padding-bottom: 0;
}

/* 테이블 내 일반 인풋 컴포넌트와 v-align 배치를 맞추기 위해 padding-top 10*/
.tbl-data .checkbox,
.tbl-data .radio {
}

.tbl-data .checkbox-group,
.tbl-data .radio-group {
    gap: 8px 20px;
    min-height: 40px;
}

.tbl-data .checkbox-group.block,
.tbl-data .radio-group.block {
    /* padding-top: 10px; */
}

.tbl-data .inline-group .checkbox,
.tbl-data .inline-group .radio {
    /* padding-top: 0; */
}

.tbl-data td > .tag-user {
    margin-top: 7px;
    margin-bottom: 7px;
}

.tbl-data td > .time-group:first-child,
.tbl-data td > .inline-group:first-child,
.tbl-data td > .txt-output {
    min-height: 40px;
}

.tbl-data td > .input,
.tbl-data td > .select {
    width: 100%;
}

/* tbl-data  테이블 내 데이터 출력 요소 */
.tbl-data .txt-output {
    padding-top: 10px;
}

/* tbl-data, tbl-data-line 의 th 내부에 사용 */
.txt-label {
    display: inline-flex;
    align-items: center;
}

tbody > tr > th .txt-label {
    min-height: 40px;
}

@media all and (max-width: 799px) {
    .tbl-data:not(.tbl-output),
    .tbl-data:not(.tbl-output) > thead,
    .tbl-data:not(.tbl-output) > tbody {
        display: block;
    }
    .tbl-data:not(.tbl-output) > thead > tr,
    .tbl-data:not(.tbl-output) > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tbl-data:not(.tbl-output) > tbody > tr > th {
        display: block;
        border-bottom: 0;
        padding-bottom: 0;
    }
    .tbl-data:not(.tbl-output) > tbody > tr > th br {
        display: none;
    }
    .tbl-data:not(.tbl-output) > tbody > tr > td {
        display: block;
    }
}

/* 팝업 전용 테이블의 출력 전용 - Row의 패딩이 좁음 */
.tbl-data.tbl-output tbody th,
.tbl-data.tbl-output tbody td {
    padding-bottom: 10px;
}

.tbl-data-line .tbl-data tbody th,
.tbl-data-line .tbl-data tbody td {
    padding-bottom: 16px;
}

/* 페이지용 입/출력 테이블. 또는 팝업에서도 thead가 필요한 경우 예외적으로 사용 가능  */
.tbl-data-line {
    border-top: 2px solid var(--color-primary);
}

.tbl-data-line:not(:last-child) {
    margin-bottom: var(--marginVer);
}

.tbl-data-line > thead > tr > th,
.tbl-data-line > thead > tr > td,
.tbl-data-line > tbody > tr > th,
.tbl-data-line > tbody > tr > td {
    padding: 12px 0;
    vertical-align: middle;
    border-bottom: 1px solid #d0d7dc;
    text-align: left;
}
.tbl-data-line > thead > tr > th,
.tbl-data-line > thead > tr > td {
    height: 54px;
}

@media all and (min-width: 800px) {
    .tbl-data-line > tbody > tr > th,
    .tbl-data-line > tbody > tr > td {
        height: 68px;
    }
}

.tbl-data-line > thead > tr > th {
    font-weight: 700;
    text-align: center;
}

.tbl-data-line > tbody > tr > th {
    padding-right: 8px;
    font-weight: 500;
    vertical-align: top;
}

.tbl-data-line td > * {
    vertical-align: middle;
}

.tbl-data-line .tr-underline th,
.tbl-data-line .tr-underline td {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 45px;
}

.tbl-data-line .tr-underline + tr > th,
.tbl-data-line .tr-underline + tr > td {
    padding-top: 30px;
}

.tbl-data-line + .list-info {
    margin-top: -10px;
}

@media all and (max-width: 799px) {
    .tbl-data-line,
    .tbl-data-line > thead,
    .tbl-data-line > tbody {
        display: block;
    }
    .tbl-data-line > thead > tr,
    .tbl-data-line > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tbl-data-line > tbody > tr > th {
        display: block;
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tbl-data-line > tbody > tr > td {
        display: block;
    }

    .tbl-data-line .tr-underline > th {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tbl-data-line .tr-underline > td,
    .tbl-data-line .tr-underline + tr > th,
    .tbl-data-line .tr-underline + tr > td {
        padding-top: 16px;
    }

    tbody > tr > th .txt-label {
        min-height: initial;
    }
}

/* 그리드형 table */
.tbl-list-container {
    overflow: auto;
    border-top: 2px solid var(--color-primary);
}

.tbl-list-container.line-gray {
    border-color: #d0d7dc;
}

.tbl-list-container:not(:last-child) {
    margin-bottom: 40px;
}

.form + .tbl-list-container {
    margin-top: 20px;
}

.tbl-list {
    table-layout: auto;
    border-collapse: separate; /* 헤더 sticky 시 th 에 보더 사라지는 현상 제거 */
}

.tbl-list > thead > tr > th {
    padding: 8px 10px;
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 700;
    height: 60px; /* 최소 높이 */
    white-space: nowrap;
    text-align: center;
}

.tbl-list > thead > tr > th,
.tbl-list > tbody > tr > th {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.tbl-list > tbody > tr > th,
.tbl-list > tbody > tr > td {
    padding: 10px 10px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    height: 60px; /* 최소 높이 */
    font-weight: 500;
    white-space: nowrap;
}

.tbl-list > tbody > tr > th {
    border-right: 1px solid #e0e0e0;
}

/* 마우스 오버시 tr 색상 변경: colspan 있는 항목. txt-no-data 영역 제외 */
.tbl-list > tbody > tr:hover > td:not([colspan]) {
    background: #f4fcf7;
}

.txt-no-data {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* tbl-list 내 tr 아코디언 .detail-view */
.tbl-expand-row td {
    transition: border-color 0.2s;
}

/* selected-no-border 는 없어지고 selected 클래스로 교체 예정 */
.tbl-expand-row.selected-no-border td {
    background: #f4fcf7;
}

.tbl-expand-row.selected td {
    background: #f4fcf7;
}

.tbl-detail-row > td {
    padding: 0 !important;
    height: auto !important;
    border-bottom: 0 !important;
}
.tbl-detail-row .tbl-details {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.tbl-details-txtbox {
    padding: 40px 11.7647%; /* 좌우 PC 기준 200px*/
    background: #f4fcf7;
    text-align: left;
    font-weight: 500;
    white-space: normal;
    box-shadow: inset 0 -1px 0 0 #e0e0e0;
}

@media all and (max-width: 799px) {
    .tbl-details-txtbox {
        padding: 20px 16px; /* 좌우 PC 기준 200px*/
        background: #f4fcf7;
        text-align: left;
        font-weight: 500;
    }
}

/* 테이블 처럼 보이는 반응형 dl list - tbl-data, tbl-data-line 내부에서 사용*/
.dl-data-tbl {
    --thWidth: 120px; /* style="--varWidth: 150px" 과 같이 타이틀 영역의 너비를 커스텀할 수 있음 */
    display: flex;
    flex-wrap: wrap;
    gap: 16px 10px;
}

.dl-data-tbl::after {
    content: '';
    width: 100%;
    height: 0;
    clear: both;
}

.dl-data-tbl .dl-data-tbl {
    gap: 14px 10px;
    width: 100%;
}

.dl-data-tbl > .row-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex: 1 1 100%;
}

.dl-data-tbl > .row-item.col-1\/2 {
    flex: 1 1 auto; /* ✅ 최소 320px, 공간 있으면 옆으로 */
    width: calc(50% - 8px);
    min-width: 640px;
}

@media all and (max-width: 1079px) {
    .dl-data-tbl > .row-item.col-1\/2 {
        width: 100%;
        min-width: initial;
    }
}

.dl-data-tbl .row-item dt {
    width: var(--thWidth);
    flex-shrink: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.dl-data-tbl .row-item dd {
    flex: 1 1 auto;
    width: 100px;
}

.dl-data-tbl + .dl-data-tbl {
    margin-top: 20px;
}

@media all and (max-width: 799px) {
    .dl-data-tbl {
        padding-left: 20px;
    }
    .dl-data-tbl .row-item dt {
        width: 100%;
    }
    .dl-data-tbl .row-item dd {
        width: 100%;
    }
}

.form {
    display: flex;
    flex-direction: column;
}

/*** E: Table ***/

/*** S: List ***/
/* 회색 label, 검정색 value 로 이루어진 목록 */
.list-dl {
    display: inline-flex;
    gap: 8px 20px;
    flex-wrap: wrap;
}

.list-dl .list-item {
    white-space: nowrap;
    display: inline-flex;
    font-weight: 500;
    gap: 6px;
    position: relative;
    align-items: center;
    line-height: 1;
}

.list-dl .list-item dt {
    color: var(--fc-gray);
}

.list-dl .list-item dd {
    font-weight: 700;
}

@media all and (min-width: 800px) {
    .list-dl.line .list-item + .list-item {
        padding-left: 21px;
    }

    .list-dl.line .list-item:not(:first-child)::before {
        content: '';
        width: 1px;
        height: 12px;
        background: #d0d7dc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.tbl-list .list-dl {
    justify-content: center;
}

/* 라인있는 인라인 리스트 */
.list-inline {
    display: flex;
    gap: 8px 20px;
    font-weight: 500;
    flex-wrap: wrap;
}

.list-inline li {
    position: relative;
}
.list-inline li + li {
    padding-left: 21px;
}

.list-inline li:not(:first-child)::before {
    content: '';
    width: 1px;
    height: 12px;
    background: #d0d7dc;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
/*** E: List ***/

/*** S: 아이콘 ***/
i.ico {
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    display: inline-block;
    mask-position: center;
    -webkit-mask-position: center;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: #6c7883; /* icon 컬러 */

    transition: 0.1s background;
}

i.ico.search {
    mask-image: url('../images/icon/ico_search.svg');
    -webkit-mask-image: url('../images/icon/ico_search.svg');
}

i.ico.plus {
    mask-image: url('../images/icon/ico_plus.svg');
    -webkit-mask-image: url('../images/icon/ico_plus.svg');
}

i.ico.minus {
    mask-image: url('../images/icon/ico_minus.svg');
    -webkit-mask-image: url('../images/icon/ico_minus.svg');
}

i.ico.phone {
    mask-image: url('../images/icon/ico_phone.svg');
    -webkit-mask-image: url('../images/icon/ico_phone.svg');
    background: #000000;
}

i.ico.info {
    mask-image: url('../images/icon/ico_info.svg');
    -webkit-mask-image: url('../images/icon/ico_info.svg');
    background: #000000;
}

i.ico.email {
    mask-image: url('../images/icon/ico_email.svg');
    -webkit-mask-image: url('../images/icon/ico_email.svg');
    background: #000000;
}

i.ico.cash {
    mask-image: url('../images/icon/ico_cash.svg');
    -webkit-mask-image: url('../images/icon/ico_cash.svg');
    width: 18px;
    height: 18px;
}

i.ico.card {
    mask-image: url('../images/icon/ico_card.svg');
    -webkit-mask-image: url('../images/icon/ico_card.svg');
    width: 18px;
    height: 18px;
}

i.ico.download {
    mask-image: url('../images/icon/ico_download.svg');
    -webkit-mask-image: url('../images/icon/ico_download.svg');
    width: 24px;
    height: 24px;
    background: #221c1c;
}

.btn .ico {
    background: #fff;
    margin-left: -4px;
}

.btn:active .ico {
    background: #fff;
}

.btn.solid .ico {
    background: #87929c;
}

.btn.solid:active .ico {
    background: var(--color-primary);
}

.btn.solid.primary .ico {
    background: var(--color-primary);
}

.btn.solid.primary:active .ico {
    background: #fff;
}

.btn:disabled .ico,
.btn.disabled .ico {
    background: #adb9c2;
}

.btn-area i.ico {
    width: 20px;
    height: 20px;
}

/*** E: 아이콘 ***/

/*** S: 박스 컨테이너, 그룹,  텍스트 박스  ***/
.box-dummy {
    position: relative;
    padding: var(--padding-box-hoz);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    height: 100px;
    overflow: auto;
    width: 100%;
}

/* .txt-view */
.txt-view {
    border: 1px solid var(--component-border-default);
    border-radius: 8px;
    padding: 12px 20px;
    user-select: text;
    -webkit-user-select: text;
}

.txt-view + .checkbox-btn.all {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* 인라인 요소 그룹. 인풋 + 인풋, 버튼 등 */
.inline-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* position: relative; 넣으면 내부 셀렉트/datapicker 드롭박스 위치 오작동이 생기므로 제거. */
    vertical-align: middle;
    max-width: 100%;
}

.inline-group.block .input,
.inline-group.block .select {
    flex: 1 1 auto;
}

.inline-group.block .datepicker {
    width: 120px;
}

.inline-group.block + .inline-group.block,
.inline-group + .tbl-list-container {
    margin-top: 12px;
}

/* 텍스트 label + input 또는 select 그룹*/
.label-group {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.label-group .input,
.label-group .select {
    flex: 1 1 auto;
}

.inline-group .label-group {
    flex: 1 1 auto;
}

.tbl-list td .inline-group {
    flex-wrap: nowrap;
}
/*** E: 박스 컨테이너, 그룹,  텍스트 박스 ***/

/*** S: 텍스트, 리스트 ***/
/* 도움말 리스트 */
.list-info-tit {
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 18px;
}

.page-content > .list-info,
.page-content > .list-info-tit,
.page-content > .form > .list-info-tit,
.page-content > .form > .list-info {
    padding-left: 20px;
    padding-right: 20px;
}

.list-info > li {
    padding-left: 16px;
    position: relative;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.list-info > li + li {
    margin-top: 6px;
}

.list-info > li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #1e1e1e;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 4px;
}

.list-info:not(:last-child) {
    margin-bottom: 30px;
}

.list-info > li.fc-primary::before {
    background: var(--color-primary);
}

.list-info > li.fc-red::before {
    background: var(--color-red);
}

/* 도움말과 함께 쓰는 불릿 없는 단독 텍스트 */
.txt-info {
    font-weight: 500;
}

/* 도움말과 함께 쓰는 '-' 있는 텍스트 */
.txt-dash {
    padding-left: 10px;
    position: relative;
}

.txt-dash::before {
    content: '-';
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 0;
}

.txt-info + .list-info-tit {
    margin-top: 30px;
}

/* 영역에 따른 텍스트 커스텀 */
.side-box .txt-info + .list-info-tit,
.modal-body .txt-info + .list-info-tit {
    margin-top: 20px;
}

.side-box .list-info-tit,
.modal-body .list-info-tit {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.modal-body > .list-info,
.contents-box > .list-info {
    padding: 0 12px;
}

.side-box .list-info {
    font-size: 13px;
}

.side-box .list-info:not(:last-child) {
    margin-bottom: 20px;
}

.side-box .list-info > li {
    font-weight: 400;
}

.side-box .list-info > li::before {
    top: 5px;
}

table .list-info:not(:first-child) {
    margin-top: 12px;
}

/* 첨부파일 다건 리스트*/
.attach-list {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px 18px;
    font-size: 14px;
    color: #999;
    min-height: 100px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

.attach-list li {
    display: flex;
    align-items: center;
}

.attach-list li .txt-name {
    flex: 0 1 auto;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.4;
    padding-right: 4px;
}

.attach-list .btn-file-del {
    margin-left: 8px;
}

.attach-list .no-file {
    height: 100%;
    justify-content: center;
    flex: 1 1 auto;
}

/* 날짜 출력용 - 단독 사용. 아이콘 없음 */
.txt-date {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    width: auto;
    display: inline-flex;
    border: 0;
}

.txt-date + * {
    margin-left: 10px;
}

/* 동의 상태 */
.agree {
    display: inline-flex;
    gap: 4px 10px;
}

.agree .item-agree {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tbl-list .agree {
    justify-content: center;
    padding: 0 10px;
}

/* 운영시간 텍스트    */
.txt-open-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fc-gray);
    font-size: 14px;
}

/* 단위: 원, % 등*/
.txt-unit {
    vertical-align: middle;
}

/*** E: 텍스트, 리스트 ***/

/*** S: Layout ***/
/* 페이지 우측 상단 고정 컨테이너 */
.floating-box {
    position: absolute;
    right: 40px;
    top: 50px;
}

/* .reset-msg */
.floating-box .reset-msg {
    color: #999;
    display: flex;
    gap: 14px;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 8px;
}

.floating-box .reset-msg b {
    display: block;
    text-align: right;
    color: #6c7883;
    font-size: 14px;
}

.floating-box .reset-msg b span {
    color: var(--color-red);
    margin-right: 4px;
}

.floating-box .reset-msg .btn-reset {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary) url('../images/icon/btn_reset.svg') no-repeat center;
    flex-shrink: 0;
}

@media all and (max-width: 1679px) {
    .floating-box {
        right: 30px;
    }
}

@media all and (max-width: 799px) {
    .floating-box {
        position: static;
        right: 20px;
        margin-bottom: 16px;
    }

    .floating-box .reset-msg p {
        order: 3;
    }
    .floating-box .reset-msg b {
        text-align: left;
    }
}

.page-tit {
    font-size: 30px;
    margin-bottom: 40px;
    font-weight: 700;
}

/* 그리드 상단, 테이블 상단 타이틀 영역 */
.tit-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    margin-bottom: 12px;
    gap: 10px 10px;
    position: relative;
}

.tit-area .tit {
    font-size: 24px;
    font-weight: 700;
}

/* 검색 총 건수 */
.txt-tbl-total {
    font-size: 16px;
    font-weight: 500;
}

.txt-tbl-total .num {
    color: var(--color-red);
    font-weight: 700;
}

.extra-area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    /* margin-left: auto; */
    flex: 1 1 auto;
}

.extra-area .list-dl + .btn {
    margin-left: 10px;
}

@media all and (max-width: 1079px) {
    /* .extra-area {
    width: 100%;
  } */
}

/* 페이징 */
.paging-list {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.paging-list li .btn-paging {
    border: 1px solid #d0d7dc;
    color: #555f67;
    border-radius: 4px;
    min-width: 42px;
    height: 40px;
    overflow: hidden;
    position: relative;
    margin: 0 2px;
}

.paging-list li .btn-paging:hover {
    color: #000;
}

.paging-list li .btn-paging.selected {
    color: #fff;
    background: var(--color-primary);
}

.paging-list li .btn-paging.prev,
.paging-list li .btn-paging.next,
.paging-list li .btn-paging.first,
.paging-list li .btn-paging.last {
    text-indent: -999px;
    font-size: 0;
    color: transparent;
}

.paging-list li .btn-paging.prev::before,
.paging-list li .btn-paging.next::before,
.paging-list li .btn-paging.first::before,
.paging-list li .btn-paging.last::before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #6c7883;
}

.paging-list li .btn-paging.prev::before,
.paging-list li .btn-paging.next::before {
    mask: url('../../assets/images/icon/paging_prev.svg') no-repeat center;
    -webkit-mask: url('../../assets/images/icon/paging_prev.svg') no-repeat center;
}

.paging-list li .btn-paging.first::before,
.paging-list li .btn-paging.last::before {
    mask: url('../../assets/images/icon/paging_first.svg') no-repeat center;
    -webkit-mask: url('../../assets/images/icon/paging_first.svg') no-repeat center;
}

.paging-list li .btn-paging.next::before,
.paging-list li .btn-paging.last::before {
    transform: translate(-50%, -50%) rotate(-180deg);
}

.paging-list li .btn-paging.prev:not(:disabled):hover::before,
.paging-list li .btn-paging.next:not(:disabled):hover::before,
.paging-list li .btn-paging.first:not(:disabled):hover::before,
.paging-list li .btn-paging.last:not(:disabled):hover::before {
    background: #000;
}

.paging-list li .btn-paging.prev:disabled::before,
.paging-list li .btn-paging.next:disabled::before,
.paging-list li .btn-paging.first:disabled::before,
.paging-list li .btn-paging.last:disabled::before {
    background: #cecece;
}

@media all and (max-width: 799px) {
    .paging-list {
        font-size: 12px;
    }

    .paging-list li .btn-paging {
        /* min-width: 32px;
    height: 32px; */
    }

    .paging-list li:empty {
        display: none;
    }

    .paging-list li .btn-paging:not(.selected):not(.prev):not(.next):not(.first):not(.last) {
        display: none;
    }
}

/* 날짜 출력 용 datepicker paging 아이콘 있음 */
.date-paging {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.date-paging .txt-datepicker {
    order: 4;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    width: auto;
    display: inline-flex;
    border: 0;
}

.date-paging input.txt-datepicker {
    width: 170px;
    background: url('../images/icon/component_calendar.svg') no-repeat right center;
    padding-right: 28px;
}

.date-paging input.txt-datepicker.datepicker {
    cursor: pointer;
}

.date-paging + [class*='tbl'] {
    margin-top: 20px;
}

.date-paging button {
    flex-shrink: 0;
}

.date-paging .btn-prev {
    order: 0;
    margin-right: 20px;
}

.date-paging .btn-next {
    order: 5;
    margin-left: 20px;
}

.date-paging .btn-today {
    order: 2;
    background: var(--color-primary);
    height: 24px;
    border-radius: 4px;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 8px;
}

.tit-area .date-paging {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media all and (max-width: 1079px) {
    .date-paging {
        /* width: 100%;
    justify-content: flex-start; */
    }

    /* 예약현황 타이틀 스타일 개별 적용*/
    .tit-area.booking-tit .date-paging {
        position: static;
        transform: none;
        width: auto;
    }
}

@media all and (max-width: 799px) {
    .date-paging {
        width: 100%;
    }

    .date-paging input.txt-datepicker {
        font-size: 18px;
        width: 130px;
    }
    .date-paging .btn-prev {
        margin-right: 8px;
    }

    .date-paging .btn-next {
        margin-left: 8px;
    }

    .tit-area.booking-tit .txt-open-time {
        width: 100%;
    }

    .tit-area.booking-tit .extra-area {
        margin-left: auto;
    }
}

@media all and (max-width: 599px) {
    .tit-area.booking-tit .txt-open-time {
        justify-content: center;
    }

    .tit-area.booking-tit .date-paging {
        width: 100%;
    }
}

/* 캘린더 이전/다음 버튼 */
.date-paging .btn-prev,
.date-paging .btn-next {
    width: 24px;
    height: 24px;
    text-indent: -999px;
    overflow: hidden;
    display: inline-block;
}

.date-paging .btn-prev {
    background: url('../images/icon/btn_prev.svg') no-repeat center;
}

.date-paging .btn-next {
    background: url('../images/icon/btn_next.svg') no-repeat center;
}

/* 페이지 좌우 분할 레이아웃 */
.layout-article {
    display: flex;
    border-top: 2px solid var(--color-primary);
    margin-bottom: var(--marginVer);
    flex-wrap: wrap;
    width: 100%;
}

.layout-side {
    padding: 30px 40px 0;
    width: 460px;
    flex: 0 0 auto;
}

.layout-content {
    flex: 1 1 auto;
    max-width: 100%;
}

.layout-content .article-view {
    padding-top: 50px;
    font-size: 16px;
}

.article-head {
    padding-bottom: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-head h1 {
    font-size: 24px;
    font-weight: 700;
}

.article-head h1 .type {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

.article-head .list-dl {
    margin-top: 10px;
}

.article-head .inline-group .list-dl {
    margin-top: 0;
}

.article-head .scorecard-remark {
    margin-bottom: 0;
    margin-top: 10px;
}

/* 게시글 타입 */
.layout-article.type-post {
    border-top: none;
    border-bottom: 1px solid #d0d7dc;
    padding-bottom: 40px;
}

@media all and (max-width: 1679px) {
    .article-head {
        padding-bottom: 20px;
    }

    .article-head h1 {
        display: flex;
        gap: 8px 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .article-head h1 br {
        display: none;
    }

    .article-head h1 .type {
        margin-bottom: 0;
    }

    /*게시글 상세 */
    .layout-article.type-post .article-head {
        position: relative;
    }

    .layout-article.type-post h1 {
        flex-direction: column;
        align-items: flex-start;
    }

    .layout-article.type-post .post-date {
        position: absolute;
        right: 0;
        top: 0;
    }
}

.article-view {
    font-weight: 500;
}

.article-view .image {
    padding: 20px 0;
    text-align: center;
}

@media all and (min-width: 1680px) {
    .layout-content .tbl-list-container {
        border-top: 0;
    }
}

@media all and (max-width: 1679px) {
    .layout-side {
        width: 100%;
        padding: 20px 0 0;
    }
}

/* 첨부파일 목록 */
.appendix-list {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.appendix-list a {
    display: inline-flex;
    height: 24px;
    gap: 8px;
}

.appendix-list a::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('../images/icon/ico_download.svg') no-repeat left center;
}

.appendix-list a:hover {
    color: var(--color-primary);
}

@media all and (max-width: 1679px) {
    .appendix-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .layout-content .article-view {
        margin-top: 30px;
        border-top: 2px solid var(--color-primary);
    }
}

/*** E: Layout ***/

/*** S: Tooltip ***/

/* 도움말 버튼과 도움말 팝업 */
.tooltip {
    display: inline-block;
    position: relative;
}
.btn-help {
    width: 24px;
    height: 24px;
    background: url('../images/icon/ico_help.svg') no-repeat center;
    overflow: hidden;
    font-size: 0;
    text-indent: -999px;
    color: transparent;
}

.help-tooltip {
    font-size: 12px;

    position: absolute;
    display: none;
    z-index: 999;
    width: max-content;
}

.help-tooltip {
    z-index: 999;
    position: absolute;
    left: 200px;
    top: 200px;
    background: var(--color-primary-fill);
    border: 1px solid var(--color-primary);
    padding: 16px;
    border-radius: 6px;
    color: #555f67;
    display: none;
    padding-right: 40px;
}

.help-tooltip.on {
    display: block;
}

.help-tooltip.right {
    animation: rightTooltip ease-in-out 0.3s forwards;
}

.help-tooltip.top {
    animation: topTooltip ease-in-out 0.3s forwards;
}

.help-tooltip.bottom {
    animation: bottomTooltip ease-in-out 0.3s forwards;
}

.help-tooltip.left {
    animation: leftTooltip ease-in-out 0.3s forwards;
}

@media all and (max-width: 600px) {
    /* 모바일 사이즈에서는 아래에서만 뜸.*/
    .help-tooltip.right,
    .help-tooltip.top,
    .help-tooltip.bottom,
    .help-tooltip.left {
        animation: mobileTooltip ease-in-out 0.3s forwards !important;
        /* position: absolute;
    top: 100%;

    left: -16px !important; */
        width: max-content; /* 내용 기준으로 너비 잡기 */
        width: calc(100vw - 50px); /* 화면이 줄어들면 강제로 줄어듦 */
        transition: none;
    }
}

button.ico-tooltip-close {
    width: 16px;
    height: 16px;
    background: url('../images/icon/btn_tooltip_close.svg') no-repeat center;
    position: absolute;
    right: 16px;
    top: 16px;
    border: 0;
}

/* 버튼 사이즈에 따라 세부 위치 조정 필요 */
@keyframes rightTooltip {
    0% {
        transform: translateX(20px) translateY(calc(-50% + 10px));
        opacity: 0;
    }
    100% {
        transform: translateX(20px) translateY(-50%);
        opacity: 1;
    }
}

@keyframes leftTooltip {
    0% {
        transform: translateX(calc(-100% - 20px)) translateY(calc(-50% + 10px));
        opacity: 0;
    }
    100% {
        transform: translateX(calc(-100% - 20px)) translateY(-50%);
        opacity: 1;
    }
}

@keyframes topTooltip {
    0% {
        transform: translateX(-50%) translateY(calc(-100% - 15px));
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(calc(-100% - 25px));
        opacity: 1;
    }
}

@keyframes bottomTooltip {
    0% {
        transform: translateX(-50%) translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(20px);
        opacity: 1;
    }
}

@keyframes mobileTooltip {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(20px);
        opacity: 1;
    }
}

/* 툴팁 내부 도움말 요소 */
.help-list {
    color: inherit;
}

.help-list > li {
    padding-left: 12px;
    position: relative;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.help-list > li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #555f67;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 0;
}

.help-list .tbl-help {
    margin-top: 12px;
}

.tbl-help {
    color: #87929c;
    table-layout: auto;
    text-align: left;
}

.tbl-help th {
    color: #87929c;
    text-decoration: underline;
    padding: 0 12px 12px 0;
    vertical-align: top;
}

.tbl-help td {
    padding: 0 0 12px 0;
    vertical-align: top;
}

.tbl-help tr:last-child th,
.help-msg .tbl-help tr:last-child td {
    padding-bottom: 0;
}

.floating-box .tooltip {
    margin-right: 10px;
}

/*** E: Tooltip ***/

/**************************************
E: 범용 공통 스타일
/**************************************/

/**************************************
S: 개별화면 스타일
/**************************************/
/*** S: 타석 ***/
.bay-card-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    overflow: visible;
}

.bay-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 238px;
    justify-content: space-between;
    gap: 10px;
    min-width: 0; /* 그리드 아이템이 컨텐츠에 맞춰 늘어나는 것 방지*/
}

@media all and (max-width: 1919px) {
    .bay-card-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media all and (max-width: 1579px) {
    .bay-card-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (max-width: 1280px) {
    .bay-card-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 799px) {
    .bay-card-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    .bay-card {
        height: auto;
    }
}

.bay-card .end-time {
    color: var(--color-primary);
}

/* 타석 오픈 준비 */
.bay-card.ready {
    background: #f4fcf7;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(184, 225, 200, 0.15);
}

/* 종료된 기기 */
.bay-card.done {
    background: var(--bg-disabled);
    border-color: #eceff1;
    color: #adb9c2;
}

/* offline */
.bay-card.offline {
}

/* 타석정보 변경중 */
.bay-card.update {
    background: #f4fcf7;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(184, 225, 200, 0.15);
}

/* 카드 내부 스타일 */
.bay-card.update,
.bay-card.done {
    opacity: 0.8;
}

.bay-card.ready .card-tit .bay-name,
.bay-card.update .card-tit .bay-name {
    color: var(--color-primary);
}

.bay-card.done .tag.solid.primary,
.bay-card.offline .tag.solid.primary {
    border-color: #3e454b;
    color: #3e454b;
}

.bay-card.done .bay-booking-time .fc-primary,
.bay-card.offline .bay-booking-time .fc-primary {
    color: #87929c !important;
}

.bay-card .card-tit {
    font-weight: 500;
    display: flex;
    width: calc(100% - 30px);
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    line-height: normal;
}

.bay-card .card-tit .bay-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #272c30;
}

.bay-card .card-tit .tag {
    font-size: 10px;
    font-weight: 400;
}

.bay-card .bay-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    flex: 1 1 auto;
}

.bay-card .bay-info {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    gap: 4px 21px;
}

.bay-card .bay-info li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.bay-card .bay-info li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 14px;
    background: #adb9c2;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}

.bay-card .time-group {
    justify-content: space-between;
    width: 100%;
}

.bay-card .time-group .time:last-child {
    color: var(--color-primary);
}

.bay-footer {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-end;
}

.bay-footer .progress {
    margin-bottom: auto;
}

.bay-footer .tag.solid:not(.primary) {
    border-color: #87929c;
    color: #87929c;
}

.btn-bay-open {
    margin: 0 auto;
    font-size: 1px;
    color: transparent;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-primary);
    align-items: center;
    text-indent: -9999px;
    overflow: hidden;
    align-items: center;
    line-height: 0;
}

.btn-bay-open::before {
    content: '';
    width: 56px;
    height: 56px;
    display: inline-block;
    background: #a7e4bf url('../images/icon/btn_bay_open.svg') no-repeat center;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(184, 225, 200, 0.15);
}

.bay-booking-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #87929c;
    gap: 4px;
    letter-spacing: -0.5px;
}

.bay-booking-time .tag-no-booking {
    background: #eceff1;
    height: 24px;
    width: 100%;
    color: var(--fc-default);
    border-radius: 12px;
}

.bay-card.done .bay-booking-time .tag-no-booking {
    background: #e1e4e6;
}

.bay-card-list .btn-menu-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
}

.bay-card-list .layer-menu {
    right: 15px;
    top: 50px;
    z-index: 2;
}

/* 타석 및 시간 변경 전 후 상태 카드 */
.change-info-card {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.change-info-card:not(:last-child) {
    margin-bottom: 24px;
}

.change-info-card .before,
.change-info-card .after {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.change-info-card .before {
    border-color: #adb9c2;
    color: #6c7883;
}

.change-info-card .before .start-time span {
    background: #fff;
}

.change-info-card .after {
    border-color: var(--color-primary);
    background-color: var(--color-primary-fill);
}

.change-info-card dt {
    font-weight: 500;
    width: 100px;
    text-align: center;
    font-size: 15px;
}

.change-info-card .after {
    color: var(--color-primary);
}

.change-info-card dd {
    font-weight: 400;
    flex: 1 1 auto;
    font-size: 16px;
}

.change-info-card .after dd {
    font-weight: 700;
}

.change-info-card .before .time-group {
    opacity: 0.6;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
/*** E: 타석 ***/

/*** S: 스코어 카드 ***/
.score-summary {
    display: flex;
    gap: 8px;
    align-items: center;
}

.score-summary .score-date {
    font-size: 12px;
    color: #6c7883;
    position: relative;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.score-summary .score-date::before {
    content: '|';
    width: 1px;
    height: 12px;
    color: #d0d7dc;
    margin-right: 8px;
}

.scorecard {
    border-top: 1px solid var(--component-border-default);
}

.scorecard + .scorecard {
    margin-top: 30px;
}

.scorecard-header {
    padding: 20px 20px 16px;
}

.scorecard-header .team-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.scorecard-player {
    display: flex;
    align-items: center;
    gap: 0 16px;
    flex-wrap: wrap;
    line-height: 26px;
}

.scorecard-player + .scorecard-player {
    margin-top: 6px;
}

.scorecard-player .player-name {
    font-size: 16px;
    font-weight: 700;
}

.scorecard-player .player-name .player-num {
    font-weight: 400;
    color: #adb9c2;
    margin-right: 6px;
}

.scorecard-player .player-info {
    font-size: 12px;
    color: var(--fc-gray);
}

.scorecard-player .player-score {
    font-size: 16px;
    margin-left: auto;
    line-height: 1;
}

.scorecard-player .player-score .score-label {
    color: var(--fc-gray);
    font-size: 14px;
}

.scorecard-player .player-score b + .score-label {
    margin-left: 8px;
}

@media all and (max-width: 599px) {
    .scorecard-header {
        padding: 16px 10px 12px;
    }

    .scorecard-player {
        line-height: 22px;
    }
    .scorecard-header .player-name {
        width: 100%;
    }

    .scorecard-header .player-score {
        margin-left: 0;
    }
}

.tbl-scorecard-container {
    overflow: auto;
    display: block;
}

.tbl-scorecard {
    table-layout: auto;
    color: #697375;
    font-size: 12px;
    text-align: center;
    /* text-transform: uppercase; */
    white-space: nowrap;
}

.tbl-detail-row.selected .tbl-scorecard thead th {
    border-top: 1px solid var(--component-border-default);
}

.tbl-scorecard th,
.tbl-scorecard td {
    padding: 10px 2px;
    font-weight: 500;
    min-width: 26px;
}

.tbl-scorecard thead th {
    background: #f6f8f9;
}

.tbl-scorecard th,
.tbl-scorecard td {
    border-bottom: 1px solid var(--component-border-default);
}

.tbl-scorecard .bg-total {
    background: var(--color-primary);
    color: #fff;
    border-bottom: 1px solid #fff;
    font-weight: 700;
}

.tbl-scorecard .bg-sub-total {
    background: var(--color-primary-fill);
    color: var(--color-primary);
    font-weight: 700;
}

.tbl-scorecard .bg-sub-total2 {
    background: #f4fcf7;
    color: var(--color-primary);
    font-weight: 700;
}

.tbl-scorecard .score-row td:not(.bg-total):not(.bg-sub-total):not(.bg-sub-total2) {
    color: var(--fc-default);
}

.tbl-scorecard .score-row th,
.tbl-scorecard .score-row td {
    border-color: #f6f8f9;
}

.tbl-scorecard .score-row:last-child th,
.tbl-scorecard .score-row:last-child td {
    border-color: #d0d7dc;
}

.tbl-scorecard .score-row .bg-total {
    background: #1c7e61;
}

/*범례*/
.scorecard-remark {
    display: flex;
    gap: 10px 20px;
    padding: 0 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    color: #6c7883;
    font-size: 12px;
}

.scorecard-remark li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scorecard-remark li::before {
    content: '';
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* 이글이하 */
.scorecard-remark li.remark-state-01::before {
    background: #ffbaba;
    border-radius: 50%;
    cursor: pointer;
}

/* 버디 */
.scorecard-remark li.remark-state-02::before {
    border: 1px solid #ffbaba;
    border-radius: 50%;
}

/* 파 */
.scorecard-remark li.remark-state-03::before {
    border: 1px solid #eceff1;
    border-radius: 50%;
}

/* 보기 */
.scorecard-remark li.remark-state-04::before {
    border: 1px solid #d9d9d9;
}

/* 더블보기 이상 */
.scorecard-remark li.remark-state-05::before {
    background: #d9d9d9;
}

/* 우리매장 대회 테이블 내부 스코어 카드 범례 */
.scorecard-footer {
    border-bottom: 1px solid #d0d7dc;
    height: 57px;
    display: flex;
    padding: 8px 26px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px;
}

.scorecard-footer .scorecard-remark {
    margin-bottom: 0;
    /* margin-left: auto; */
    padding: 0;
}

@media all and (max-width: 599px) {
    .scorecard-footer {
        padding: 8px 8px;
    }
}

/* 그리드 안 상태표시 */
span[class^='score-state-'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #221c1c;
    width: 20px;
    height: 20px;
}

.list-info .score-state-01 {
    width: 16px;
    height: 16px;
    font-size: 10px;
    cursor: auto;
    vertical-align: middle;
}

/* 이글이하 */
.score-state-01 {
    background: #ffbaba;
    border-radius: 50%;
}

/* 버디 */
.score-state-02 {
    border: 1px solid #ffbaba;
    border-radius: 50%;
}

.score-state-03 {
    border-radius: 50%;
}

/* 보기 */
.score-state-04 {
    border: 1px solid #d9d9d9;
}

/* 더블보기 이상 */
.score-state-05 {
    background: #d9d9d9;
}
/*** E: 스코어 카드 ***/

/*** S: 예약 ***/
/* 예약 매체 별 예약 건수 */
.resevation-count {
    display: inline-flex;
    font-size: 12px;
    gap: 14px;
    color: var(--fc-gray);
    justify-content: flex-end;
}

.resevation-count li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.resevation-count b {
    font-size: 10px;
    display: inline-block;
    line-height: 18px;
    height: 18px;
    padding: 0 8px;
    border-radius: 4px;
    background: #eceff1;
}

.resevation-count b.color-total {
    background: #6c7883;
    color: #fff;
}

.resevation-count b.color-qms {
    color: var(--color-primary);
}

.resevation-count b.color-app {
    color: var(--color-red);
}

.resevation-count b.color-web {
    color: #2793ff;
}

.resevation-count + * {
    margin-left: 10px;
}

/* 예약 타임라인 */
.reservationCell {
    --cellWidth: 84px; /* 스크립트에서 덮어씌워짐 */
    --cellHeight: 15px; /* 셀당 높이: 스크립트에서 덮어씌워짐*/
    --hourHeight: calc((var(--cellHeight) * 12)); /* 5분단위 기준. 셀의 단위가 바뀌면 스크립트에서 덮어씌워짐  */
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid #87929c;
    position: relative;
    height: 600px; /* 타임라인 영역 최소 높이로 작동 */
    overflow: auto;
    flex: 1 0 auto;
}

@media all and (max-width: 799px) {
    .reservationCell {
        height: 300px;
        flex: 1 1 auto;
    }
}

.reservationCell-thead {
    display: flex;
    z-index: 102;
    position: sticky;
    top: 0;
    display: flex;
    height: 60px;
    align-items: center;
    background: #f6f8f9;
    border-bottom: 1px solid #eceff1;
    gap: 4px;
    margin-bottom: 4px;
    width: max-content;
}

.reservationCell-thead div {
    width: var(--cellWidth);
    font-size: 14px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
    flex: 0 0 auto;
}

/* 헤더 셀 텍스트 2줄 제한 */
.reservationCell-thead .txt-box {
    line-height: 1.3;
    max-height: 2.6em;
    white-space: normal;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.reservationCell-thead div.cross-cell {
    width: 80px;
    margin-right: 8px;
    background: #f6f8f9;
    position: sticky;
    left: 0;
}

.reservationCell-tbody {
    display: flex;
    width: max-content;
}

.reservationCell-tbody .cellThWrap {
    z-index: 4;
    width: 80px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    margin-right: 8px;
}

/* 예약 그리드 좌우 스크롤 시 thead, tbody 사이 여백에 요소 비치는 현상 제거 */
.reservationCell-tbody .cellThWrap::before {
    content: '';
    background: #fff;
    width: 80px;
    height: 20px;
    left: 0;
    position: absolute;
    top: -15px;
    z-index: 120;
}

.reservationCell-tbody .cellThWrap div {
    height: var(--hourHeight);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #adb9c2;
}

.reservationCell-tbody .cellThWrap div.half {
    height: calc(var(--hourHeight) / 2);
}

.reservationCell-tbody .cellThWrap div:last-child {
    border-bottom: 0;
}

.reservationCell-tbody .cellTdWrap {
    display: flex;
    position: relative;
    width: max-content;
    height: max-content;
    display: flex;
    position: relative;
    gap: 4px;
}

.reservationCell-tbody .cellTdWrap .cell-col-group {
    position: relative;
    overflow: hidden;
}

.reservationCell-tbody .cellTdWrap .cell-col-group > div {
    height: var(--cellHeight);
    position: relative;
    width: var(--cellWidth);
    background: #f6f8f9;
}

/* 30분, 1시간 단위 사이 갭을 위한 보더 */
.reservationCell-tbody .cell-col-group > div[data-min='25'],
.reservationCell-tbody .cell-col-group > div[data-min='55'] {
    border-bottom: 2px solid #fff;
}

.reservationCell-tbody .cell-col-group > div[data-min='30'],
.reservationCell-tbody .cell-col-group > div[data-min='0'] {
    border-top: 2px solid #fff;
}

.reservationCell-tbody .cellTdWrap .cell-col-group > div:hover:after {
    content: attr(time);
    display: flex;
    background: rgba(49, 135, 255, 0.3);
    width: 100%;
    height: var(--hourHeight);
    box-shadow: 0 0 3px 0 gray;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgb(0, 115, 255);
    z-index: 1;
    pointer-events: none; /* 레이어 영역을 뚤고, 뒤 div 에서 이벤트 적용되도록 처리. z-index로 인해 아래 셀 호버 안되는것 막음 */
}

.reservationCell-tbody .booking.ui-draggable-dragging ~ .cell-col-group > div:after {
    display: none; /*드래그 중일때는 툴팁 제거 */
}

.reservationCell-tbody .timeLine {
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    height: 2px;
    background: #4dd983;
    z-index: 1;
    opacity: 0.8;
    transform: translateY(-4px); /* 라인두께 + 첫라인 시작 여백 없는 만큼 당김 */
}

.reservationCell-tbody .timeLine.hide {
    display: none;
}

.reservationCell-tbody .booking {
    width: var(--cellWidth);
    height: 300px; /* 높이 스크립트에서 조정됨.*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    border-radius: 8px 8px 0 8px;
    position: absolute;
    cursor: move;
    padding: 20px 0px 0 10px;
    font-weight: 500;
    overflow: hidden;
}

.reservationCell-tbody .booking.z-index-101 {
    z-index: 101;
}

.reservationCell-tbody .booking .tag-user {
    font-size: 9px;
    height: 22px;
    padding: 0 4px;
    margin-bottom: 6px;
    min-width: calc(var(--cellWidth) - 20px);
}

.reservationCell-tbody .booking .tag-user::before {
    width: 12px;
    height: 12px;
}

.reservationCell-tbody .booking.qms {
    background: #a7e4bf;
}

.reservationCell-tbody .booking.app {
    background: #ffd9d0;
}
.reservationCell-tbody .booking.web {
    background: #b4f6ff;
}

.reservationCell-tbody .booking.done {
    opacity: 0.5;
    cursor: default;
}

.reservationCell-tbody .booking.ui-draggable-dragging {
    z-index: 101;
}

.reservationCell-tbody .booking .tit {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 6px;
    text-overflow: ellipsis;
}

.reservationCell-tbody .booking-time {
    font-size: 12px;
}

.reservationCell-tbody .booking-time .time-01 {
    display: block;
    margin-bottom: 5px;
    line-height: 1.4;
}

.reservationCell-tbody .booking-time .time-02 {
    font-size: 18px;
    vertical-align: baseline;
    padding-right: 2px;
    letter-spacing: -1px;
}
/*** E: 예약  ***/

/*** S: 결제 ***/
/* 이용료 결제 우측 사이드 바 컨텐츠 */
.charge-price {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.charge-price .txt-price {
    font-size: 36px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
}

.charge-price .txt-price b {
    font-size: 86px;
    margin-left: 10px;
}

.charge-price .btns {
    display: flex;
    width: 100%;

    gap: 14px 10px;
}

.charge-price .btns .btn {
    flex: 1 1 0;
}

@media all and (max-width: 1079px) {
    .charge-price {
        flex-direction: row;
    }

    .charge-price .btns {
        flex-direction: column;
        max-width: 50%;
    }
}

@media all and (max-width: 799px) {
    .charge-price .txt-price b {
        font-size: 52px;
    }

    .charge-price .btns {
        gap: 8px;
    }
}

/* 정산 - 자동결제, 문자요금 충전 카드 레이아웃 박스  */
.charge-box {
    padding: 0;
    border-top: 1px solid var(--color-primary);
    margin-bottom: 40px;
}

.charge-box .txt-no-data {
    border-bottom: 1px solid #e0e0e0;
}

.charge-box .txt-no-data {
    height: 214px;
}

/* 자동결제 */
.pay-card-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 100px 0;
}

.pay-card-list > li {
    width: 480px;
    max-width: 100%;
    color: var(--fc-gray);
    font-weight: 500;
    font-size: 16px;
}

.pay-card {
    padding: 36px 15%;
    display: flex;
    align-items: center;
    border: 1px solid #adb9c2;
    border-radius: 8px;
    justify-content: center;
}

.pay-card .pay-name {
    font-size: 20px;
    font-weight: 700;
}

.pay-card.on {
    border-color: var(--color-primary);
    background: var(--color-primary-fill);
    color: var(--color-primary);
}

.pay-card i.ico {
    width: 30%;
    max-width: 80px;
    height: 80px;
    background: #87929c;
    margin-right: 10%;
    flex-shrink: 0;
}

.pay-card.on i.ico {
    background: var(--color-primary);
}

.pay-card .txt-box {
    display: flex;
    gap: 8px;
    flex-direction: column;
    flex: 1 1 auto;
}

@media all and (max-width: 800px) {
    .pay-card-list {
        padding: 40px 0;
    }
    .pay-card {
        padding: 20px 10%;
    }

    .pay-card .pay-name {
        font-size: 16px;
    }

    .pay-card i.ico {
        max-width: 60px;
        height: 60px;
        background: #87929c;
    }
}

/* 문자요금 충전 */
.sms-charge-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: 40px;
}

.sms-charge-list li {
    height: 140px;
}

.sms-charge-list .btn-sms-charge {
    background: var(--color-primary-fill);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 20px;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    justify-content: center;
    font-size: 30px;
    font-weight: 300;
}

.sms-charge-list .btn-sms-charge b {
    font-size: 36px;
}

.sms-charge-list .btn-sms-charge::before {
    content: '';
    width: 90px;
    height: 90px;
    display: block;
    mask: url('../images/icon/ico_sms_coin.svg') no-repeat center;
    -webkit-mask: url('../images/icon/ico_sms_coin.svg') no-repeat center;
    background: var(--color-primary);
    opacity: 0.2;
    margin-right: 20px;
    -mask-size: contain;
    -webkit-mask-size: contain;
}

.sms-charge-list .btn-sms-charge:hover {
    color: #6c7883;
    border: 1px solid #adb9c2;
    background: #fff;
}

.sms-charge-list .btn-sms-charge:hover::before {
    background: #212529;
}

.sms-charge-list .btn-sms-charge.selected {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
}

.sms-charge-list .btn-sms-charge.selected::before {
    background: #f6f8f9;
    opacity: 0.6;
}

.sms-charge-list .btn-sms-charge:disabled {
    background: #eceff1;
    border-color: #eceff1;
    color: #d0d7dc;
}

.sms-charge-list .btn-sms-charge:disabled::before {
    background: #d0d7dc;
    opacity: 1;
}

@media all and (max-width: 800px) {
    .sms-charge-list {
        padding: 40px 0 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .sms-charge-list li {
        height: 80px;
    }

    .sms-charge-list .btn-sms-charge {
        font-size: 20px;
        font-weight: 400;
    }

    .sms-charge-list .btn-sms-charge b {
        font-size: 28px;
    }

    .sms-charge-list .btn-sms-charge::before {
        width: 45px;
        height: 45px;
    }
}
/*** E: 결제 ***/

/*** S: 매장정보 ***/
/* 매장 운영 시간 */
.list-opening-hours {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.list-opening-hours li {
    border: 1px solid #adb9c2;
    border-radius: 8px;
    padding: 16px 40px;
    display: flex;
}

.list-opening-hours .day-name {
    font-size: 16px;
    width: 105px;
    flex-shrink: 0;
}

.list-opening-hours .day-time {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.list-opening-hours .time-group {
    justify-content: flex-start;
    width: 100%;
}

@media all and (max-width: 799px) {
    .list-opening-hours {
        margin-top: 10px;
    }
    .list-opening-hours li {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 16px;
    }
}

/* 매장 운영 시간 설정 팝업 */
.peak-hour-group .peak-hour-label {
    min-width: 50px;
}

/* 매장 사진 슬라이드 */
.store-photo-box {
    position: relative;
    margin-top: 20px;
    max-width: 776px;
    width: 100%;
}

.store-search-file .btn {
    width: 776px;
    max-width: 100%;
}

.store-slider {
    overflow: hidden;
    height: 80px;
    margin: 0 52px 0;
}

.store-slider .slick-arrow {
    display: none !important;
}

.store-slider .slick-track {
    display: flex;
}

.store-slide {
    width: 100px !important;
    height: 100%;
    flex: 0 0 auto;
    margin-right: 14px;
}

.store-add-img {
    overflow: hidden;
    position: relative;
    height: 80px;
    width: 100px;
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    background: #f6f8f9;
    cursor: pointer;
}

.store-add-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-photo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    background: url('../images/icon/slide_delete.svg') no-repeat center;
    mix-blend-mode: multiply;
}
.store-add-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    background: var(--color-primary);
}

.slider-btn {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    text-indent: -9999px;
    overflow: hidden;
    top: 20px;
    right: 0;
}
.store-photo-box .slider-prev {
    left: 0;
    background: url('../images/icon/slide_prev.svg') no-repeat center;
}
.store-photo-box .slider-next {
    right: 0;
    background: url('../images/icon/slide_next.svg') no-repeat center;
}

/* 스위치 에 따라 영역 활성화/비활성화 되는 영역 */
.area-disabled {
    color: var(--fc-gray);
}

.area-disabled .select,
.area-disabled .input {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}
/*** E: 매장정보 ***/

/*** S: 회원 ***/
/* 회원관리 - 네임 카드*/
.member-info {
    margin-bottom: var(--marginVer);
}

.member-info dt {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.member-info dd {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
}

.member-info dd .txt-name {
    margin-right: 20px;
}

.member-info dd .tag {
    margin-right: 4px;
}

/* 회원 기본정보 카드 - 슬라이드 */
.member-info-card {
    margin-bottom: 30px;
    overflow: hidden;
    margin-left: -8px;
    margin-right: -8px;
}

.member-info-card .member-slide {
    margin: 0 8px;
}

.member-info-card .card-item {
    background: #87929c;
    border-radius: 20px;
    padding: 30px 40px;
    color: #fff;
    height: 100%;
    width: 100%;
}

.member-info-card .slick-track {
    display: flex;
    min-width: 100%;
}

.member-info-card .tit {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.member-info-card table th {
    text-align: left;
}

.member-info-card table td {
    text-align: right;
}

.member-info-card table th,
.member-info-card table td {
    padding-top: 10px;
    vertical-align: top;
}

.member-info-card .time-group {
    font-size: inherit;
    color: inherit;
    font-weight: 500;
}

.member-info-card .slick-dots {
    padding-top: 26px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.member-info-card .slick-dots li {
    width: 8px;
    height: 8px;
    background: #d0d7dc;
    overflow: hidden;
    border-radius: 50%;
    font-size: 0;
}

.member-info-card .slick-dots li.slick-active {
    background: var(--color-primary);
}

@media all and (max-width: 1679px) {
    .member-info-card .card-item {
        padding: 20px;
    }
}

/* 락커 카드 리스트 */
.locker-card-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    overflow: visible;
}

.locker-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 200px;
    gap: 10px;
    cursor: pointer;
}

@media all and (max-width: 1919px) {
    .locker-card-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media all and (max-width: 1579px) {
    .locker-card-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media all and (max-width: 1280px) {
    .locker-card-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (max-width: 799px) {
    .locker-card-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media all and (max-width: 599px) {
    .locker-card-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

.locker-card .locker-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.locker-card .card-tit {
    display: flex;
    width: calc(100% - 40px);
    align-items: center;
    gap: 4px;
    height: 30px;
}

.locker-card .locker-num {
    font-size: 14px;
    font-weight: 700;
    background: #6c7883;
    color: #fff;
    border-radius: 20px;
    height: 24px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 0;
    width: 62px;
    text-align: right;
}

.locker-card .locker-num:not(:disabled) {
    width: 100%;
    height: 30px;
    background: #1c7e61 url('../images/icon/ico_pencil.svg') no-repeat left 14px center !important;
}

.locker-card .locker-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    flex: 1 1 auto;
    color: var(--fc-gray);
}

.locker-card .locker-name {
    font-size: 30px;
    font-weight: 700;
}

.locker-card .locker-time {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.locker-card-list .btn-menu-toggle {
    position: absolute;
    top: 22px;
    right: 20px;
}

.locker-card-list .layer-menu {
    right: 15px;
    top: 50px;
    z-index: 1;
}

.locker-card-list ~ .txt-no-data {
    height: 370px;
    border-top: 1px solid #d0d7dc;
}

/* 락커 상태별 스타일 변경 */
.locker-card.deactivated {
    border: 2px dashed #d0d7dc;
}

.locker-card.deactivated .locker-msg {
    color: #d0d7dc;
}

.locker-card.deactivated .locker-num {
    background: #d0d7dc;
}

.locker-card .locker-num:disabled {
    pointer-events: none;
}

.locker-card.deactivated .locker-footer .locker-btns {
    opacity: 0.5;
}

.locker-card.activated {
    border: 2px solid var(--color-primary);
}

.locker-card.activated .locker-num {
    background: var(--color-primary);
}

.locker-card.activated .locker-footer .locker-btns {
    border-color: var(--color-primary);
}

.locker-card.activated .locker-footer .locker-btns button {
    color: var(--color-primary);
}

.locker-card.activated .locker-footer .locker-btns button:not(:first-child)::before {
    background: var(--color-primary);
}

.locker-card.activated .locker-btns i.ico {
    background: var(--color-primary);
}

.locker-card.selected {
    background: var(--color-primary-fill);
    border-color: var(--color-primary);
}

/*** E: 회원 ***/

/*** S: 대회 ***/
/* 랭킹 상세/랭킹 인쇄 레이아웃 */
.contents-box.type-ranking {
    padding: 0;
}

.contents-box.type-ranking .article-head {
    padding: 40px;
}

@media all and (max-width: 1079px) {
    .contents-box.type-ranking .article-head {
        padding: 30px 20px;
    }
}

@media all and (max-width: 799px) {
    .contents-box.type-ranking .article-head,
    .contents-box.type-print .article-head {
        padding: 20px 16px;
    }
}

.contents-box.type-print {
    width: 992px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
    flex-grow: 0;
    padding: 40px 0 0;
    background: transparent;
}

.contents-box.type-print .print-box {
    padding: 100px 10.0806%;
    background: #fff;
    width: 100%;
}

@media all and (max-width: 1079px) {
    .contents-box.type-print .print-box {
        padding: 30px;
    }
}

@media all and (max-width: 799px) {
    .contents-box.type-print .print-box {
        padding: 0;
    }

    .contents-box.type-print .print-box .competition-head {
        padding: 20px 16px;
    }

    .contents-box.type-print {
        padding: 0;
    }
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html {
        background: transparent !important;
    }

    body * {
        visibility: hidden;
    }

    .print-box,
    .print-box * {
        visibility: visible;
    }
    .print-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .contents-box.type-print .print-box {
        padding: 30px;
    }
}

/* 랭킹 상세 테이블 */
.tbl-ranking-container {
    overflow: auto; /*  가로 스크롤 OK */
    position: relative;
    /* position: sticky;
  top: 0; */
}

.tbl-ranking-container + .tbl-ranking-container {
    margin-top: var(--marginVer);
}

.tbl-ranking {
    text-align: center;
    table-layout: auto;
    border-collapse: separate;
    border-top: 1px solid #87929c;
    background: #fff;
}

.tbl-ranking thead {
    background: #555f67;
    transition: none;
}

.tbl-ranking col {
    min-width: 30px;
}

.tbl-ranking th {
    background: #555f67;
    border-right: 1px solid #87929c;
    border-bottom: 1px solid #87929c;
    color: #fff;
    font-size: 12px;
    vertical-align: bottom;
}

.tbl-ranking td {
    border-bottom: 1px solid #adb9c2;
    font-weight: 500;
}

.tbl-ranking th,
.tbl-ranking td {
    padding: 16px 5px;
    white-space: nowrap;
    font-weight: 500;
}

.tbl-ranking th.col-group-blank {
    border-right: 0;
    min-width: 60px;
}

.tbl-ranking th.border-group {
    border-right: 2px solid #eceff1;
}

.tbl-ranking th.border-none {
    border-right: 0;
}

.tbl-ranking .bg-total {
    background: #d0d7dc;
    color: #272c30;
    border-color: #d0d7dc;
}

.tbl-ranking .th-label {
    color: #d0d7dc;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #d0d7dc;
}

/* 랭킹 인쇄  테이블 */
.tbl-print {
    text-align: center;
}

.tbl-print thead {
    position: sticky;
    top: 0;
}

@media all and (max-width: 1079px) {
    .tbl-print thead {
        top: var(--headHeight);
    }
}

.tbl-print th,
.tbl-print td {
    padding: 16px 5px;
}

.tbl-print th {
    background: #101214;
    color: #fff;
    font-weight: 700;
}

.tbl-print td {
    border-bottom: 1px solid #adb9c2;
    font-weight: 500;
}

@media all and (max-width: 799px) {
    .tbl-print {
        font-size: 12px;
    }
    .tbl-print th,
    .tbl-print td {
        padding: 16px 5px;
    }
}

/*롱기스트, 니어리스트 맵 선택*/
.competition-map {
    display: flex;
    gap: 20px 40px;
    flex-wrap: wrap;
}

.competition-map .map-item {
    width: 200px;
    height: 298px;
    position: relative;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 14px;
    background: #fff;
    color: #6c7883;
    font-size: 20px;
}

.competition-map .map-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.competition-map .img-map {
    flex: 1 1 auto;
    width: 100%;
    height: 100px;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.competition-map .img-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: 0.1s;
}

.competition-map .map-radio {
    position: absolute;
    border: 1px solid green;
    left: 0;
    top: 0;
    appearance: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    border: 1px solid #d0d7dc;
    border-radius: 14px;
}

.competition-map label {
    white-space: nowrap;
    padding: 0 20px 0 10px;
    position: absolute;
    top: 26px;
    left: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 0 18px 18px 0;
    transition: 0.2s;
    z-index: 1;
    font-weight: 700;
}

.competition-map .map-item:first-child label {
    left: 50%;
    transform: translateX(-50%);
    border-radius: 18px;
}

.competition-map label::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #e9e9e9 url(../images/icon/ico_checkbox.svg) no-repeat;
    transition: background 0.2s;
    flex-shrink: 0;
    background-position: left 3px top 2px;
    /* transition: all 0.1s; */
}

.competition-map .map-item .map-radio:checked {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 1px 1px var(--color-primary);
}

.competition-map .map-item .map-radio:checked ~ label {
    color: var(--color-primary);
}

.competition-map .map-item .map-radio:checked ~ label::before {
    background-color: var(--color-primary);
}

.competition-map .map-item .map-radio:checked ~ .img-map img {
    filter: grayscale(0%);
    opacity: 1;
}

.competition-map .map-item .map-radio:checked ~ .map-footer {
    background: var(--color-primary);
    color: #fff;
}

.competition-map .map-footer {
    background: #eceff1;
    padding: 10px 16px;
    margin-top: auto;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    flex-shrink: 0;
    /* transition: 0.2s; */
    white-space: nowrap;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.competition-map .map-footer > div {
    display: flex;
    align-items: center;
}

.competition-map .map-footer > div b {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
}

@media all and (max-width: 1679px) {
    .competition-map {
        gap: 8px;
    }

    .competition-map .map-item {
        width: 140px;
        height: 206px;
    }

    .competition-map .img-map {
        border-radius: 10px 10px 0 0;
    }

    .competition-map label {
        top: 18px;
        height: 26px;
        font-size: 14px;
        padding-right: 12px;
    }

    .competition-map label::before {
        width: 16px;
        height: 16px;
        background-position: center;
        background-size: 13px;
    }

    .competition-map .map-radio {
        border-radius: 10px;
    }

    .competition-map .map-footer {
        padding: 8px 10px;
        font-size: 10px;
        border-radius: 0 0 10px 10px;
    }

    .competition-map .map-footer > div b {
        font-size: 10px;
    }
}

@media all and (max-width: 1079px) {
    .competition-map .map-item {
        width: 100px;
        height: 180px;
    }

    .competition-map .img-map {
        border-radius: 8px 8px 0 0;
    }

    .competition-map label {
        height: 18px;
        font-size: 10px;
        top: 12px;
        padding: 0 10px 0 4px;
    }

    .competition-map label::before {
        width: 12px;
        height: 12px;
        background-position: center;
        background-size: 10px;
    }

    .competition-map .map-radio {
        border-radius: 8px;
    }

    .competition-map .map-footer {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 6px 10px;
        border-radius: 0 0 8px 8px;
    }

    .competition-map .map-footer > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .competition-map .map-footer > div b {
        font-size: 10px;
    }
}

/* 매장 대회 리스트 row 별 상태 */
.tbl-list .tr-ready .time-group .start-time span,
.tbl-list .tr-done .time-group .start-time span {
    border-color: #6c7883;
    color: #6c7883;
    background: #f4fcf7;
    opacity: 0.5;
}

.tbl-list .tr-ready .time-group .end-time span,
.tbl-list .tr-done .time-group .end-time span {
    background: #6c7883;
}

/* 종료된 대회 Row */
.tbl-list .tr-done,
.tbl-list .tr-done .time-group {
    color: #b6bcc1;
}

.tbl-list .tr-done .time-group .start-time span,
.tbl-list .tr-done .time-group .end-time span {
    opacity: 0.5;
}

.tbl-list .tr-done .fc-gray {
    color: #b6bcc1 !important;
}

/* 대회등록 > 행운순위 input 그룹 */
.lucky-input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lucky-input-group + .lucky-input-group {
    margin-top: 12px;
}

/* 대회등록 > 대회 기간 */
.competition-period {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    vertical-align: middle;
    max-width: 100%;
}

.competition-period > .inline-group {
    /* flex: 1 1 auto; */
}

@media all and (max-width: 799px) {
    .competition-period {
        flex-direction: column;
    }

    .competition-period .txt-unit {
        display: none;
    }

    .competition-period .inline-group > .select {
        flex: 1 1 auto;
    }
}
/* 대회등록 > 랭킹 산정 옵션 */
.ranking-option {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    vertical-align: middle;
    max-width: 100%;
}

.ranking-option .ranking-group-select,
.ranking-option .ranking-group-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ranking-group-select {
    margin-right: 20px;
}

@media all and (max-width: 1679px) {
    .ranking-option .select + .txt-unit {
        display: none;
    }

    .ranking-option .ranking-group-switch .fc-gray {
        display: none;
    }
}

@media all and (max-width: 499px) {
    .ranking-option .ranking-group-select {
        margin-right: 0;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }

    .ranking-option .txt-unit {
        display: none;
    }
}
/*** E: 대회 ***/

/**************************************
S: 개별화면 스타일
/**************************************/