/**/
header{padding: 2rem 0; transition: 0.3s ease;}
header.fixed{position: fixed; padding: 0.5rem 0; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff; border-bottom: 1px solid #eee; transition: 0.3s ease;}
header h1 img{height: 45px; transition: 0.3s ease;}
header.fixed h1 img{height: 40px; transition: 0.3s ease;}

header>.mobile{display: none;}

@media screen and (min-width: 1200px) {
    #gnb {font-size: 1.1em;}
    #gnb .depth1 {list-style: none;padding: 0;margin: 0;display: flex;align-items: center;}
    #gnb .depth1 > li {position: relative;padding: 10px 20px;}
    #gnb .depth1 > li > a {text-decoration: none;padding: 10px 0;display: block;font-size: 1.2em;font-weight: 600;position: relative; height: 40px}
    #gnb .depth1 > li > a:after{content: ""; display: block; width: 100%; height: 0px; border-radius: 10px; background-color: #4B79EE; transition: all 0.3s; opacity: 0;}
    #gnb .depth1 > li:hover > a {font-weight: 600;color: #000000; padding: 0; transition: all 0.3s;}
    #gnb .depth1 > li:hover > a:after{width: 100%; height: 4px; opacity: 1; margin-top: 6px;}
    #gnb .depth1 > li > a.txt-orange:after{background: #FF6225!important}
    #gnb .depth2-wrapper {display: none;position: absolute;top: 80%;left: 50%;transform: translateX(-50%); z-index: 1000;}
    #gnb .depth2 {list-style: none;padding: 0;margin: 0;border-radius: 10px;border: 1px solid #eee;overflow: hidden;background-color: #fff;width: max-content;}
    #gnb .depth1>li:hover .depth2-wrapper:has(ul.depth2 li:empty) {display: none!important;}
    #gnb .depth2 li a {text-decoration: none;padding: 12px 20px;white-space: nowrap; /* 텍스트 줄 바꿈 방지 */display: block;width: 100%;text-align: center;}  .depth2 li:not(:last-child) a{border-bottom: 1px dashed #eeeeee;}
    #gnb .depth2 li a:hover {background-color: #eeeeee56;color: #4B79EE;font-weight: 600;}
    #gnb .mobile-my{display: none;}
}


.tnb > a{margin-left: 6px;}
.tnb .hd_count{display: none; }
.tnb .hd_count li{line-height: 1.2em;}
.tnb > ul{margin-right: 10px;}
.tnb .mobile{display: none;}
.mobile-menu{display: none;}

#wrapper{max-width: 1500px; margin: 0 auto; min-height: 80vh}
.lnb-side{display: grid; grid-template-columns: 220px 1fr; gap: 60px;}
.container{padding: 0;margin: 0;}

.lnb .mypage{border-radius: 20px; background-color: #eeeeee56; text-align: center; padding: 3rem 1rem; margin-bottom: 10px;}
.lnb .mypage p{font-size: 1.15em;}
.lnb .mypage span{font-size: 0.9em;}
.lnb > ul{padding:0 1rem; margin-bottom: 20px;}
.lnb a{font-size: 1.1em; display:flex; align-items: center; justify-content: space-between; line-height: 3em; border-bottom: 1px solid #eee;}
.lnb a:after{content: "\f054"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 0.8em; opacity: 0.8;}
.lnb a.active{color: #4B79EE; font-weight: 600; border-bottom: 1px solid #4B79EE56;}

/**/
footer{padding: 2rem 0;}
.fnb{ border-bottom: 1px solid #eee; padding: 2rem 0; font-size: 1.1em;}
.fnb a{font-weight: 600;}
.copy{padding: 2rem 0;}
.copy h1{font-weight: 600; font-size: 1.1em;}
.copy ul{margin: 6px 0}
.copy li{margin-right: 10px; display: inline-block;}
.dot-list ul li:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #55555520; margin: 0 6px 1px}
.area-top{border-bottom: 3px solid #555; margin-bottom: 40px; padding-bottom: 20px;}

.sub-banner{max-width: 1600px; height: 300px; margin: 0 auto; border-radius: 20px; overflow: hidden; margin-bottom: 40px;}
.sub-banner img{width: 100%;height: 100%;object-fit: cover}

.banner{margin-bottom: 3rem; border-radius: 20px; overflow: hidden;}
.banner img{width: 100%;}
.banner .pc{display: block;}
.banner .mobile{display: none;}

@media screen and (max-width: 1200px) {
    header{padding: 1rem 3rem;}
    header>.mobile{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-top: 0px;}
    header>.mobile>a{width: 100%;}
    header h1 img{height: 35px;}
    .mobile-menu{display: block;}
    .mobile-menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #1C1C1C;}

    .tnb > ul{display: none!important;}
    .tnb .mobile{display: inline-block;}
    .tnb .btn-line{display: none}
    .mobile-menu{display: block;}
    .mobile-menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #1C1C1C;}

    /**/
    #gnb {position: fixed;right: -90%; /* Hide it outside the screen */top: 0;width: 90%;height: 100%;background-color: #fff;z-index: 1000;transition: right 0.3s ease-in-out; padding: 1rem; overflow-y: auto; max-width: 400px;}
    #gnb.open {right: 0; z-index: 9999; /* Slide in the menu */}

    #gnb .depth1{border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > a{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; padding: 1.2rem 1rem;display: flex; align-items: center;}
    #gnb .depth1 > li > a:before{display: inline-block;content: "";width: 3px;height: 14px;background-color: #4B79EE;border-radius: 6px;margin-right: 6px;}
    #gnb .depth2{padding: 1rem 1.6rem; background-color: #4B79EE10; border-radius: 15px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr;}
    #gnb .depth2 a:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color: #4B79EE56; margin-right: 6px; vertical-align: middle; border-radius: 50%;}
    #gnb .mobile-my{display: block; padding: 1rem}
    #gnb .mobile-my .btn{margin-bottom: 0;}
    #gnb .mobile-my .close-btn{font-size: 2em;}
    #gnb .lnb{margin-top: 10px;}
    #gnb .lnb .mypage{padding-top: 10px; padding-bottom: 10px;}
    #gnb .lnb .mypage span{color: #333333}
    #gnb .lnb a{border-bottom: 0; font-size: 0.9em; line-height: 1.8em; display: flex; align-items: center;}
    #gnb .lnb a:after{content: ""; width: 1px; height: 12px; background-color: #ccc; display: inline-block; margin: 0 4px;}
    #gnb .lnb a:last-child:after{display: none;}

    .container{padding-left: 1rem; padding-right: 1rem;}

    .fnb > .flex{display: block!important;}
    .fnb > .flex li{display: inline-block;}

    .lnb_wrapper{display: block!important;}
    .lnb_wrapper .lnb{display: none;}
}

@media screen and (max-width: 992px) {
    header {padding: 1rem;}
}
@media screen and (max-width: 768px) {

}

main {padding: 50px 0 250px}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:35px;}
.dash-card{background:#fff;border:1px solid #eee;padding:25px;border-radius:12px;text-align:center;}
.dash-card .num{font-size:32px;font-weight:800;margin-bottom:6px;line-height: 1.3em}
.dash-card .label{font-size:14px;color:#666;}

.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;}
.search-box{display:flex;gap:8px;}
.search-box input{width:240px;padding:10px;border:1px solid #ddd;border-radius:8px;}

.mall-table th{font-weight:600;font-size:14px;color:#222;border-bottom:2px solid #eee;}
.mall-table td{font-size:14px;color:#333;padding:12px 8px;border-bottom:1px solid #f2f2f2; vertical-align: middle!important;}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:6px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:14px;color:#555;}
.form-row input{padding:10px;border:1px solid #ddd;border-radius:8px;}

#modalCreateMall hr {display: block}
@media(max-width:1024px){
    .dashboard-cards{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
    .dashboard-cards{grid-template-columns:1fr;}
    .top-actions{flex-direction:column;align-items:flex-start;gap:15px;}
    .search-box input{width:100%;}
    .form-grid{grid-template-columns:1fr;}
}

.adm-main {min-height: 100vh}