@font-face {
            font-family: 'Pretendard-Regular';
            src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        }

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
                }
        html, body {
            overflow-x: hidden; /* 가로 스크롤만 방지 */
            width: 100%; /* 너비 100%로 설정 */
            overflow-x: hidden !important;
            max-width: 100vw !important;
            width: 100% !important;
        }

        body {
            font-family: 'Pretendard', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background-image: url('https://www.2025kccm.co.kr/theme/2025kccm/page/preopen/img/bg-grad.svg');
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            min-height: 100vh;
            background-position: top center;
            overflow-x: hidden; /* 가로 스크롤만 숨김 */
        }

        .container {
            --bs-gutter-x: 0;
            padding:0;
            max-width: 100%;
            padding-top: 0px;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden; 
        }


        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .row {
            text-align: center;

            padding-left: 80px;
            padding-right: 80px;
        }
        .row-inner-padding{
            padding: 40px 50px;

        }
        .m-auto{
            margin:0 auto;
        }

        /* 반응형 유튜브 컨테이너 */
        .youtube-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 비율 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .youtube-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 10px;
        }

        /* 미디어 쿼리 - PC 및 모바일 최적화 */
        @media (min-width: 768px) {
            .container {
                padding-top: 0;
                text-align: center;
            }

            .m-v{
                display: none !important;
            }
            .p-v{
                display: block;
            }
            .row {


            }
        }

        @media (max-width: 767px) {
            .m-v{

            }
            .p-v{

            }
            .container {
                max-width: 100%;
                margin: 0 auto;
            }
            
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 회전 애니메이션 - 시계방향 (짝수) */
        @keyframes rotateClockwise2_2 {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes rotateClockwise3_2 {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes rotateClockwise5 {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 회전 애니메이션 - 반시계방향 (홀수) */
        @keyframes rotateCounterClockwise2_2 {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }
        @keyframes rotateCounterClockwise3_6 {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        .container > img , .footer > img {
            animation: fadeIn 0.8s ease-out;
            z-index: 2;
        }
        .youtube-container{
            z-index: 2;
        }
        /* 섹션 간격 조정 */
        .container > img + img {
            margin-top: -4px; /* 이미지 간 간격 최소화 */
        }
        
        /* Circle 이미지 스타일 */
        .circle {
            position: absolute;
            z-index: 1;
            width: 40vw;

        }
        .circle-1 {
            top: -15%;
            right: -15%;
        }
        .circle-2 {
            top: 220vh;
            left: -20%;
        }
        .circle-3 {
            top:2500px;
            right: -35%;
            width: 60vw;
        }
        .circle-4 {
            top:7500px;
            right: 38%;
            margin: 0 auto;
            width: 60vw;
        }
        @media (max-width: 767px) {
            .circle-1 {
                top: -49%;
                width: 130vw;
                right: -90%;
                transform: scale(2);
            }
            .circle-2 {
                top: 800px;
                left: -50%;
                width: 75vw;
            }
            .circle-3 {
                top: 2100px
                right: -40%;
                width: 65vw;
            }
        }
        
        .circle-div {
            width: 100vw;
            height: 100%;
            max-width: 100vw;
            position: absolute; 
            top: 0; 
            left: 0; 
            overflow-x: clip; 
        }

    .color-dark{color : #343a40!important}
    .color-white{color : #fff}
    .color-danger{color : #dc3545 !important}
    .color-info{color : #17a2b8 !important}
    .color-success{color : #28a745 !important}
    .mt0{ margin-top:0px  !important}
    .mt5{ margin-top:5px  !important}
    .mt10{ margin-top:10px  !important}
    .mt20{ margin-top:20px  !important}
    .mt30{ margin-top:30px  !important}
    .mt40{ margin-top:40px  !important}
    .mt50{ margin-top:50px  !important}
    .mt60{ margin-top:60px  !important}
    .mt70{ margin-top:70px  !important}
    .mt80{ margin-top:80px  !important}
    .mt90{ margin-top:90px  !important}
    .mt100{ margin-top:100px  !important}
    .mt110{ margin-top:110px  !important}
    .mt120{ margin-top:120px  !important}
    .mt130{ margin-top:130px  !important}
    .mt140{ margin-top:140px  !important}
    .mt150{ margin-top:150px  !important}
    .mb0{ margin-bottom:0px !important }
    .mb5{ margin-bottom:5px !important }
    .mb10{ margin-bottom:10px !important }
    .mb20{ margin-bottom:20px !important }
    .mb30{ margin-bottom:30px !important }
    .mb40{ margin-bottom:40px !important }
    .mb50{ margin-bottom:50px !important }
    .mb60{ margin-bottom:60px !important }
    .mb70{ margin-bottom:70px !important }
    .mb80{ margin-bottom:80px !important}
    .mb90{ margin-bottom:90px !important }
    .mb100{ margin-bottom:100px !important }
    .mb110{ margin-bottom:110px !important }
    .mb120{ margin-bottom:120px !important }
    .mb130{ margin-bottom:130px !important }
    .mb140{ margin-bottom:140px !important }
    .mb150{ margin-bottom:150px !important }
    .pb0{ padding-bottom:0px !important }
    .pb10{ padding-bottom:10px !important}
    .pb20{ padding-bottom:20px !important}
    .pb30{ padding-bottom:30px !important}
    .pb40{ padding-bottom:40px !important}
    .pb50{ padding-bottom:50px !important}
    .pb60{ padding-bottom:60px !important}
    .pb70{ padding-bottom:70px !important}
    .pb80{ padding-bottom:80px !important}
    .pb90{ padding-bottom:90px !important}
    .pb100{ padding-bottom:100px !important}
    .pb110{ padding-bottom:110px !important}
    .pb120{ padding-bottom:120px !important}
    .pb130{ padding-bottom:130px !important}
    .pb140{ padding-bottom:140px !important}
    .pb150{ padding-bottom:150px !important}
    .pt0{ padding-top:0px !important }
    .pt10{ padding-top:10px !important }
    .pt20{ padding-top:20px !important }
    .pt30{ padding-top:30px !important }
    .pt40{ padding-top:40px !important }
    .pt50{ padding-top:50px !important }
    .pt60{ padding-top:60px !important }
    .pt70{ padding-top:70px !important }
    .pt80{ padding-top:80px !important }
    .pt90{ padding-top:90px !important }
    .pt100{ padding-top:100px !important }
    .pt110{ padding-top:110px !important }
    .pt120{ padding-top:120px !important }
    .pt130{ padding-top:130px !important}
    .pt140{ padding-top:140px !important }
    
    .pt150{ padding-top:150px !important}

    .fw900{ font-weight: 900 !important}
    .fw800{ font-weight: 800 !important}
    .fw700{ font-weight: 700 !important}
    .fw600{ font-weight: 600 !important}
    .fw500{ font-weight: 500 !important}
    .fw400{ font-weight: 400 !important}
    .fw300{ font-weight: 300 !important}
    .fw200{ font-weight: 200 !important}
    .fw100{ font-weight: 100 !important}

    .pr0{ padding-right:0px !important}
    .pr10{ padding-right:10px !important}
    .pr20{ padding-right:20px !important}
    .pr30{ padding-right:30px !important}
    .pr40{ padding-right:40px !important}
    .pr50{ padding-right:50px !important}
    .pr60{ padding-right:60px !important}
    .pr70{ padding-right:70px !important}
    .pr80{ padding-right:80px !important}
    .pr90{ padding-right:90px !important}
    .pr100{ padding-right:100px !important}
    .pl0{ padding-left:0px !important}
    .pl10{ padding-left:10px !important}
    .pl20{ padding-left:20px !important}
    .pl30{ padding-left:30px !important}
    .pl40{ padding-left:40px !important}
    .pl50{ padding-left:50px !important}
    .pl60{ padding-left:60px !important}
    .pl70{ padding-left:70px !important}
    .pl80{ padding-left:80px !important}
    .pl90{ padding-left:90px !important}
    .pl100{ padding-left:100px !important}

    .lh1{ line-height: 1 }
    .lh2{ line-height: 2 }
    .lh3{ line-height: 3 }

    .text-left{text-align: left;}
    .text-center{text-align: center}
    .text-right{text-align: right}

    .p-v{
        display: block;
    }
    .m-v{
        display: none;
    }
    @media(max-width:1281px){
        .sub_visual{

        }
    }
    

    a.nav-link.btn.btn-primary.rounded-pill.nav-login.nav-booth{
        display: none;
    }


    @media(max-width:991px){ 
        #navbarCollapse{
            text-align: center;
        }
        .menu-p-v{
            display: none !important;
        }

        .sub_visual.visual01{
            background: url(<?php echo G5_THEME_URL ?>/images/pageheader-m.png) !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }
        .m-mt0{ margin-top:0px  !important}
        .m-mt10{ margin-top:10px  !important}
        .m-mt20{ margin-top:20px  !important}
        .m-mt30{ margin-top:30px  !important}
        .m-mt40{ margin-top:40px  !important}
        .m-mt50{ margin-top:50px  !important}
        .m-mt60{ margin-top:60px  !important}
        .m-mt70{ margin-top:70px  !important}
        .m-mt80{ margin-top:80px  !important}
        .m-mt90{ margin-top:90px  !important}
        .m-mt100{ margin-top:100px  !important}
        .m-mt110{ margin-top:110px  !important}
        .m-mt120{ margin-top:120px  !important}
        .m-mt130{ margin-top:130px  !important}
        .m-mt140{ margin-top:140px  !important}
        .m-mt150{ margin-top:150px  !important}
        .m-mb0{ margin-bottom:0px !important }
        .m-mb10{ margin-bottom:10px !important }
        .m-mb20{ margin-bottom:20px !important }
        .m-mb30{ margin-bottom:30px !important }
        .m-mb40{ margin-bottom:40px !important }
        .m-mb50{ margin-bottom:50px !important }
        .m-mb60{ margin-bottom:60px !important }
        .m-mb70{ margin-bottom:70px !important }
        .m-mb80{ margin-bottom:80px !important}
        .m-mb90{ margin-bottom:90px !important }
        .m-mb100{ margin-bottom:100px !important }
        .m-mb110{ margin-bottom:110px !important }
        .m-mb120{ margin-bottom:120px !important }
        .m-mb130{ margin-bottom:130px !important }
        .m-mb140{ margin-bottom:140px !important }
        .m-pb150{ margin-bottom:150px !important }
        .m-pb0{ padding-bottom:0px !important }
        .m-pb10{ padding-bottom:10px !important}
        .m-pb20{ padding-bottom:20px !important}
        .m-pb30{ padding-bottom:30px !important}
        .m-pb40{ padding-bottom:40px !important}
        .m-pb50{ padding-bottom:50px !important}
        .m-pb60{ padding-bottom:60px !important}
        .m-pb70{ padding-bottom:70px !important}
        .m-pb80{ padding-bottom:80px !important}
        .m-pb90{ padding-bottom:90px !important}
        .m-pb100{ padding-bottom:100px !important}
        .m-pb110{ padding-bottom:110px !important}
        .m-pb120{ padding-bottom:120px !important}
        .m-pb130{ padding-bottom:130px !important}
        .m-pb140{ padding-bottom:140px !important}
        .m-pb150{ padding-bottom:150px !important}
        .m-pt0{ padding-top:0px !important }
        .m-pt10{ padding-top:10px !important }
        .m-pt20{ padding-top:20px !important }
        .m-pt30{ padding-top:30px !important }
        .m-pt40{ padding-top:40px !important }
        .m-pt50{ padding-top:50px !important }
        .m-pt60{ padding-top:60px !important }
        .m-pt70{ padding-top:70px !important }
        .m-pt80{ padding-top:80px !important }
        .m-pt90{ padding-top:90px !important }
        .m-pt100{ padding-top:100px !important }
        .m-pt110{ padding-top:110px !important }
        .m-pt120{ padding-top:120px !important }
        .m-pt130{ padding-top:130px !important}
        .m-pt140{ padding-top:140px !important }
        
        .p-v{
            display: none !important;
        }
        .m-v{
            display: block;
        }

        /* 모바일에서 오른쪽 넘어가*/
        .row{
            margin-right: initial !important;
            margin-left: initial !important
        }

          .content_wrap{
            margin-top:-30px;
          }

          .login-cover{
            padding:30px !important;
          }
          
        .login-field{
            width:100% !important;
        }
        .nav-login, .nav-logout{
            margin: 0 auto !important;
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }
        .logout-btn{
            margin: 0 auto;
        }
        a.nav-link.btn.btn-primary.rounded-pill.nav-login.nav-logout{
            display: inline-block ;
            margin-left:10px !important;
            margin-right:10px !important;
        }

        a.nav-link.btn.btn-primary.rounded-pill.nav-login.nav-booth{
            display: inline-block;
        }
    }

    .title-container {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 50px;
        padding: 0px 50px;
    }
    
    .title-bar {
        width: 14px;
        height: 60px;
        background-color: #422483;
        flex-shrink: 0;
    }
    
    .title-text {
        font-weight: 900;
        color: #422483;
        font-size: 2.8rem;
        margin: 0;
    }
    .title-text-h3{
        font-size: 2rem;
        color: #422483;
        
    }
    .title-text-h6{

        font-size: 1rem;
        color: #422483;
    }


        /* 탭 스타일 */
        .tabs-container {
            display: flex;
            gap: 20px;
            margin-bottom: 3%;
            justify-content: space-between;
        }

        .tabs-container2{
            justify-content: space-evenly;
        }
        .tab-button {
            background-color: #5A388A;
            color: white;
            border: none;
            padding: 8px 10px;
            font-size: 1.6rem;
            font-weight: 700;
            cursor: pointer;
            border-radius: 15px;
            position: relative;
            transition: all 0.3s ease;
            min-width: 30%;
        }

        .tab-button:hover {
            background-color: #6a4c93;
        }

        .tab-button.active {
            background-color: #5A388A;
            position: relative;
        }

        /* 활성 탭의 화살표 모양 */
        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px 25px 0 25px;
            border-color: #5A388A transparent transparent transparent;
            z-index: 10;
        }

        /* 컨텐츠 영역 */
        .content-area {
            background-color: #ffffff66;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            min-height: 400px;
            margin-top: -1px;
            border:2px solid #fff;
        }

        .tab-content {
            display: none;
        }

        .tab-content img{
            margin: 0 auto;
            width: 100%;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 반응형 */
        @media (max-width: 768px) {
            .tabs-container {
                flex-wrap: wrap;
            }
            
            .tab-button {
                min-width: auto;
                flex: 1;
                padding: 12px 20px;
                font-size: 1rem;
            }
            
            .tab-button.active::after {
                border-width: 15px 20px 0 20px;
                bottom: -15px;
            }
            
            .content-area {
                padding: 30px;
            }
        }

        p{
            font-size: 1.3rem;
            color: black;
            word-break: keep-all;
        }
        .header-img{
            padding-left:40px;
        }
         /* 네비게이션 스타일 */
    .navbar {
        background-color: #fff;
        padding: 40px 0;
        position: fixed;
        padding-bottom:0;
        top: 0;
        width: 100%;
        z-index: 1000;
        /*box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
    }
    
   .navbar-container {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
        /*padding: 0 80px;*/
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .navbar-nav {
        display: flex;
        align-items: center;
        /*gap: 40px;*/
        list-style: none;
        margin: 0;
        padding: 0 20px;
        width: 100%;
        flex-direction: row; /* 명시적으로 가로 방향 설정 */
        justify-content: space-around;
    }
    
    .nav-item {
        position: relative;
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    }
    
    .nav-link {
        color: #333 !important;
        font-weight: 500;
        font-size: 1.2rem;
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
        padding: 8px 0;
        display: inline-block;
        font-family: 'Pretendard', sans-serif;
    }
    
    /* 현재 페이지 표시 (컨퍼런스 소개) */
    .nav-link.active {
        color: #5A388A !important;
        font-weight: 700;
    }
    
    .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #5A388A;
    }
    
    .nav-link:hover {
        color: #5A388A !important;
        font-weight: 700;
    }
    
    .nav-link:hover::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #5A388A;
        animation: slideIn 0.3s ease;
    }
    
    @keyframes slideIn {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }
    
    .btn-login {
        background-color: #5A388A;
        color: white !important;
        border: none;
        padding: 10px 30px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }
    
    .btn-login::before {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    
    .btn-login:hover {
        background-color: #422483;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(66, 36, 131, 0.3);
    }
    
    /* 햄버거 메뉴 버튼 (모바일용) */
    .navbar-toggler {
        display: none;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #5A388A;
        cursor: pointer;
        padding: 5px 10px;
    }
    
    /* body padding to account for fixed navbar */
    body {
        /*padding-top: 68px;*/
    }
    .login-nav{
        margin-top: -2.5%;
    }
    
    /* 모바일 반응형 */
    @media (max-width: 991px) {
        .row{
            padding-left:10px;
            padding-right:10px;
            margin-bottom:30px;
        }
        .content-area-m{
            padding:20px;
            padding-left:0;
            padding-right:0;
            min-height:fit-content;
        }
        .row .col-12{
            padding-left:0;
        }   
        .row-inner-padding{
            padding:0;
        }
        body{
            padding-top : 0;
            background: linear-gradient(180deg, #FFF 0%, #EFE7F3 12.98%, #DCD0E6 40%, #DBD2E7 100%);;
        }
        .navbar {
            padding: 10px 0;
            background: 0;
            padding-top:5px;
        }
        
        .navbar-container {
            padding: 0 10px;
            position: relative;
            justify-content: left;
        }
        
        .navbar-toggler {
            display: block;
        }
        
        .navbar-nav {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            background-color: white;
            flex-direction: column;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            gap: 10px;
            z-index: 1000;
        }
        
        .navbar-nav.show {
            display: flex;
        }
        
        .nav-link {
            padding: 10px;
            width: 100%;
            text-align: center;
        }
        
        .nav-link::after,
        .nav-link:hover::after,
        .nav-link.active::after {
            display: none;
        }
        
        .btn-login {
            width: 22vw;
            justify-content: center;
            margin-top: 7px;
            font-size: 0.8rem;
            padding: 5px 11px;
            gap:5px;
        }

        .title-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 0px;
            padding: 0px;
            margin-bottom:15px;
        }
        
        .title-bar {
            width: 6px;
            height: 23px;
            background-color: #422483;
            flex-shrink: 0;
            display: none;
        }
        
        .title-text {
            font-weight: 900;
            color: #422483;
            font-size: 1.4rem;
            margin: 0 auto; 
        }



    }

    /* 사용자 정보 스타일 수정 */
.user-info {
    position: relative;
    display: inline-block;
}

.user-name {
    color: #5B3A8C;
    font-weight: 600;
    padding: 8px 16px;
    border: 2px solid #5B3A8C;
    border-radius: 25px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-name:hover {
    background: #5B3A8C;
    color: white;
}

/* 드롭다운 메뉴 - 수정된 부분 */
.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 5px; /* margin-top 대신 padding-top 사용 */
    background: transparent; /* 투명 배경으로 연결 */
    min-width: 150px;
    z-index: 1000;
}

/* 드롭다운 내부 컨테이너 추가 */
.user-dropdown-inner {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.user-dropdown a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.user-dropdown a:last-child {
    border-bottom: none;
}

.user-dropdown a:hover {
    background: #f8f8f8;
    color: #5B3A8C;
}

/* 호버 시 드롭다운 표시 - 수정된 부분 */
.user-info:hover .user-dropdown {
    display: block;
}

/* 연결 다리 역할을 하는 가상 요소 추가 */
.user-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

/* 모바일 스타일 */
@media (max-width: 768px) {
    .user-info {
        width: 100%;
        padding-left:15px;
    }
    
    .user-name {
        display: block;
        text-align: center;

        margin: 10px 0;
    }
    
    .user-dropdown {
        position: static;
        display: block;
        padding-top: 0;
        background: transparent;
        width: 100%;
    }
    
    .user-dropdown-inner {
        box-shadow: none;
        background: #f8f8f8;
    }
    
    .user-dropdown a {
        text-align: center;
        padding: 10px;
    }
}

/* 관리자 표시 추가 */
.user-name.admin {
    background: #FFE082;
    color: #333;
    border-color: #FFC107;
}

.user-name.admin:hover {
    background: #FFC107;
    color: #333;
}


/* 모바일 로그인 모달 */
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    margin: 50px auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    color: #999;
    cursor: pointer;
}

.modal-title {
    color: #5B3A8C;
    font-size: 24px;
    margin-bottom: 30px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 2px solid #E6D4F7;
}

.mobile-login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    margin: 10px 0;
}

.remember-me input {
    width: 18px;
    height: 18px;
}

/* 모바일 로그인 트리거 버튼 */
.mobile-login-trigger {
    display: none;
    width: fit-content;
    background: #5B3A8C;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(91, 58, 140, 0.4);
    cursor: pointer;
    z-index: 999;
}

.form-input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #E6D4F7;
    border-radius: 50px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #FAFAFA;
}

.form-input:focus {
    outline: none;
    border-color: #5B3A8C;
    background: #FFF;
}

.btn-login2{
    width: 100%;
    padding:10px 15px;
    border-radius: 30px;
}


@media(max-width:768px){
    .mobile-login-trigger {
        display: flex;
    }
    
}