/* #main .logo img {
    width: 100px;
    height: 44px;
} */

#main .logo img {
    width: auto; /* 두들 관련 변경 0819 */
    max-width: 154px; /* 두들 관련 변경 0820 */
    height: 44px;
}

.sub {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sub div:active {
    background-color: #0000001a;
}

/* 모바일 뷰 */
@media only screen and (max-width: 1199px) {
    header #main .gnb-mobile {
        display:flex;
        flex-direction: column;
        width:100%;
    }

    header #main .gnb-mobile .gnb {
        display: flex;
        flex-direction: row;
        gap: calc(var(--gap-2x) / 2);
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 8px;

        --elements-width: 338px;
        --gap-2x: calc(100% - var(--elements-width));
    }

    header #main .gnb-mobile .gnb .logo { /* 두들 관련 전체 추가 0820 */
        display: flex;
        justify-content: center;
        width: 154px;
        height: 44px;
    }

    #main .gnb-pc,
 #main .btn-pc,
 .admin-pc {
        display:none !important;
    }


    #toggleBtn {
        width: 44px;
        height: 44px;
        cursor: pointer;
        background: url(../../img/ver2/icon_mobile_gnb_menu.svg) left top no-repeat;
        border-radius: 50%;
    }

    .gnb-empty {
        width:44px;
        height:44px;
    }
    
    .sub {
        gap:4px;
    }

    .sub .toggle-search {
        width: 44px;
        height: 44px;
        background: url(../../img/ver2/icon_gnb_search.svg) left top no-repeat;
        border-radius: 50%;
    }

    .sub .alarm {
        width: 44px;
        height: 44px;
        background: url(../../img/ver2/icon_mobile_gnb_alarm.svg) left top no-repeat;
        border-radius: 50%;
    }

    header .alarm .number {
        position: absolute;
        top: 14px;
        right: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width:14px;
        min-height:14px;
        padding:0 3px;
        font-size: 0.5625rem;
        font-weight:700;
        color: #FFF; /* 1104 수정 */
        background-color: var(--warning-color); /* 1104 수정 */
        border-radius: 50vh;
        outline: 2px solid #1CA8AF;
    }

    header #main .search {
        position: relative;
        display: none;
        align-items: center;
        justify-content: center;
        width: 100vw;
        padding: 2px 8px 8px;
    }
    
    header #main .search.active {
        display: flex;
    }
    
    header #main .search form {
        width: 100%;
    }

    header #main .search input:focus {
        background-position: 8px center !important;
    }

    header #main .search input {
        flex: 1;
        width: 100%;
        height: 40px;
        padding:10px 8px 10px 34px;
        background-position: 8px center !important;
        border: unset;
    }

    #suggestion-box {
        position: absolute;
        top: 100%; /* Position below the input box */
        left: 10%;
        z-index: 1000; /* Ensure it is above other elements */
        width: 80%;
        padding: 5px;
        font-size: 0.9em !important;

        /* font-weight: bold; */
        color: var(--default-font-color) !important;
        background-color: var(--default-background-color) !important;
        border: 1px solid var(--alpha-10);
        border-radius: 5px;

        /* box-shadow: 0 4px 8px rgb(0 0 0 / 20%); */
    }

    #suggestion-list {
        padding: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        list-style-type: none;
    }

    #suggestion-list li {
        margin-bottom: 5px;
    }

    #suggestion-list li a:hover {
        color: var(--point-color);
    }

    /* 펼침 메뉴 */
    header #nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999; /* 1104 수정 */
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    header #nav .navBackground {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 998; /* 1104 수정 */
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-color: var(--alpha-50);
    }

    header #nav.active {
        display: flex;
    }
    
    header #nav .navWrap {
        z-index: 999; /* 1104 수정 */
        display: flex;
        flex-direction: column;
        width:67%;
        min-width: 262px;
        height: 100%;
        padding: 8px;
        background-color: var(--layer-background-color);
    }

    header #nav .navWrap>* {
        background-color: var(--layer-background-color);
    }

    /* 모바일 상단 버튼 영역 -- 로그인/로그아웃시 다름 */

    header #nav .mypage {
            display: flex;
            flex-direction: row;
            gap:4px;
            align-items: center;
            width:100%;
            padding:8px 0;
            margin-bottom:8px;
    }

    .mypage li button.category1-check {
        width:41px;
        height:41px;
        padding:0 !important;
        background: var(--alpha-5) url(../../img/ver2/icon_category1_check.svg) center center no-repeat;
        border:none;
        border-radius:50%;
    }

    .mypage li.expand {
        flex:1 0 auto;
    }

    .mypage li button.category1-check:active {
        background-color: var(--alpha-10);
    }

    .admin .title {
        font-size: 0.9375rem;
    }
    
    .admin ul.submenu li a {
        padding: 8px 16px;
        border-left: var(--point-background-color-20, rgb(28 168 175 / 20%)) solid 2px;
    }

    span.point {
        padding:2px 0 0 4px;
        font-size:0.75rem;
        font-weight: 400; /* 1104 수정 */
    }

    header #nav nav {
            height: 100%;
            margin-bottom:8px;
            overflow: auto;
            
    }

    header #nav .navBackground {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998; /* 1104 수정 */
            width: 100%;
            height: 100%;
            cursor: pointer;
            background-color: var(--alpha-50);
    }

    header nav>ul {
        padding: 4px 0;
    }
    

    header nav>ul>li {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom:4px;
    }
    
    header nav>ul>li>.menu {
            display: flex;
            flex-direction:row;
            gap:2px;
            align-items: center;
            padding-right:8px;
    }
    
    header nav .menu>a {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: flex-start;
            padding: 8px;
            font-weight: 700;
            border-radius: 8px;
     }
    
    header nav a:active {
        background-color: var(--alpha-5);
        border-radius: 8px;
    }

    header nav .menu .category1 {
        margin-right:8px;
    }

    header nav>ul>li .dropdownBtn svg {
        fill: var(--default-font-color);
    }
    
    header nav>ul>li .dropdownBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height:28px;
            cursor: pointer;
    }

    header nav>ul>li .dropdownBtn .fa-caret-down {
        transform: rotate(180deg);
    }

    header nav>ul>li .dropdownBtn:active {
        background-color: var(--alpha-5);
        border-radius:8px;
    }

    /* 서브메뉴 subMenus */
    header nav>ul>li>ul {
            display: none; /* 어드민 옵션으로 제어되는 듯 */
            flex-direction: column;
            font-size: 0.875rem;
    }
    
    header nav>ul>li>ul.active {
            display: flex;
            flex-direction: column;
            border: 0;
    }
    
    header nav>ul>li>ul>hr {
            display:none;
    }
    
    header nav>ul>li>ul>li {
            padding-left:18px;
    }
    
    header nav>ul>li>ul>li>a {
            display: flex;
            padding:10px 16px 10px 21px;
            color: var(--default-font-color);
            word-break: keep-all;
            border-left: var(--alpha-10) 2px solid;
    }

    header nav>ul>li>ul>li>a:active {
        background-color: var(--alpha-5);
        border-radius: 0 8px 8px 0;
    }

    /* 즐겨찾기 최근방문 모바일 */
    .shortcuts {
        position: sticky;
        top: 0;
        z-index: 950; /* 1104 수정 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        width: 100%;
    }

    .shortcuts .boardShortcuts {
        overflow:auto;
    }

    .shortcuts .boardShortcuts .area {
        width: 100%;
        min-height:32px;
        padding: 6px 8px
    }

    .shortcuts #favorites,
    .shortcuts #visited {
        gap: 6px;
    }

    /* 풀 투 리프레시 */

    .ptr--ptr {
        background-color: var(--alpha-5);
    }

    .ptr--text,
    .ptr--icon {
        color: var(--alpha-70) !important;
    }
}

@media only screen and (min-width: 1200px) {
    header #main {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 1060px;
        padding: 13px 0;
        margin: 0 auto;
    }

    #main .gnb-mobile,
 header #nav {
        display:none;
    }

    #main .gnb-pc {
        display:flex;
        flex-direction: row;
        gap:24px; /* 두들 관련 수정 - 0819 */
        align-items: center;
    }

    #main .nav-area {
        display: flex;
        flex-direction: row;
        gap:20px; /* 두들 관련 수정 - 0819 */
        align-items: center;
    }

    #main .nav-area div {
        display:flex;
        flex-direction:row;
        align-items: center;
    }

    #main .nav-area .pulldown {
        margin-left:4px;
    }

    #main .nav-area a,
 #main .nav-area a:visited {
        font-weight: 400; /* 1104 수정 */
        color:#FFF;
        text-decoration:none;
    }

    #main .btn-pc {
        display:flex;
        flex-direction: row;
        gap:24px;
    }

    #main .search {
        position: relative;
    }

    #main .search #searchInput {
        width:243px;
        height:36px;
        padding:4px 8px 4px 30px;
    }

    #suggestion-box {
        position: absolute;
        top: 100%; /* Position below the input box */
        left: 10%;
        z-index: 1000; /* Ensure it is above other elements */
        width: 208px;
        padding: 5px;
        font-size: 0.9em !important;

        /* font-weight: bold; */
        color: var(--default-font-color) !important;
        background-color: var(--default-background-color) !important;
        border: 1px solid var(--alpha-10);
        border-radius: 5px;

        /* box-shadow: 0 4px 8px rgb(0 0 0 / 20%); */
    }

    #suggestion-list {
        padding: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        list-style-type: none;
    }

    #suggestion-list li {
        margin-bottom: 5px;
    }

    #suggestion-list li a:hover {
        color: var(--point-color);
    }

    #main .user {
        display:flex;
        flex-direction: row;
        gap:16px;
    }

    .sub {
        gap: 2px;
    }

    .sub .check {
        width:44px;
        height:44px;
        background: url(../../img/ver2/icon_pc_gnb_check.svg) left top no-repeat;
        border-radius:50%;
    }

    .sub .alarm {
        display:flex;
        align-items: flex-start;
        justify-content: flex-end;
        width: 44px;
        height: 44px;
        padding:4px;
        background: url(../../img/ver2/icon_pc_gnb_alarm.svg) left top no-repeat;
        border-radius: 50%;
    }

    header .alarm .number,
 header .alarm .number:hover {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        font-size: 0.5625rem;
        font-weight: 700;
        color: #FFF; /* 1104 수정 */
        background-color: var(--warning-color); /* 1104 수정 */
        border-radius: 50vh;
        outline: 2px solid #1CA8AF;
    }

    .sub .mypage {
        width: 44px;
        height: 44px;
        background: url(../../img/ver2/icon_pc_gnb_user.svg) left top no-repeat;
        border-radius: 50%;
    }

    .sub div:hover {
        background-color: #0000001a;
    }

    .sub a {
        text-decoration: none;
    }

    .sign {
        display:flex;
        flex-direction: row;
        gap:8px;
        align-items: center;
    }

    .shortcuts {
        position: sticky;
        top: 0;
        z-index: 950; /* 1104 수정 */
    }

    /* 즐겨찾기 최근방문 PC */
    .shortcuts .boardShortcuts .area {
        width:1060px;
        min-height:33px;
        padding: 5px 0; /* 1104 수정 */
        margin: 0 auto;
    }

    .shortcuts #favorites,
    .shortcuts #visited {
        gap: 4px;
    }

    /* 1104 추가 */
    .shortcuts .boardShortcuts .title {
        font-size: 0.8125rem !important;
    }

    .shortcuts .boardShortcuts .item {
        padding: 5px 7px !important;
        font-size: 0.8125rem !important;
    }
}

#main .search {
    display: inline-flex;
    align-items: center;
    padding: 4px 0 4px 4px;
}

#main .search #searchInputForMobile,
 #main .search #searchInput {
    color: #FFF;
    background: rgb(0 0 0 / 10%) url(../../img/ver2/icon_input_search.svg) 4px center no-repeat;
    border: none;
    border-radius: 8px;
    box-shadow: 1px 1px 0 0 rgb(0 0 0 / 20%) inset;

}

#main .search #searchInputForMobile::placeholder,
 #main .search #searchInput::placeholder {
    color: #FFFFFF80;
}

#main .search #searchInputForMobile:focus,
 #main .search #searchInput:focus {
    color: var(--default-font-color);
    background: var(--layer-background-color) url(../../img/ver2/icon_input_search_focused.svg) 4px center no-repeat;
    outline: solid #0E7A80c8 1px;
    box-shadow: 0 0 6px rgb(255 255 255 / 100%) !important;
    box-shadow: 0 0 6px rgb(255 255 255 / 100%) !important;
    appearance: none !important;
}

header .alarm .number {
    max-width:36px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
}

.sign button {
    color: #FFF !important;
    background-color: rgb(255 255 255 / 20%);
}

.sign button:hover,
.sign button:active {
    cursor: pointer;
    background-color: rgb(255 255 255 / 30%);
}

/* 관리자 메뉴 - PC 및 공통 */

.admin-pc {
    display: flex;
    flex-direction: row;
    align-items: center;
    width:fit-content;
    padding:4px 0;
    margin:0 auto;
    background: var(--point-background-color-10, rgb(28 168 175 / 10%));
    border-radius: 0 0 8px 8px;
}

.admin-pc ul.submenu {
    display: flex;
    flex-direction: row;
    align-items: center;
}

header #nav .admin {
    padding: 8px 0;
    margin: 0 8px 8px;
    background: var(--point-background-color-10, rgb(28 168 175 / 10%));
    border-radius: 8px;
}

.admin .title,
 .admin-pc .title {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 8px;
    font-weight: 700;
    color: var(--point-color);
}

.admin-pc .title {
    font-size: 0.875rem;
}

.admin ul.submenu {
    padding: 0 16px;
}

.admin-pc ul.submenu {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding-right:8px;
}

.admin ul.submenu li,
 .pc-admin ul.submenu li {
    font-size: 0.875rem;
}

.admin ul.submenu li a,
 .admin-pc ul.submenu li a {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 0.875rem;
}

.admin-pc ul.submenu li a {
    padding:8px;
}

.admin-pc ul.submenu li a:active,
.admin-pc ul.submenu li a:hover
{
background-color: var(--point-background-color-10);
border-radius: 8px;
}

.admin ul.submenu li a:active {
    background-color: var(--point-background-color-10);
    border-radius: 0 8px 8px 0;
}


/* PC 메가메뉴 */
.show-mega {
    position: absolute;
    z-index: 999;
    display: none;
    width: 100%;
    padding: 32px 0;
    background-color: var(--layer-background-color);
}

.show-mega .title {
    width: 1060px;
    margin: 0 auto;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--alpha-50);
}


.show-mega .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(162px, auto));
    gap: 8px;
    width: 1060px;
    margin: 0 auto;
}

.show-mega .event {
    width: 1060px;
    margin: 0 auto;
}

.megaBackground {
    position: fixed;
    top: 49;
    left: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
}

.show-mega a {
    color: var(--default-anchor-color);
    text-decoration: none;
}

.show-mega ul>li {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.show-mega ul>li>.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 4px;
    margin-bottom: 4px;
}

.show-mega ul>li>.menu>a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 700;
    border-radius: 8px;
}


.show-mega ul>li>.menu .category1 {
    margin-right: 8px;
}

.show-mega ul.submenu li {
    padding: 8px 4px;
}

.show-mega ul.submenu li>a {
    display: inline-block;
    width: fit-content;
    font-size: 0.875rem;
    font-weight: 400; /* 1104 수정 */
}

.show-mega ul.submenu-etc li {
    padding: 12px 0;
}

.show-mega ul.submenu-etc li>a {
    display: inline-block;
    width: fit-content;
    font-size: 1rem;
    font-weight: 400; /* 1104 수정 */
}

.show-mega .event li.frame {
    width: 364px;
    height: 212px;
    padding: 8px;
    background: url(../../img/ver2/img_event_frame.svg) center center no-repeat;
}

.event li.frame img {
    width: 348px;
    height: 196px;
    object-fit: cover;
    outline: 4px solid var(--layer-background-color);
}

/* 메가메뉴 링크 언더라인 애니메이션 */

.underline-animation-menu,
 .underline-animation-nara,
 .underline-animation-category2 {
    position: relative;
    display: inline-block;
}

.underline-animation-menu::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    visibility: hidden;
    content: '';
    transition: all 0.2s ease-in-out;
}

.underline-animation-menu:hover::after {
    bottom: -6px;
    width: 100%;
    visibility: visible;
    background-color: #FFF;
}

.underline-animation-category2::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    visibility: hidden;
    content: '';
    background-color: var(--layer-background-color);
    transition: all 0.2s ease-in-out;
}

.underline-animation-category2:hover::after {
    bottom: -6px;
    width: 100%;
    visibility: visible;
    background-color: var(--default-anchor-color);
}

.underline-animation-nara::after {
    position: absolute;
    bottom: -4px;
    left: 32px;
    width: calc(100% - 32px);
    height: 2px;
    visibility: hidden;
    content: '';
    background-color: var(--layer-background-color);
    transition: all 0.2s ease-in-out;
}

.underline-animation-nara:hover::after {
    bottom: -2px;
    width: calc(100% - 32px);
    visibility: visible;
    background-color: var(--default-anchor-color);
}

.rotated {
    transition: transform 0.2s ease;
    transform: rotate(180deg);
}

/* 즐겨찾기 최근방문 공통 */

.shortcuts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.shortcuts .boardShortcuts {
    width:100%;
    background: var(--point-color, #1CA8AF);
    border-bottom: 1px solid var(--point-shadow-color-50);
    box-shadow: 0 1px 0 0 rgb(255 255 255 / 20%) inset;
}

.shortcuts .boardShortcuts::-webkit-scrollbar {
    display: none;
}

.shortcuts .boardShortcuts .area {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
    gap: 8px;
    align-items: center;
}

.shortcuts .boardShortcuts .area .title {
    width:fit-content;
    word-break: keep-all;
}

.shortcuts .favorites .title {
    padding-left:16px;
    font-size:0.75rem;
    font-weight:700;
    color:#FFF;
    background: url(../../img/ver2/icon_gnb_favorite.svg) left center no-repeat;
}

.shortcuts .visited .title {
    padding-left: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color:#FFF;
    background: url(../../img/ver2/icon_gnb_history.svg) left center no-repeat;
}

.shortcuts .boardShortcuts span {
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-size: 0.9rem;
    white-space: nowrap;
}


.shortcuts .boardShortcuts span a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-decoration: none;
}

.shortcuts .boardShortcuts .item {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: 0.75rem;
    color: #FFF;
    background: var(--alpha-10);
    border-radius: 50vh;
}

.shortcuts .boardShortcuts .item:active,
 .shortcuts .boardShortcuts .item:hover {
    background: var(--alpha-20);
}

.shortcuts .boardShortcuts .item i {
    color: var(--default-font-color);
    cursor: pointer;
}

.shortcuts #favorites,
 .shortcuts #visited {
    display:flex;
    flex-direction: row;
    align-items: center;
}

/* 1104 추가 */
.shortcuts #favorites .icon {
    margin-right: 2px;
}

.shortcuts #favorites svg,
 .shortcuts #visited svg {
    cursor: pointer;
    fill: #FFFFFFB2;
}

.shortcuts #favorites svg:hover,
 .shortcuts #favorites svg:active,
.shortcuts #visited svg:hover,
 .shortcuts #visited svg:active {
    cursor: pointer;
    fill: #FFF;
}