<style>
body{
    margin:0;
    font-family:gulim;
}

/* 전체 */
.container{
    width:780px;
    margin:0 auto;
}
/* 메인 */
.main{
    display:flex;
    border:2px solid #000000;
}



/* 좌측 */
.sidebar{
    width:175px;
    background:#F5F5F5;
    border-right:1px solid #c0c0c0;
}

.logo{
    text-align:center;
    padding:10px 0;
}

.menu{
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FDFDFD;
    border-bottom:1px solid #C0C0C0;
}

/* 본문 */
.content{
    flex:1;
    padding:10px;
}

/* 제목 */
.title-wrap{
    position:relative;
}

.main_bg1{
    position:absolute;
    left:-10px;
    top:-7px;
    width:25px;
    height:25px;
    background:url('/xe/main_bg1.gif') no-repeat;
}

.title{
    font-size:13px;
    padding-left:20px;
}

.inner{
    border:1px solid #ccc;
}

.inner-head{
    border:3px solid #f3f3f3;
    display:flex;
    align-items:center;
    padding:5px;
}

.text{
    margin-top:20px;
    line-height:1.8;
}
/* 🔥 로고 전체 살짝 떠오르게 */
.logo img{
    border-radius:12px;

    /* 부드러운 입체 그림자 */
    box-shadow:
        4px 4px 8px rgba(0,0,0,0.2),
        -2px -2px 5px rgba(255,255,255,0.8);

    /* 살짝 밝고 선명하게 */
    filter: brightness(1.05) contrast(1.05);

    transition: all 0.3s ease;
}

/* 🔥 마우스 올리면 더 떠오름 */
.logo img:hover{
    transform: translateY(-3px);

    box-shadow:
        6px 6px 12px rgba(0,0,0,0.25),
        -3px -3px 6px rgba(255,255,255,0.9);
}
/* 🔥 좌측 전체 박스 입체 */
.sidebar{
    width:175px;
    background:#FFFFFF;
    border-right:1px solid #c0c0c0;

    box-shadow:
        inset 2px 2px 4px rgba(255,255,255,0.7),
        inset -2px -2px 4px rgba(0,0,0,0.1);
}

/* 🔥 메뉴 버튼 입체 */
.menu{
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;

    margin:6px;
    border-radius:8px;

    background:linear-gradient(145deg,#ffffff,);

    box-shadow:
        3px 3px 6px rgba(0,0,0,0.15),
        -2px -2px 5px rgba(255,255,255,0.8);

    border:none;
    transition:all 0.2s ease;
}

/* 🔥 hover → 살짝 떠오름 */
.menu:hover{
    transform:translateY(-2px);

    box-shadow:
        5px 5px 10px rgba(0,0,0,0.2),
        -3px -3px 6px rgba(255,255,255,0.9);
}

/* 🔥 클릭 → 눌림 효과 */
.menu:active{
    transform:translateY(1px);

    box-shadow:
        inset 2px 2px 5px rgba(0,0,0,0.2),
        inset -2px -2px 5px rgba(255,255,255,0.7);
}

/* 🔥 링크 스타일 정리 */
.menu a{
    text-decoration:none;
    color:#333;
    width:100%;
    text-align:center;
}

/* 🔥 자동 높이 영역 */
.text{
    padding:20px;
    text-align:center;
    min-height:200px; /* 기본 높이만 유지 */
}

/* 🔥 실제 삽입 영역 */
.dynamic-content{
    margin-top:10px;
}

.text{
    padding:5px 5px; /* 🔥 ✔ 위아래 20px
✔ 좌우 30px → 여유 공간 확보좌우 여백 증가 */
}
/* 하단 */
.footer{
    margin-top:10px;
    height:80px;
    border:1px solid #c0c0c0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    background:#fff;
}
</style>