/* =========================================
   [1] PC 공통 레이아웃
   ========================================= */

/* 상단 투명 배경 바 (고정) */
.pc-top-bar {
    position: fixed; /* absolute -> fixed 변경: 스크롤해도 고정 */
    top: 0; left: 0; width: 100%; height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 1. 중앙 헤더 (로고) - 유동적 너비 허용 */
.header-center-group {
    position: fixed; /* absolute -> fixed 변경: 스크롤해도 고정 */
    top: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex; justify-content: center;
    pointer-events: none;
    width: auto;
    max-width: 100%;
    
    /* 부드러운 전환 효과 추가 */
    transition: all 0.3s ease; 
}

.header-shape {
    background-color: #00427a;
    color: #ffffff;
    
    /* [기본 상태] 넉넉한 패딩과 간격 */
    padding: 10px 25px 15px 25px; 
    gap: 15px; /* 기본 간격 */
    
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center; 
    
    white-space: nowrap;
    /* 패딩과 간격 변화에 애니메이션 적용 */
    transition: padding 0.3s ease, gap 0.3s ease; 
}

/* --- [스크롤 시 축소 효과 (.scrolled)] --- */
.header-center-group.scrolled {
    top: -5px; /* 살짝 위로 붙여서 컴팩트하게 */
}

.header-center-group.scrolled .header-shape {
    /* [축소 상태] 패딩을 줄이고, 특히 간격(gap)을 확 줄임 */
    padding: 8px 20px 10px 20px;
    gap: 6px; /* 15px -> 6px 로 축소: 멀어 보이는 현상 해결 */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* 로고 이미지 */
.logo-img { 
    height: 30px; 
    width: auto; 
    display: block; 
    flex-shrink: 0; 
    transition: height 0.3s ease; /* 크기 변화 애니메이션 */
}

/* 스크롤 시 로고 크기 축소 */
.header-center-group.scrolled .logo-img {
    height: 22px; 
}

/* 학교 이름 텍스트 */
.header_text { 
    font-size: 19px; 
    font-weight: 800; 
    color: #fff; 
    padding-top: 2px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.3s ease; /* 글자 크기 변화 애니메이션 */
}

/* 스크롤 시 글자 크기 축소 */
.header-center-group.scrolled .header_text {
    font-size: 16px;
}

.help-button {
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%; color: #fff; font-weight: bold; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.header-center-group.scrolled .help-button {
    width: 24px; height: 24px; font-size: 14px; /* 버튼도 살짝 작게 */
}
.help-button:hover { background: #fff; color: #00427a; }


/* 2. 왼쪽 검색창 */
.search-container {
    position: fixed; /* absolute -> fixed */
    top: 10px; left: 20px;
    width: 320px; 
    z-index: 2100;
    display: flex; gap: 8px;
    transition: all 0.3s ease;
}

.search-wrapper { position: relative; flex: 1; }
.search-input-box {
    width: 100%; height: 40px; padding: 0 15px;
    border-radius: 20px; border: 1px solid #ccc; background: #fff;
    outline: none; font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.advanced-search-btn {
    height: 40px; padding: 0 15px; border-radius: 20px;
    background: #00427a; color: white; border: none; font-weight: bold;
    cursor: pointer; font-size: 13px; white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.search-results-list {
    position: absolute; top: 46px; left: 0; width: 100%;
    background: white; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px; overflow-y: auto; display: none;
}
.search-item { padding: 10px 15px; border-bottom: 1px solid #f1f1f1; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; }
.search-item:hover { background: #f0f7ff; font-weight: bold; }


/* 3. 오른쪽 로그인 */
#auth-area {
    position: fixed; /* absolute -> fixed */
    top: 12px; right: 20px;
    z-index: 2100;
    display: flex; align-items: center;
    transition: all 0.3s ease;
}
#login-form, #user-info { display: flex; align-items: center; gap: 5px; }
#auth-area input {
    width: 100px; height: 36px; padding: 0 8px;
    border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
#auth-area button {
    height: 36px; padding: 0 12px; border: none; border-radius: 4px;
    font-size: 13px; cursor: pointer; color: white; font-weight: bold;
}
.btn-login { background-color: #4A90E2; }
.btn-join { background-color: #28a745; }
.btn-logout { background-color: #666; }
.btn-admin { background-color: #e74c3c; }


/* =========================================
   [2] 중간 해상도 (좁은 PC/태블릿) 대응
   ========================================= */
@media (min-width: 901px) and (max-width: 1280px) {
    /* 좌우 패딩을 줄여서 공간 확보 */
    .header-shape { padding: 8px 15px 12px 15px; gap: 8px; }
    
    .header_text { font-size: 16px; }
    .logo-img { height: 24px; }
    .help-button { width: 24px; height: 24px; font-size: 14px; }

    .search-container { left: 10px; width: 260px; }
    #auth-area { right: 10px; }
    #auth-area input { width: 80px; }
}

/* =========================================
   [3] 모바일 반응형 (완전한 레이아웃 변경)
   ========================================= */
@media (max-width: 900px) {
    .pc-top-bar { display: none; } 

    /* 헤더 모양 변경: 상단 전체 차지 */
    .header-center-group { 
        width: 100%; top: 0; left: 0; transform: none; 
        position: fixed; /* 모바일에서도 고정 */
    }
    .header-shape {
        width: 100%; border-radius: 0 0 20px 20px;
        padding: 10px 0; gap: 8px;
    }
    .header_text { font-size: 16px; }

    /* 검색창: 헤더 아래로 */
    .search-container {
        top: 60px; left: 50%; transform: translateX(-50%);
        width: 94%; max-width: 500px;
        position: fixed; /* 검색창도 고정 */
    }

    /* 로그인: 하단 고정바 */
    #auth-area {
        position: fixed; bottom: 0; left: 0; right: 0; top: auto;
        width: 100%; height: 60px;
        background: white; border-top: 1px solid #ddd;
        justify-content: center; padding: 0;
        z-index: 3000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    #auth-area input { width: 80px; }
    
    .boundary-toggle-container { bottom: 70px !important; }
}