#header {position: sticky;top: 0;left: 0;width: 100%; background: #fff;box-shadow: 0 0 5px rgba(0,0,0,.1);z-index: 9999;}
.header__inner {display: flex;align-items: center;justify-content: space-between; height: 60px;max-width: 1200px; margin: 0 auto;padding-left: var(--layout-padding);padding-right: var(--layout-padding);}
.header__logo {display: inline-block;}
.header__logo > a {display: block;width: 200px;}
.header__logo > a > img {width: 100%;}
.header__gnb-button {display: none;}
.header__gnb-button > svg {width: 24px;}



.header__category > ul {display: flex;align-items: center;justify-content: center;}
.header__category > ul > li {position: relative;font-size: 17px;font-weight: 500;}
.header__category > ul > li:after {content: "";display: block; position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);;width: 0;height: 2px;background: var(--color-primary);transition: .4s;z-index: 1;}
.header__category > ul > li > a,
.header__category > ul > li > span {display: block;padding: 0 30px;line-height: 60px;transition: .4s;}
.header__category > ul > li > span {cursor: pointer;}
.header__category > ul > li > ul > li > a {cursor: pointer;}

.header__my {display: flex;align-items: center;}
.header__my > div {vertical-align: middle;}
.header__my-set {display: inline-block;color: #f00;margin-right: 5px;}
.header__my-set:hover {animation: admin-roll 1s linear infinite;}
.header__my-set > svg {width: 20px;vertical-align: middle;}
.header__my-nick {display: inline-block;font-size: 14px;}
@keyframes admin-roll {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.header__account {display: flex;align-items: center;gap: 10px;}
.header__account > a {display: block;width: 100px;line-height: 40px;border-radius: 30px;text-align: center;font-size: 17px; font-weight: 500; background: #fff;cursor: pointer;transition: .4s;}
.header__account > a.header__account-login {}
.header__account > a.header__account-join {background: var(--color-sub-01);color: var(--color-primary);}


/* 앱전용 */
.header__title {margin-right: auto;font-size: 20px;font-weight: 700;}
.header__back {display: none;}
.header__back > svg {width: 24px;}
.header__alarm {margin-right: 15px;}
.header__alarm > a {display: block;position: relative;}
.header__alarm > a > svg {width: 24px;}
.header__alarm > a .alarm-badge {position: absolute;top: 0;right: 0;width: 6px;height: 6px;border-radius: 50%;background: var(--color-primary);}


@media all and (min-width:1025px) {
    .header__category > ul > li:hover:after {width: 100%;} 
    .header__category > ul > li:hover > ul {opacity: 1;visibility: visible;}
    .header__category > ul > li:hover > a,
    .header__category > ul > li:hover > span {color: var(--color-primary);}
    .header__category > ul > li.active:after {width: 100%;}

    .header__account > a.header__account-login:hover {background: #eee;}
    .header__account > a.header__account-join:hover {background: #bfddff;}
    .header__category > ul > li > ul {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);min-width: 100%;width: max-content; padding: 15px 10px 20px;border: 1px solid var(--color-border);border-top: 0;background: #fff;border-radius: 0 0 7px 7px;opacity: 0;visibility: hidden;transition: .4s;}
    .header__category > ul > li > ul > li {text-align: center;font-size: 14px;margin-bottom: 15px;}
    .header__category > ul > li > ul > li:last-child {margin-bottom: 0;}
    .header__category > ul > li > ul > li > a {transition: .4s;}
    .header__category > ul > li > ul > li > a:hover {color: var(--color-primary);}
}
@media all and (max-width:1024px) {
    .header__inner {justify-content: inherit;}
    .header__logo {margin-right: auto;}
    

    .header__gnb-button {display: block;}
    .header__category {display: none;}
    .header__my {display: none;}
    .header__account {position: fixed;bottom: 20px; left: 50%;transform: translateX(-50%);display: flex;align-items: center;gap: 20px;width: max-content;z-index: 9999;}
    .header__account > a {width: 200px;border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,.1);}
    .header__account > a.header__account-join {background: var(--color-primary);color: #fff;}
}

@media all and (max-width:768px) {
    .header__logo > a {width: 150px;}
    .header__account {bottom: 10px; gap: 10px;width: 100%;padding: 0 20px;}
    .header__account > a {width: 50%;line-height: 35px; font-size: 14px;}

}





#footer {padding: 30px 0;text-align: center;font-size: 14px;color: #777;}
@media all and (max-width:1024px) {
    #footer {padding-bottom: 85px;font-size: 10px;}
}

/* 사이드카테고리 */
#gnb {position: fixed;top: 0;left: -100%;width: 100%;max-width: 300px;height: 100vh;padding: 30px 30px 50px;background: #fff;box-shadow: 0 0 5px rgba(0,0,0,.1);overflow-y: scroll;transition: .4s;z-index: 10000;}
#gnb.on {left: 0;}
@supports (height: 100dvh) {
    #gnb {
        height: 100dvh;
    }
}
.gnb__head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;}
.gnb__head-logo {}
.gnb__head-logo > a {display: inline-block;}
.gnb__head-logo > a > img {width: 140px;}
.gnb__head-close {}
.gnb__head-close > svg {width: 24px;}
.gnb__my {position: relative;margin-bottom: 40px;padding: 13px 20px;border-radius: 5px;background: #f8f8f8;font-size: 14px; text-align: center;font-weight: 500;}
.gnb__my-set {display: inline-block; position: absolute; top: 50%;right: 15px;transform: translateY(-50%); margin-left: 5px;vertical-align: middle;}
.gnb__my-set > svg {width: 20px;vertical-align: middle;}
.gnb__my-nick {display: inline-block;vertical-align: middle;}
.gnb__category {text-align: center;}
.gnb__category > ul {}
.gnb__category > ul > li {position: relative;margin-bottom: 10px;font-size: 17px;font-weight: 500;line-height: 1.4;}
.gnb__category > ul > li::after {content: "";display: block;position: absolute;top: 5px;left: 50%;transform: translateX(-50%);width: 4px;height: 4px;border-radius: 50%;background: var(--color-primary);transition: .4s;opacity: 0;visibility: hidden;}
.gnb__category > ul > li > a {display: block; position: relative;padding: 10px 0;font-weight: 700;}
.gnb__category > ul > li > ul {padding-top: 15px;}
.gnb__category > ul > li > ul > li {margin-bottom: 10px;font-size: 15px;font-weight: 400;}
.gnb__category > ul > li > ul > li > a {position: relative;color: #777;}
.gnb__category > ul > li > ul > li > a::before {content: "-"; position: absolute; left: -15px;}
.gnb__category > ul > li.has-sub > a::after {content: '';display: block;position: absolute; bottom: 0;left: 50%;transform: translateX(-50%);width: 100px;height: 1px;background: #ddd;}
.gnb__category > ul > li.active {color: var(--color-primary);}
.gnb__category > ul > li.active::after {top: 0;opacity: 1;visibility: visible;}




/* 하단 고정 네비 */
#fixed-nav {display: none;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;border-radius: 10px 10px 0 0;box-shadow: 0 0 10px rgba(0,0,0,.1);z-index: 98;opacity: 0; visibility: hidden;}
#fixed-nav:after {content: "";display: block;position: absolute;top: 0;left: 50%; transform: translateX(-50%);;width: 100%;height: 100%;border-radius: 10px 10px 0 0; background: rgba(255,255,255, 0.7);backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(7px);z-index: -1;}
#fixed-nav > ul{display: flex;justify-content: space-between;padding: 5px 8% 10px;}
#fixed-nav > ul > li {position: relative;text-align: center;font-size: 14px;font-weight: 500;}
#fixed-nav > ul > li > a {display: flex;flex-direction: column;align-items: center;justify-content: center; gap: 3px; width: 50px;height: 50px;border-radius: 5px;transition: .4s;}
#fixed-nav > ul > li > a .icon {display: block;font-size: 0;}
#fixed-nav > ul > li > a .icon > svg {width: 25px;height: 25px;}
#fixed-nav > ul > li > a .icon > svg path {transition: .4s;}
#fixed-nav > ul > li.active > a {background: rgb(17, 97, 255);}
#fixed-nav > ul > li.active > a .icon > svg path {stroke: #fff}
#fixed-nav > ul > li > a > p {transition: .4s;}
#fixed-nav > ul > li.active > a > p {color: #fff;}
@media all and (max-width:1024px) {
    #fixed-nav {display: block;opacity: 1;visibility: visible;}
}






/* app 관련 코드 */
.app-page {min-height: 80vh;}
.app-header {position: sticky;top: 0;z-index: 9999;}
.app-title {display: flex;align-items: center; gap: 10px;height: 60px;padding: 0 var(--layout-padding);background: #fff;}
.app-title__close {margin-right: 10px;}
.app-title__close > svg {width: 24px;vertical-align: middle;}
.app-title__setting {margin-left: auto;}
.app-title__setting > a {display: block;}
.app-title__setting > a > svg {width: 24px;vertical-align: middle;}
.app-title > h2 {font-size: 20px;font-weight: 700;}

.app-content {overflow-y: scroll;}