@charset "utf-8";

:root {
    --text-01: #000;
    --text-02: #B3B5B8;
    --text-03: #969696;
    --text-04: #B3B3B3;
    --text-05: #757575;
    --text-06: #888888;
    --text-07: #C0C0C0;
    --text-08: #333333;
    --text-09: #1E1E1E;
    --text-10: #6D6D6D;
    --text-placeholder: #B2B2B2;
    --text-disabled: #969696;
    --text-title: #777bba;
    --desc-text: #A9A7A7;
    --text-desc: #A9A7A7;
    --text-point: #E57A7A;
    --text-no: #6593C7;

    --bg-01: #fff;
    --bg-02: #f8f8ff;
    --bg-03: #F8F7F3;
    --bg-04: #777bba;
    --bg-04-hover: #5f63a0;
    --bg-04-border: #4c50a3;
    --bg-05: #E8E9FB;
    --bg-06: #F8F8F8;
    --bg-07: #D6D5D5;
    --bg-08: #E4E4E4;
    --bg-08-hover: #CFCFCF;
    --bg-08-border: #D6D6D6;
    --bg-09: #D5E0EE;
    --bg-10: #B2B2B2;
    --bg-11: #F5F5F5;
    --bg-12: #F3F3F3;
    --bg-13: #E2E3FF;
    --bg-13-hover: #C6C8FF;
    --bg-14: #FAFAFA;
    --bg-15: #FBFBFB;
    --bg-16: #F3F3FF;
    --bg-table-header: #E9E8E8;
    --bg-table-line: #CFCFCF;
    --bg-disabled: #E9E8E8;

    --border-01: #E9E9E9;
    --border-02: #B3B3B3;
    --border-03: #C9B4E4;
    --border-04: #DBDBDB;
    --border-input: #E9E8E8;

    --focused: #4c50a3;
    --shadow-01: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow-02: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

    --main-padding: 15px;
    --main-width: 500px;

    --help: #4a90e2;
    --info: #e88a8a;
    --error: #cc3300;
    --warning: #ffcc00;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,body {
    font-family: 'Pretendard', sans-serif;
    font-size: min(12pt, max(17px, 3.4vw));
    color: var(--text-01);
    line-height: 1.5em;
    background-color: #f5f5f5;
    min-height: 100svh;
}

a, a:hover, a:active, a:visited {
    text-decoration: none;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
*::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.1);
}
*::-webkit-scrollbar-thumb{
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
}
*::-webkit-scrollbar-thumb:hover{
    background: rgba(0,0,0,0.4);
    width: 7px;
    height: 7px;
}
*::-webkit-scrollbar-thumb:active{
    background: rgba(0,0,0,.9);
    width: 7px;
    height: 7px;
}


strong {
    font-weight: 600;
}

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

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

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

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

.null {
    color: var(--text-disabled) !important;
}

.none {
    color: var(--text-placeholder) !important;
}

.default {
    color: var(--text-01) !important;
}

.hidden {
    display: none !important;
}

.justify_right {
    justify-content: right !important;
}

.border_line {
    border: 1px solid var(--border-input);
}

.full_width {
    width: 100% !important;
}

.rotate {
    transform: rotate(180deg);
}

.justify {
    text-align: justify !important;
}

input[type="file"] {
    display: none;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], select, textarea  {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1em;
    line-height: 1em;
    padding: .5em .75em;
    border: 1px solid var(--border-input);
}

input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, 
input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="datetime-local"]::placeholder, 
input[type="time"]::placeholder, input[type="url"]::placeholder, textarea::placeholder {
    font-size: .875rem;
    color: var(--text-placeholder);
    text-align: left;
}

input[type="submit"].disabled, input[type="submit"].disabled:hover,
input[type="button"].disabled, input[type="button"].disabled:hover, 
select.disabled:hover, option.disabled:hover, textarea.disabled:hover {
    background-color: var(--bg-disabled) !important;
    color: var(--text-disabled) !important;
    border: 1px solid var(--bg-disabled) !important;
}
input[type="submit"].disabled:focus, input[type="submit"].disabled:focus-visible,
input[type="button"].disabled:focus, input[type="button"].disabled:focus-visible, 
select:focus, select:focus-visible {
    outline: 1px solid var(--bg-03) !important;
}

input[type="submit"].done, input[type="button"].done {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1.125rem;
    line-height: 1em;
    padding: 1rem 0;
    color: #fff;
    background-color: var(--bg-04);
    border: 1px solid var(--bg-04);
    letter-spacing: .02em;
    border-radius: min(10px, max(5px, 2vw));
}
input[type="submit"].done:hover, input[type="button"].done {
    background-color: var(--bg-04-hover);
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus, select:focus, textarea:focus,
input[type="text"]:focus-visible, input[type="tel"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="number"]:focus-visible,
input[type="date"]:focus-visible, input[type="datetime-local"]:focus-visible, input[type="time"]:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="url"]:focus, input[type="url"]:focus-visible,
input[type="submit"].done:focus, input[type="submit"].done:focus-visible,
input[type="button"].done:focus, input[type="button"].done:focus-visible {
    outline: 1px solid var(--bg-04-border);
    outline-offset: 1px;
}
select, option {
    color: #000;
    background-color: #fff;
}


/* 커스텀 채크박스, 라디오버튼 */
.my_checkbox, .my_radio {
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
}
.my_checkbox > input[type="checkbox"], .my_radio > input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-block;
    width: 0px;
    height: 1px;
}
.my_checkbox > img, .my_radio > img {
    width: auto;
    height: 1.5em;
}
.my_checkbox.disabled, .my_radio.disabled {
    pointer-events: none;
    opacity: 0.5;
    border-color: var(--bg-disabled);
}

/* 커스텀 select */
.my_select {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.my_select > select {
    -webkit-appearance: none; /* Chrome, Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 표준 */
    padding-right: 2em;
}
.my_select > img {
    position: absolute;
    right: .5em;
    top: 50%;
    width: auto;
    height: 75%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
    pointer-events: none;
}
.my_select.my_radio.disabled {
    pointer-events: none;
    opacity: 0.5;
    border-color: var(--bg-disabled);
}
.my_select.my_radio.disabled + img {
    pointer-events: none;
    opacity: 0.5;
}

/* 날짜. 시간 입력 */
.my_date, .my_time {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.my_date:focus-within, .my_time:focus-within {
    outline: 2px solid var(--focused);
}
.my_date > input[type=date], .my_time > input[type=time] {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    -webkit-appearance: auto;
    appearance: auto;
}
.my_date > input[type=text], .my_time > input[type=text] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    padding-right: 2em;
}
.my_date > a, .my_time > a {
    position: absolute;
    top: 50%;
    right: .5em;
    width: auto;
    height: 70%;
    transform: translateY(-50%);
    z-index: 3;
}
.my_date > a > img, .my_time > a > img {
    width: auto;
    height: 100%;
}
.my_date > a.safari, .my_time > a.safari {
    pointer-events: none;
}
.my_date > input[type=date].safari, .my_time > input[type=time].safari {
    text-align: left;

    -webkit-appearance: none;
    appearance: none;

    background-color: transparent;
    padding-left: 0;
    padding-right: 2em;     /* 아이콘 공간 */

    color: #000;
    height: 2.5em;
}

/* 토글뷰 패스워드 */
.my_password {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.my_password > input {
    display: block;
    padding-right: 2em;
}
.my_password a {
    position: absolute;
    right: .5em;
    top: 50%;
    width: auto;
    height: 75%;
    transform: translateY(-50%);
    z-index: 1;
}
.my_password a > img {
    width: auto;
    height: 100%;
}

/* 기록 없음 */
.no_records {
    display: flex;
    width: 100%;
    aspect-ratio: 4/1;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5em;
}
.no_records > img {
    display: block;
    width: min(50px, max(45px, 10vw));
    height: auto;
}
.caption {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    font-size: .875em;
    line-height: 1.5rem;
    position: relative;
}


.email_box {
    display: flex;
    width: 100%;
    height: auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}
.email_box > input, .email_box > div {
    flex: content;
}
.email_box > .host_input {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
}
.email_box > .host_input > input {
    padding-right: 2.25em;
}
.email_box > .host_input > a {
    z-index: 1;
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    right: .75em;
    top: 50%;
    transform: translateY(-50%);
}
.email_box >  .host_input > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이메일 호스트 선택 팝업 */
#host_popup {
    display: block;
    position: absolute;
    width: min(250px, 50vw);
    min-width: 150px;
    height: auto;
    aspect-ratio: .80;
    background-color: var(--bg-01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
#host_popup > .content {
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}
#host_popup > .content > .host_list {
    display: grid;
    width: 100%;
    height: auto;
    border-top: 1px solid var(--border-01);
}
#host_popup > .content > .host_list > * {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1.125rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-01);
    color: #000;
}
#host_popup > .content > .host_list > *:hover {
    background-color: var(--bg-02);
}

#f_clipbord {
    position: absolute;
    left: -50px;
    width: 2em;
}

/* 전체 래퍼 */
#app_wrap {
    width: 100%;
    max-width: var(--main-width);
    min-height: 100svh;
    background-color: var(--bg-02);
    margin: 0 auto;
    position: relative;
}
/*
#app_wrap {
    width: 100%;
    max-width: var(--main-width);
    min-height: 100svh;
    background-color: var(--bg-02);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
*/
/* 팝업 공통 */
.alert_popup {
    display: none;
    position: absolute;
    width: min(90%, 450px);
    height: auto;
    border: 0; 
}

/* 헤더 */
header {
    display: block;
    width: 100%;
    height: 60px;
    background-color: var(--bg-02);
    position: sticky;
    z-index: 5;
    top: 0;
    padding-bottom: 5px;
}
header .header_cover {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--bg-01);
    position: relative;
}
header .header_inner {
    width: 100%;
    height: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 7; 
}
header .logo {
    display: block;
    width: auto;
    height: 100%;
    transform: scale(1.2) translateX(10%);
}
header .logo img {
    width: auto;
    height: 100%;
}
header .header_left {
    display: flex;
    width: auto;
    height: 100%;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: left;
    z-index: 7;
}
header .header_right {
    display: flex;
    width: auto;
    height: 100%;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    justify-content: right;
    z-index: 7;
}
header .header_left a, header .header_right a {
    display: block;
    width: auto;
    height: 100%;
    font-size: .875em;
}
#top_menu_btn {
    display: inline-flex;
    width: auto;
    height: min(30px, max(28px, 6vw));
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 1em;
    gap: .25em;
    line-height: 1em;
    border-radius: min(15px, max(5px, 3vw));
}
#top_second_menu_btn {
    display: inline-flex;
    width: auto;
    height: min(25px, max(28px, 5vw));
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    gap: .25em;
    line-height: 1em;
}
header .header_left a img, header .header_right a img {
    width: auto;
    height: 100%;
}
#top_menu_btn img.btn_img {
    width: auto;
    height: 1em;
}

header .header_middle {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    font-size: 1.3125rem;
    font-weight: 500;
    z-index: 5;
    background-color: transparent;
}

footer {
    display: block;
    width: 100%;
    padding: 20px;
    text-align: center;
    line-height: 1.75em;
}
footer span {
    white-space: nowrap;
}

/* 텍스트 줄임 */
.shorten {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 더보기 버튼 */
.more_btn {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--main-padding) 0;
    line-height: 1em;
    text-align: center;
    background-color: var(--bg-01);
    border-radius: 5px;
    box-shadow: var(--shadow-02);
    color: var(--text-02);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 20px;
    letter-spacing: .07em;
}
.more_btn:hover {
    color: var(--text-01);
    box-shadow: var(--shadow-01);
    transform: scale(1.03);
    transition: all .2s ease-in-out;
}

/* 로그인 회원 정보 */
.logined_user_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    background-color: var(--bg-03);
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 300;
    position: relative;
}
.logined_user_info .member_info {
    font-size: 1.125rem;
    font-weight: 500;
}
.logined_user_info > .point_info {
    text-align: right;
    color: var(--text-01);
}
.logined_user_info > .user_level {
    display: block;
    width: fit-content;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1em;
    color: var(--text-01);
}
.logined_user_info img {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 5px;
}

/* 흐린 버튼 */
.my_btn {
    display: inline-block;
    padding: .5em 1em;
    color: var(--text-03);
    border: 1px solid var(--text-03);
    border-radius: 1em; /*min(15px, max(5px, 3vw));*/
    line-height: 1em;
}
.my_btn2 {
    display: inline-block;
    border: 1px solid var(--bg-10);
    line-height: 1em;
    color: var(--text-05);
    padding: .5em;
}
.my_btn3 {
    display: inline-block;
    background-color: var(--border-input);
    border: 1px solid var(--bg-10);
    line-height: 1em;
    color: var(--text-06);
    padding: .5em;
}
.my_btn:hover, .my_btn2:hover {
    background-color: var(--text-02);
    color: var(--bg-01);
    text-decoration: none;
    transition: all .3s;
}
.my_btn4 {
    display: inline-block;
    line-height: 1em;
    color: var(--text-08);
    padding: .5em .25em;
}
.my_btn4:hover {
    outline: 1px solid var(--bg-08-border);
    background-color: var(--bg-08);
    color: var(--text-01);
    text-decoration: none;
    transition: all .3s;
}
/* 메인 메뉴 배경 */
#top_menu_wrap {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    overflow-y: hidden;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
}
#top_menu_wrap > div {
    width: 100%;
    max-width: var(--main-width);
    height: 100%;
    overflow-y: hidden;
}

/* 메인 메뉴 */
#top_menu {
    width: 100%;
    height: 100%;
    background-color: var(--bg-01);
    overflow-y: auto;
}
#top_menu > .top_menu_header {
   display: block;
   width: 100%;
   height: auto;
   background-color: var(--bg-02);
   position: sticky;
   top: 0; 
   padding-bottom: 5px;
}
#top_menu > .user_info_cover {
   display: block;
   width: 100%;
   height: auto;
   background-color: var(--bg-02);
   padding-bottom: 5px;
}
#top_menu .top_menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;;
    height: min(68px, max(55px, 14vw));
    padding: 0 20px;
    background-color: var(--bg-01);
}
#top_menu .top_menu .left_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#top_menu .top_menu .right_area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#top_menu .top_menu a {
    display: block;
    width: 30px;
    height: 30px;
}
#top_menu .top_menu a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#top_menu .user_info_area {
    display: grid;
    width: 100%;
    height: auto;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 10px;
    background-color: var(--bg-01);
}
#top_menu .user_info_area > .user_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}
#top_menu .user_info_area > .user_info .user_name {
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--text-01);
}
#top_menu .user_info_area > .user_info .user_name > span {
    font-weight: 500;
}
#top_menu .user_info_area > .user_info .account_info > p {
    font-weight: 300;
    font-size: .875rem;
}
#top_menu .user_info_area > .user_info .account_info > p.account {
    font-size: 1.25rem;
    font-weight: 500;
}
#top_menu > .menu_area, #admin_menu > .menu_area {
    width: 100%;
    height: auto;
    padding: 30px 20px 0;
    line-height: 1em;
}

#top_menu > .menu_area > .menu_title, #admin_menu > .menu_area > .menu_title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-01);
}
#top_menu > .menu_area > ul, #admin_menu > .menu_area > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;
    list-style: none;
    padding: 30px 0;
    row-gap: 30px;
}
#top_menu > .menu_area > ul > li, #admin_menu > .menu_area > ul > li {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#top_menu > .menu_area > ul a, #admin_menu > .menu_area > ul a {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1em;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--text-01);
}

/* 에러, 확인 팝업 */
#error_popup, #confirm_popup {
    border-radius: min(20px, max(5px, 4vw));
    background-color: #fff;
    min-height: min(220px, max(44vw, 200px));
    max-height: min(550px, max(110vw, 500px));
    width: 90%;
    max-width: 450px;
    min-width: 300px;
    height: auto;
}

.alert_popup > .content {
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    padding: min(40px, max(8vw, 20px)) 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
}
.alert_popup > .content > * {
    width: 100%;
    height: auto;
}
.alert_popup .msg_title {
    font-size: 1.25rem;
    font-weight: 600;
}
.alert_popup .msg_text {
    font-size: 1rem;
    line-height: 1.5em;
    word-break: keep-all;
}
.alert_popup > .close {
    position: absolute;
    display: block;
    width: min(25px, max(5vw, 23px));
    height: auto;
    top: min(10px, max(2vw, 5px));
    right: min(10px, max(2vw, 5px));
    z-index: 10;
}
.alert_popup > .close > img {
    width: 100%;
    height: auto;
}
.alert_popup .ok_btn_area {
    display: block;
    width: 100%;
    height: auto;
}
.alert_popup .ok_cancel_btn_area {
    display: flex;
    width: 100%;
    height: auto;
    padding: 0 min(30px, max(6vw, 15px));
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .75em;
}

/* 팝업 확인 버튼 */
.alert_popup .ok_btn_area > a, .alert_popup .ok_btn_area > input {
    display: block;
    margin: 0 auto;
    padding: .5rem 0;
    line-height: 1em;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1.6875rem;
    text-decoration: none;
    text-align: center;
    width: min(240px, max(48vw, 200px));
}

/* 팝업 예, 아니오 버튼 */
.alert_popup .ok_cancel_btn_area > a, .alert_popup .ok_cancel_btn_area > input {
    display: block;
    width: 100%;
    padding: .5rem 0;
    line-height: 1em;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1.6875rem;
    text-decoration: none;
    text-align: center;
}

.ok {
    color: #fff;
    background-color: var(--bg-04);
    border: 1px solid var(--bg-04);
}
.ok:hover {
    background-color: var(--bg-04-hover);
    transition: all .3s;
}
.ok:focus, .ok:focus-visible {
    outline: 2px solid var(--bg-04-border);
}

.cancel {
    color: #000;
    background-color: var(--bg-01);
    border: 1px solid var(--bg-08);
}
.cancel:hover {
    background-color: var(--bg-08-hover);
    transition: all .3s;
}
.cancel:focus, .cancel:focus-visible {
    outline: 2px solid var(--bg-08-border);
}

/* 메인 Cancel and OK */
main .cancel_ok_box {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    gap: .5em;
    flex-wrap: nowrap;
    padding-top: 20px;
}

main .cancel_ok_box > * {
    display: block;
    height: auto;
    font-size: 1.125rem;
    line-height: 1em;
    width: 100%;
    letter-spacing: .02em;
    border-radius: min(25px, max(15px, 5vw));
    padding: 1rem 0;
    text-align: center;
}


#bg_popup {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

/* 바닥 고정 확인 */
.submit_box {
    display: block;
    width: 100%;
    padding-bottom: 10px;
    position: sticky;
    bottom: 0;
}

/* 관리자로 로그인했습니다. */
#admin_alert_box {
    display: block;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    z-index: 7;
}
#admin_alert_box > div {
    width: 100%;
    max-width: var(--main-width);
    margin: 0 auto;
    height: auto;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .8rem;
    line-height: 2em;
    padding: 0 .5em;
}


/* 페이징 네비 */
.pagination {
    display: block;
    width: 100%;
    position: relative;
    padding: 1em 0;
    text-align: center;
}

.pagination a {
    display: inline-block;
    position: relative;
    margin: 0 .1em;
    padding: .25em .1em;
    width: fit-content;
    min-width: 2.5em;
    border: 1px solid var(--bg-08-border); 
    background-color: var(--bg-01) ;
    font-size: .825em;
    text-align: center;
    font-weight: 400;
    color: #000;
}

.pagination a:hover {
    border-width: 2px; 
    background-color: var(--bg-07);
}

.pagination a.active {
    background-color: var(--bg-08-hover);
    border: 2px solid var(--bg-08); 
}

/* iframe 팝업 */
.iframe_popup > div {
    display: flex;
    position: absolute;
    flex-direction: column;
    background-color: var(--bg-01);
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    width: 100%;
    height: 100%;
}

.iframe_popup .popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    width: 100%;
    height: 50px;
}
.iframe_popup .popup_header .title {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-title);
    font-size: 1.125rem;
    line-height: 1em;
}
.iframe_popup .popup_header .close_btn {
    display: block;
    width: 24px;
    height: 24px;
}
.iframe_popup .popup_header .close_btn img {
    display: inline-block;
    width: 100%;
    height: auto;
}
.iframe_popup .popup_content {
    flex-grow: 1;
    width: 100%;
    height: 100%;
}
.iframe_popup .popup_content iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/*  I 진행중, P 주문완료', R '배송준비중', F '배송완료' */
.order_state_I, .order_state_P, .order_state_R, .order_state_F {
    border: 1px solid  #0A6EBE;
    background-color: #F0ECFF;
    color: #5B3EC7; 
}
.order_state_I:hover, .order_state_P:hover, .order_state_R:hover, .order_state_F:hover {
    background-color: #0A6EBE !important;
    color: #F0ECFF !important;
}
/* W  입금대기 */
.order_state_W {
    border: 1px solid  #C27A00; 
    background-color: #FFF7E5;
    color: #C27A00;
}
.order_state_W:hover {
    background-color: #C27A00 !important;
    color: #FFF7E5 !important;
}
/* 'I' => '진행중', 'C' => '주문취소', 'E' => '주문실패' */
.order_state_C, .order_state_E {
    border: 1px solid #D64545; 
    background-color: #FDEEEF;
    color: #B8002E;
}
.order_state_C:hover, .order_state_E:hover {
    background-color: #D64545;
    color: #FDEEEF;
}

/* 탭형 서브 메뉴*/
.bugo_sub_menu {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.bugo_sub_menu > * {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1.125em;
    line-height: 1em;
    padding: 1em 0 .25em;
    text-align: center;
    color: var(--text-07);
    border-bottom: 2px solid var(--text-07);
}
.bugo_sub_menu > .on, .bugo_sub_menu > *:hover {
    color: var(--text-title);
    border-bottom: 2px solid var(--text-title);
}

/* 분류 탭 버튼 리스트 */
#category_scroll {
  position: relative;
  margin-bottom: 1em;
  overflow-y: visible;
}
#category_scroll > .bottom_line {
    position: relative;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background-color: var(--text-07);
    z-index: 3;
}
#category_scroll > .categories {
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  gap: 1.5em;
  padding: 0 .5em;
  scrollbar-width: none;
  scroll-behavior: smooth;
  z-index: 1;
}

#category_scroll > .categories * {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

#category_scroll > .categories::-webkit-scrollbar {
  display: none;
}

#category_scroll > .categories > span {
  font-size: 1.25em;
  padding: .25em 0;
  color: var(--text-01);
  position: relative;
  white-space: nowrap;

}
#category_scroll > .categories > a {
  background: none;
  border: none;
  font-size: 1.1em;
  padding: .25em 0;
  color: var(--text-07);
  white-space: nowrap;
  transition: color 0.3s ease;
  overflow-y: visible;
}

#category_scroll > .categories > a:hover {
  color: #000;
  font-weight: bold;
}

#category_scroll > .categories > a.active {
  color: #000;
  font-weight: bold;
  border-bottom: 3px solid var(--text-title);
  scale: 1.01;
}
#category_scroll > .arrow {
  position: absolute;
  top: 1%;
  width: 1.6em;
  height: 98%;
  border: none;
  background-color: var(--bg-01);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.3s ease;
}

#category_scroll > .arrow img {
    width: 100%;
    height: auto;
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
}

#category_scroll > .arrow:hover > img {
  background-color: rgba(0,0,0,0.3);
}

#category_scroll > .arrow.left {
  left: 0;
  padding-right: .25em;
}

#category_scroll > .arrow.right {
  right: 0;
  padding-left: .25em;
}

@media (max-width:510px) {
    *::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    *::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
    }
    *::-webkit-scrollbar-thumb{
        background: rgba(0,0,0,0.2);
    }
    *::-webkit-scrollbar-thumb:hover{
        background: rgba(0,0,0,0.4);
        width: 5px;
        height: 5px;
    }
    *::-webkit-scrollbar-thumb:active{
        background: rgba(0,0,0,.9);
        width: 5px;
        height: 5px;
    }

    select::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
    select::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(0,0,0,0.1);
    }
    select::-webkit-scrollbar-thumb{
        border-radius: 3px;
        background: rgba(0,0,0,0.2);
    }
    select::-webkit-scrollbar-thumb:hover{
        background: rgba(0,0,0,0.4);
        width: 7px;
        height: 7px;
    }
    select::-webkit-scrollbar-thumb:active{
        background: rgba(0,0,0,.9);
        width: 7px;
        height: 7px;
    }

}