/* 헤더 영역 */
.header{
    width:80%;
    margin: 0 10%;
    border-bottom:1px solid #eee;
    background:#fff;
}
.header-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
}

/* 로고 */
.logo{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
}
.logo-mark{
    width:18px;
    height:24px;
    background:linear-gradient(to top,#0052ff,#6bb4ff);
    border-radius:2px;
}
.logo-text{
    font-size:22px;
    font-weight:700;
}

/* GNB 메뉴 */
.gnb{
    flex:1;
    display:flex;
    justify-content:center;
}
.gnb ul{
    list-style:none;
    display:flex;
    gap:32px;
}
.gnb a{
    text-decoration:none;
    font-size:15px;
    color:#555;
    padding-bottom:4px;
}
.gnb a:hover,
.gnb a.active{
    color:#0052ff;
    border-bottom:2px solid #0052ff;
}

/* 우측 유틸(로그인) */
.util{
    min-width:60px;
    text-align:right;
    font-size:14px;
}
.util a{
    text-decoration:none;
    color:#666;
}
.util a:hover{
    color:#0052ff;
}

/* 상단 우측 유저 메뉴 */
.user-menu {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.user-menu .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    padding: 6px 10px;
}

/* 드롭다운 리스트 */
.user-menu .dropdown {
    position: absolute;
    top: 32px;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    width: 150px;
    display: none;
    z-index: 999;
    text-align: center;
}

/* 항목 */
.user-menu .dropdown li {
    width: 100%;
}

.user-menu .dropdown li a {
    display: block;
    padding: 10px 14px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s;
}

.user-menu .dropdown li a:hover {
    background: #f3f4f6;
}

/* 드롭다운 열릴 때 */
.user-menu.active .dropdown {
    display: block;
}

/* 반응형 */
@media (max-width:768px){
    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .gnb{
        justify-content:flex-start;
    }
    .gnb ul{
        gap:18px;
        font-size:14px;
        flex-wrap:wrap;
    }
    .hero{height:260px;}
}
.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.user-name .arrow {
    display: inline-block;
    margin-left: 4px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.2s;
    position: relative;
    top: -1px;
}

/* 메뉴 열렸을 때 아래 → 위 방향 변환 */
.user-menu.active .arrow {
    transform: rotate(-135deg);
}