@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");



:root {
    --font-color: #000000;
    --main-background: #ffffff;
    --highlight: #0068c9;
    --highlight-font-color: #ffffff;
    --category-item: #ffffff;
    --category-split: #ffffff;
    --item-split: #cfcfcf;
    --item-background: #f8f8f8;
    --item-left: #0068c9;
    --item-border: #5757575e;
    --item-hover-background: #fefefe;
    --grad-one: #ff3cf7;
    --grad-two: #4b4eff;
    --card-background: #ffffff;
    --card-split: #c4c4c4;
    --card-shop-background: #28293b;
    --card-shop-active: #232329;
    --table-top: #f02965;
    --table-bottom: #3d3c50;
    --red: #f03333;
    --red-active: #d42e2e;
    --green: #1aa30e;
    --green-active: #386d23;
    --default: #0084ff;
    --default-active: #0068c9;
  }


  @import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic&family=Poppins:wght@500&display=swap');

  pre {
    font-family: 'Pretendard', sans-serif;

  }

            /* 공지사항 텍스트 박스 스타일 */
            .notice-box {
                max-width: 100%; /* 부모 요소를 넘지 않도록 설정 */
                word-wrap: break-word; /* 긴 단어 줄바꿈 */
                overflow-wrap: break-word; /* 표준 줄바꿈 */
                white-space: pre-wrap; /* 공백 및 줄바꿈 유지 */
                font-size: 18px; /* 기본 폰트 크기 */
                line-height: 1.5; /* 줄 간격 */
                padding: 10px; /* 내부 여백 */
                box-sizing: border-box; /* 박스 크기 계산 포함 */
                text-align: center; /* 텍스트 중앙 정렬 */
              }
            
              /* pre 태그의 자동 줄바꿈 */
              .notice-text {
                white-space: pre-wrap; /* 공백 및 줄바꿈 유지 */
                word-wrap: break-word; /* 긴 단어는 줄바꿈 */
                overflow-wrap: break-word; /* 긴 단어는 줄바꿈 */
                text-align: center; /* 텍스트 중앙 정렬 */
              }
            
              /* 반응형 텍스트 크기 */
              @media (max-width: 768px) {
                .notice-box {
                  font-size: 16px; /* 모바일 화면에서 폰트 크기 감소 */
                }
              }
            
              /* 이미지 컨테이너 스타일 */
              .image-container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap; /* 이미지가 화면을 벗어나지 않도록 줄바꿈 */
                gap: 20px; /* 이미지 사이 간격 */
                margin-top: 20px; /* 상단 여백 */
              }
            
              /* 개별 이미지 박스 스타일 */
              .image-box {
                max-width: 100%; /* 이미지가 부모 컨테이너를 넘지 않음 */
                flex: 1 1 calc(50% - 20px); /* 2개의 이미지를 나란히 배치 */
                box-sizing: border-box;
              }
            
              .image-box img {
                width: 100%; /* 이미지가 박스를 넘지 않도록 설정 */
                height: auto; /* 이미지 비율 유지 */
                border: 1px solid #ccc; /* 테두리 */
                border-radius: 5px; /* 모서리 둥글게 */
              }
            
              /* 반응형 이미지 레이아웃 */
              @media (max-width: 768px) {
                .image-box {
                  flex: 1 1 100%; /* 작은 화면에서 이미지가 한 줄에 표시 */
                }
              }


  .float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #20c997;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    z-index: 1000;
  }

  .my-float {
    margin-top: 22px;
  }



.button.blue:hover {
    opacity: 0.9;
    transform: scale(1.02);
    transition: all 0.2s ease;
}
    .admin-grade {
      color: red;
      font-weight: bold;
    }
    .default-grade {
      color: var(--highlight);
      font-weight: bold;
    }


    html, body {
            height: 100%;
            font-family: "Pretendard";
            margin: 0;
            padding: 0;
        }

::-moz-selection{
    color:var(--highlight-font-color);
    background-color:var(--highlight)
}
::selection{
    color:var(--highlight-font-color);
    background-color:var(--highlight)
}
*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline:0
}
html,body{
    height:100%
}
html{
    font-family:"Pretendard"
}
body{
    color:var(--font-color);
    background:var(--main-background);
    padding:0;
    margin:0;
    border:0
}
div.button{
    display:inline-block;
    font-weight:600;
    line-height:30px;
    height:30px;
    padding:0 12px;
    margin:0 5px;
    border-radius:.2em;
    font-size:.9em;
    color:#fff;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-transition:.2s;
    transition:.2s
}
@media(max-width:1024px){
    div.button{
        line-height:25px;
        height:25px;
        padding:0 8px;
        font-size:.8em
    }
}
div.button.yellow{
    background-color:#ffc400;
    color:#000
}
div.button.blue{
    background-color:var(--default)
}
div.button.blue:active{
    background-color:var(--default-active)
}
div.button.cyan{
    background-color:#17a2b8
}
div.button.green{
    background-color:var(--green)
}
div.button.green:active{
    background-color:var(--green-active)
}
div.button.red{
    background-color:var(--red)
}
div.button.red:active{
    background-color:var(--red-active)
}
div.button.black{
    background-color:#222;
    color:#fff
}
div.button.black:active{
    background-color:#000
}
div.button.click{
    cursor:pointer
}
div.button.disabled{
    pointer-events:none;
    cursor:default;
    background-color:#888!important
}
ul.nav{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    display:inline-block;
    padding:0;
    margin:0;
    list-style:none
}
ul.nav li{
    display:inline-block;
    padding:0 10px;
    cursor:pointer
}
ul.nav li:after{
    display:block;
    height:2px;
    margin-right:10px;
    content:""
}
ul.nav li:not(.highlight):hover:after{
    background-color:var(--highlight);
    -webkit-animation:showSlow 300ms cubic-bezier(.26,0,.06,1) 0ms forwards;
    animation:showSlow 300ms cubic-bezier(.26,0,.06,1) 0ms forwards
}
ul.nav li.highlight:after{
    width:100%;
    background-color:var(--highlight)
}
ul.nav li.dropdown{
    position:relative
}
ul.nav li.dropdown div.content{
    display:none;
    position:absolute;
    -webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);
    box-shadow:0 8px 16px 0 rgba(0,0,0,.2);
    z-index:1
}
ul.nav li.dropdown div.content>a{
    display:block;
    text-decoration:none;
    width:240px;
    padding:0 10px;
    color:var(--font-color);
    background-color:var(--category-item);
    border-left:3px solid var(--category-item);
    border-bottom:1px solid var(--category-split)
}
ul.nav li.dropdown div.content>a:hover,ul.nav li.dropdown div.content>a.highlight{
    border-left:3px solid var(--highlight);
    background-color:var(--item-hover-background)
}
ul.nav li.dropdown:hover div.content{
    display:block
}
@-webkit-keyframes showSlow{
    from{
        width:0
    }
    to{
        width:100%
    }
}
@keyframes showSlow{
    from{
        width:0
    }
    to{
        width:100%
    }
}
@-webkit-keyframes hideSlow{
    from{
        width:100%
    }
    to{
        width:0
    }
}
@keyframes hideSlow{
    from{
        width:100%
    }
    to{
        width:0
    }
}
input{
    -moz-appearance:none;
    appearance:none;
    -webkit-appearance:none;
    border-radius:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-family:"Pretendard";
    display:block;
    width:100%;
    padding:10px;
    background-color:var(--card-background);
    color:var(--font-color);
    border: 2px solid var(--card-split);
    -webkit-transition:.3s;
    transition:.3s
}
input.sm{
    padding:6px
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,input[type=date]:focus{
    border:2px solid #07f
}
input[type=text].disabled,input[type=password].disabled,input[type=number].disabled,input[type=date].disabled{
    color:#8d8d8d;
    background-color:#5a5a5a;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    pointer-events:none
}
input[type=password]:not(:placeholder-shown){
    font-family:"Pretendard"
}
input[type=date]{
    width:-webkit-fit-content;
    width:-moz-fit-content;
    width:fit-content;
    height:30px;
    line-height:30px;
    padding:0 10px
}
input[type=text]:invalid,input[type=number]:invalid,input[type=password]:invalid,input[type=date]:invalid{
    border:2px solid #ff2727;
    -webkit-box-shadow:none;
    box-shadow:none
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    appearance:none;
    margin:0
}
input[type=number],input[type=date]{
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
    appearance:textfield;
    margin:0
}
textarea{
    font-family:"Pretendard";
    background-color:var(--card-background);
    resize:none;
    color:var(--font-color);
    -webkit-transition:border .3s;
    transition:border .3s;
    padding:10px;
    border:2px solid var(--card-split);
    -webkit-box-flex:1;
    -ms-flex:auto;
    flex:auto;
    min-height:250px;
    overflow:auto;
    white-space:pre
}
textarea:focus{
    border:2px solid #0077ffb2
}
select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-family:"Pretendard";
    display:block;
    width:100%;
    padding:10px;
    background-color:var(--card-background);
    color:var(--font-color);
    border:2px solid var(--card-split);
    -webkit-transition:.3s;
    transition:.3s
}
select.sm{
    padding:6px
}
select:focus{
    border:2px solid #07f
}
select:disabled{
    color:#8d8d8d;
    background-color:#414141
}
@media(max-width:1024px){
    input,textarea,select{
        padding:7px;
        font-size:.8em
    }
}
div.inline-container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
@media(max-width:1024px){
    div.inline-container{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row
    }
}
div.inline-container>div.container{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
@media(max-width:1024px){
    div.inline-container>div.container{
        margin:5px 0;
        min-width:100%
    }
}
div.inline-container>div.container>div.title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:10px 0;
    font-size:.9em
}
@media(max-width:1024px){
    div.inline-container>div.container>div.title{
        margin:0;
        margin-bottom:7px
    }
}
div.inline-container input,div.inline-container div.container{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}
div.inline-container input.both,div.inline-container div.container.both{
    margin:0 10px
}
div.inline-container input.right,div.inline-container div.container.right{
    margin-right:10px
}
div.text-align-right{
    text-align:right
}
div.popup.info{
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgba(0,0,0,.8)
}
div.popup.info>div.container{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    padding:10px
}
div.popup.info>div.container div.info{
    margin:10px 0;
    font-size:1.2em;
    font-weight:600;
    text-align:center;
    color:#fff
}
div.popup.info>div.container div.info.yellow{
    color:#eeb90a
}
div.popup.info>div.container div.info.white{
    color:#fff
}
div.popup.info>div.container div.info.blue{
    color:#2e90ff
}
div.popup.info>div.container div.info.green{
    color:#23bd05
}
div.popup.info>div.container div.info.red{
    color:#da0f0f
}
div.popup.info>div.container div.split{
    height:1px;
    display:block;
    background-color:#535353;
    margin:10px 0
}
div.popup.info>div.container div.button{
    font-size:.8em;
    vertical-align:middle
}
div.popup.info>div.container div.button.right{
    margin-right:10px
}
div.popup.custom{
    max-width:1300px;
    width:auto;
    position:absolute;
    top:100px;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    background-color:var(--item-background);
    -webkit-box-shadow:0 0 10px 5px rgba(0,0,0,.3);
    box-shadow:0 0 10px 5px rgba(0,0,0,.3);
    padding:20px;
    border-radius:.2em;
    word-wrap:break-word
}
@media(max-width:1300px){
    div.popup.custom{
        display:none
    }
}
div.popup.custom>section.header{
    margin-bottom:15px
}
div.popup.custom>section.header>div.title{
    font-size:1.2em;
    font-weight:600
}
div.popup.custom>section.button{
    margin-top:15px
}
div.label{
    margin:5px 0;
    font-size:1.1em;
    font-weight:600
}
div.label.yellow{
    color:#eeb90a
}
div.label.blue{
    color:#2e90ff
}
div.label.cyan{
    color:#17a2b8
}
div.label.green{
    color:#23bd05
}
div.label.red{
    color:#f03e3e
}
table{
    width:100%;
    border-collapse:collapse
}
table thead{
    border-top:3px solid var(--table-top);
    border-bottom:1px solid var(--table-bottom);
    color:var(--font-color)
}
table td{
    border-bottom:1px solid var(--table-bottom)
}
table td.right-split{
    border-right:1px solid var(--table-bottom)
}
table th{
    font-weight:500!important
}
table th.clickable{
    cursor:pointer
}
table th,table td{
    font-weight:300;
    color:var(--font-color);
    text-align:center;
    padding:10px
}
table th.config,table td.config{
    width:110px
}
table th.config.x1,table td.config.x1{
    width:120px
}
table th.config.x2,table td.config.x2{
    width:200px
}
table th.config.x3,table td.config.x3{
    width:300px
}
@media(max-width:1024px){
    table th.hidden,table td.hidden{
        display:none
    }
    table th.config,table td.config{
        width:75px!important
    }
    table th>div.button,table td>div.button{
        display:inline-block;
        margin:5px 0
    }
}
table th.desc,table td.desc{
    text-align:left
}
table th.green,table td.green{
    color:#22ad06
}
table th.red,table td.red{
    color:#eb0e0e
}
table th.blue,table td.blue{
    color:#0391e4
}
table th.purple,table td.purple{
    color:#ac0eeb
}
ul#mobile-menu{
    padding:0;
    margin:0;
    background-color:var(--item-background);
    list-style:none
}
ul#mobile-menu li.split{
    font-size:13px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    color:var(--item-split);
    border-left:3px solid var(--item-left);
    padding-left:13px;
    margin-bottom:10px
}
ul#mobile-menu li.split.top{
    margin-top:18px
}
ul#mobile-menu li.split.none{
    border:none
}
ul#mobile-menu li.click{
    color:var(--font-color);
    cursor:pointer;
    border-bottom:1px solid var(--item-border);
    border-left:3px solid var(--item-background);
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    padding:10px 20px;
    -webkit-transition:.2s;
    transition:.2s;
    font-size:14px
}
ul#mobile-menu li.click.top{
    border-top:1px solid var(--item-border)
}
ul#mobile-menu li.click:hover,ul#mobile-menu li.click.highlight{
    border-left:3px solid var(--highlight);
    background-color:var(--item-hover-background)
}
@media(max-width:1024px){
    html,body{
        font-size:12px
    }
}
section#wrap{
    width:100%;
    height:100vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
@media(max-width:1024px){
    section#wrap{
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
}
section#main{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:340px auto;
    grid-template-columns:340px auto;
    row-gap:20px;
    -webkit-column-gap:20px;
    column-gap:20px;
    padding:20px;
    padding-top:90px
}
section#main.no-nav{
    -ms-grid-columns:auto;
    grid-template-columns:auto
}
@media(max-width:1024px){
    section#main{
        display:block;
        width:100%;
        padding-top:10px
    }
    .menu section#main{
        display:none
    }
}
div.icon{
    display:none;
    position:fixed;
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:#1e7bf5;
    color:#fff;
    bottom:20px;
    left:20px;
    z-index:999999;
    text-align:center;
    font-size:17px;
    line-height:50px;
    -webkit-transition:.2s;
    transition:.2s;
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.3);
    box-shadow:0 0 10px 2px rgba(0,0,0,.3)
}
@media(max-width:1024px){
    div.icon{
        display:block
    }
}
div.icon:active{
    background-color:#0b51ad
}
header{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:10px 0;
    z-index:99999;
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    background-color:var(--item-background);
    position:fixed;
    width:100%;
    top:0
}
@media(max-width:1024px){
    header{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    header:not(.responsive){
        display:none;
        height:0;
        overflow:hidden
    }
    header.responsive{
        display:block;
        height:100vh;
        overflow:scroll
    }
}
header *{
    -ms-flex-negative:0;
    flex-shrink:0;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
header>section.title{
    margin:0 10px 0 30px;
    font-weight:600;
    font-size:2em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
@media(max-width:1024px){
    header>section.title{
        -webkit-box-flex:1;
        -ms-flex:1;
        flex:1;
        margin:0;
        text-align:center
    }
}
header>section.header{
    height:50px;
    line-height:50px;
    margin:0 10px;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}
@media(max-width:1024px){
    header>section.header{
        display:none;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }
}
header>section.header>div{
    display:inline
}
header>section.header div.right{
    float:right
}
header>ul#mobile-menu{
    display:none
}
@media(max-width:1024px){
    header>ul#mobile-menu.show{
        display:block
    }
}
nav{
    width:100%
}
@media(max-width:1024px){
    nav{
        display:none
    }
}
nav section.section{
    background-color:var(--item-background);
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    border:1px solid var(--category-split);
    border-radius:.2em;
    margin:0 0 10px
}
nav section.section section.container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:13px;
    border-bottom:1px solid var(--category-split);
    font-size:.9em;
    font-weight:600
}
nav section.section section.container.header{
    background-color:var(--category-split)
}
nav section.section section.container div.title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:1.1em
}
nav section.section section.container div.name{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}
nav section.section section.container div.value{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}


nav section.section section.container div.log{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
nav section.section section.container div.log.is-not-active{
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0
}
nav section.section section.container div.log.is-active{
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    -webkit-animation:growUp 1000ms cubic-bezier(.26,0,.06,1) 0ms forwards;
    animation:growUp 1000ms cubic-bezier(.26,0,.06,1) 0ms forwards
}
nav section.section section.container div.button{
    margin:0
}
nav section.section section.container div.button.right{
    margin-right:5px
}
main section.card{
    width:100%;
    border-top:3px solid var(--highlight);
    padding:15px;
    background-color:var(--card-background);
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    box-shadow:0 0 10px 2px rgba(0,0,0,.2)
}
main section.card.margin-top{
    margin-top:20px
}
main section.card section.header{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
main section.card section.header div.title{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:600;
    font-size:1.3em
}
main section.card section.sub-header{
    font-size:.9em
}
main section.card div.subtitle{
    margin:10px 0;
    font-size:1.1em
}
@media(max-width:1024px){
    main section.card div.subtitle{
        margin:8px 0
    }
}
main section.card div.sub-header{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
main section.card div.sub-header div.title{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:1.1em
}
main section.card div.sub-header div.element{
    display:inline-block
}
main section.card div.sub-header div.element.right{
    margin-right:10px
}
main section.card div.sub-header div.button{
    margin:0
}
main section.card div.split{
    height:1px;
    width:100%;
    margin:10px 0;
    background-color:var(--card-split)
}
main section.items{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns: 33.33333% 33.33333% 33.33333%;
    grid-template-columns:repeat(3,33.33333%)
}
@media(max-width:1024px){
    main section.items{
        display:block;
        width:100%
    }
}
@media(max-width:1580px){
    main section.items{
        -ms-grid-columns:50% 50%;
        grid-template-columns:50% 50%
    }
}
@media(max-width:1270px){
    main section.items{
        -ms-grid-columns:100%;
        grid-template-columns:100%
    }
}
main section.items div.item{
    color:var(--font-color);
    margin:0 5px 15px;
    padding:15px;
    border-top:3px solid var(--highlight);
    background-color:var(--card-background);
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    box-shadow:0 0 10px 2px rgba(0,0,0,.2)
}
@media(max-width:1024px){
    main section.items div.item{
        margin-bottom:20px
    }
}
main section.items div.item div#img{
    overflow:hidden;
    width:100%;
    height:200px
}
main section.items div.item div#img div.in{
    width:100%;
    height:100%;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover
}
main section.items div.item div.title{
    display:-ms-grid;
    display:grid;
    text-align:center
}
@media(max-width:1024px){
    main section.items div.item div.title{
        display:-ms-grid;
        display:grid
    }
}
main section.items div.item div.title>div.container{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-weight:600;
    font-size:1.3em
}
main section.items div.item div.split{
    height:1px;
    display:block;
    background-color:var(--card-split);
    margin:10px 0
}
main section.items div.item>div.container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
@media(max-width:1024px){
    main section.items div.item>div.container{
        display:-ms-grid;
        display:grid;
        -ms-grid-rows:auto auto;
        grid-template-rows:auto auto
    }
}
main section.items div.item>div.container div.text{
    line-height:39px;
    height:39px;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
@media(max-width:1024px){
    main section.items div.item>div.container div.text{
        line-height:24px;
        height:24px
    }
}
main section.items div.item>div.container div.line{
    color:var(--font-color);
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    padding:10px;
    text-align:center;
    background-color:var(--card-shop-background);
    border-radius:.2em;
    -webkit-transition:.3s;
    transition:.3s
}
main section.items div.item>div.container div.line:active{
    background-color:var(--card-shop-active)
}
@media(max-width:1024px){
    main section.items div.item>div.container div.line{
        padding:9px 5px
    }
}
main section.items div.item>div.container.bottom{
    margin-bottom:15px
}
@media(max-width:1024px){
    main section.items div.item>div.container.bottom{
        display:-ms-grid;
        display:grid
    }
}
footer{
    -webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    box-shadow:0 0 10px 2px rgba(0,0,0,.2);
    padding:15px;
    width:100%;
    height:auto;
    background-color:var(--card-background)
}
footer div.row{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
@media(max-width:1024px){
    footer div.row{
        display:block
    }
}
footer div.row div.col{
    margin:0 10px
}
footer div.row div.col div.name{
    padding:5px;
    font-weight:600;
    font-size:2em
}
@media(max-width:1024px){
    footer div.row div.col div.name{
        display:none
    }
}
footer div.row div.col div.text{
    padding:5px
}
footer div.row div.col a{
    text-decoration:none;
    color:#1e7bf5
}
@-webkit-keyframes growUp{
    from{
        -webkit-box-flex:0;
        flex-grow:0
    }
    to{
        -webkit-box-flex:1;
        flex-grow:1
    }
}
@keyframes growUp{
    from{
        -webkit-box-flex:0;
        -ms-flex-positive:0;
        flex-grow:0
    }
    to{
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1
    }
}
/* 기본 스타일 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

h1 {
    text-align: center;
    color: #333;
}

h2 {
    color: #333;
    padding-left: 20px;
    margin-bottom: 10px;
}

.my-page-header {
    background-color: #2196F3;
    color: white;
    padding: 20px;
    margin-bottom: 20px;
}

.transaction-section {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.transaction-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.transaction-table th,
.transaction-table td {
    padding: 12px;
    text-align: center; /* 텍스트를 가운데로 정렬 */
    border: 1px solid #ddd;
}

.transaction-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.transaction-table td {
    background-color: #fff;
}

.transaction-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.transaction-table tbody tr:hover td {
    background-color: #f1f1f1;
}

/* 실행하기 버튼 스타일 */
.action-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 모달 배경 */
.modal {
    display: none; /* 기본적으로 모달을 숨김 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 배경 어두운 색 */
    padding-top: 60px;
}

/* 모달 콘텐츠 */
.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    width: 40%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 3.5rem;
    color: #333;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 폼 스타일 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.submit-btn:hover {
    background-color: #45a049;
}

/* 반응형 디자인 */
@media screen and (max-width: 768px) {
    .transaction-section {
        width: 90%;
    }

    .transaction-table th, .transaction-table td {
        font-size: 14px;
        padding: 10px;
    }

    .modal-content {
        width: 80%;
    }
	/* 비밀번호 확인 필드 스타일 */
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
}



 .admin-button {
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    font-weight: bold;
  }
}

.form-group.otp-group {
    display: flex;
    align-items: center;
    gap: 8px; /* 레이블과 체크박스 간격 */
    margin-top: 10px;
}

.form-group.otp-group label {
    margin-right: 8px;
    font-size: 14px;
    color: var(--font-color); /* 기본 텍스트 색상 */
    transition: color 0.3s ease; /* 색상 변화에 애니메이션 추가 */
}

.form-group.otp-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: none; /* 기본 브라우저 스타일 제거 */
    background-color: #fff; /* 기본 배경색 */
    border: 2px solid #ccc; /* 기본 테두리 */
    border-radius: 4px; /* 모서리를 둥글게 */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 체크박스가 선택되었을 때 스타일 */
.form-group.otp-group input[type="checkbox"]:checked {
    background-color: #4caf50; /* 내부 색상을 초록색으로 변경 */
    border-color: #4caf50; /* 테두리 색상도 초록색으로 변경 */
}

/* 체크박스가 선택되었을 때 레이블 스타일 변경 */
.form-group.otp-group input[type="checkbox"]:checked + label {
    color: #4caf50; /* 레이블 텍스트 색상을 초록색으로 변경 */
    font-weight: bold; /* 체크된 상태에서 레이블 강조 */
}