header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-evenly;
    padding: 1.8rem 4rem; /* 여백 늘려서 너무 양쪽 끝으로 안 붙게 */
    background-color: #ffeaf0;
    background-image: url('/assets/fresh-snow.png');
    border-bottom: 1px dashed var(--pink);
    box-shadow: 0 4px 10px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* === HEADER BACKWARD (뒤로가기) === */
.header-backward-container {
    display: flex;
    align-items: center;
}

.header-backward-btn {
    background: linear-gradient(145deg, var(--pink), var(--deep-pink));
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 8px rgba(217, 79, 112, 0.3),
        inset 0 0 6px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}

.header-backward-btn:hover {
    transform: translateY(-25%) scale(1.08);
    background: linear-gradient(145deg, var(--deep-pink), #ff7a9e);
    box-shadow:
        0 4px 10px rgba(217, 79, 112, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.6);
}

.header-backward-icon {
    width: 20px;
    height: 20px;
}

/* === HEADER LOGO === */
.logo {
    font-family: 'Anton', 'Galmuri9', cursive;
    font-size: 2.6rem;
    color: var(--deep-pink);
    text-shadow: 1px 1px 2px #fff;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: translateY(-6px) rotate(-1.5deg); /* 살짝 흔들림 */
    text-shadow: 0 0 8px rgba(255, 182, 193, 0.6);
}

/* === HEADER PROFILE (프로필 이미지) === */
.header-profile-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    gap: 0.4rem;
}

/* 이미디 테두리 */
.header-profile-border {
    width: 54px;
    height: 54px;
    border: 2px solid var(--pink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 8px rgba(217, 79, 112, 0.3),
        inset 0 0 6px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}

.header-profile-border:hover {
    transform: translateY(-25%) scale(1.08);
    box-shadow:
        0 4px 10px rgba(217, 79, 112, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.6);
}

/* === HEADER PROFILE > MENU (프로필 메뉴) === */
.header-profile-list {
    position: absolute;
    top: 65px;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: #fffdfd;
    border: 2px solid var(--pink);
    border-radius: 14px;
    box-shadow:
        0 4px 12px rgba(255, 182, 193, 0.3),
        inset 0 0 8px rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    text-align: center; /* 중앙 정렬 */
    min-width: 140px; /* 글자에 맞게 약간 좁게 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0.25s; /* 사라질 때만 visibility 지연 */
    z-index: 30;
}

/* active 상태 */
.header-profile-list.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0s; /* 나타날 땐 즉시 보이게 */
}

/* 항목 스타일 */
.header-profile-list-item {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--pink);
    color: var(--text);
    cursor: pointer;
    transition:
        color 0.25s ease,
        transform 0.15s ease;
}

.header-profile-list-item:last-child {
    border-bottom: none;
}

.header-profile-list-item:hover {
    color: var(--deep-pink);
    transform: translateY(-2px);
}

/* 반응형 — 여백 줄이기 */
@media (max-width: 900px) {
    header {
        padding: 1.2rem 2rem;
    }
    .logo {
        font-size: 2.1rem;
    }
}

.conceal {
    visibility: hidden;
}