/* 기본 스타일 초기화 및 모바일 반응형 설정 */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f6f8; color: #333; }
* { box-sizing: border-box; }

/* 공통 입력/버튼 요소 스타일 */
input { margin-bottom: 10px; padding: 10px; width: 100%; max-width: 300px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 10px 15px; border: none; background: #2980b9; color: white; border-radius: 4px; cursor: pointer; }
button:hover { background: #1c5980; }

#buildingList { list-style-type: none; padding: 0; margin-top: 20px; }
#buildingList li { background: #fff; border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 10px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
#statusMessage { margin-top: 15px; font-weight: bold; }

/* 상단 탭 (Top Bar) 스타일 */
.top-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 56px;
    background-color: #2c3e50; color: #ecf0f1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 15px; z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.top-bar-left { display: flex; align-items: center; width: auto; margin-right: 15px; }
.top-bar-right { display: flex; align-items: center; width: auto; justify-content: flex-end; }
.top-bar-center { flex: 1; text-align: left; font-size: 18px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn { background: none; border: none; color: white; font-weight: bold; font-size: 16px; cursor: pointer; padding: 0; width: auto; margin: 0; display: flex; align-items: center; gap: 4px; }
.account-btn { background: none; border: none; color: white; padding: 0; cursor: pointer; display: flex; align-items: center; }

/* 하단 탭 (Bottom Bar) 스타일 */
.bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 65px;
    background-color: #fff; border-top: 1px solid #e0e0e0;
    display: flex; justify-content: flex-start; align-items: center;
    overflow-x: auto; white-space: nowrap;
    z-index: 1000; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}
.bottom-bar::-webkit-scrollbar { display: none; }
.tab-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 70px; height: 100%; cursor: pointer; color: #95a5a6; transition: color 0.2s;
    /* 모바일 텍스트 선택 및 기본 터치 팝업 차단 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.tab-icon { font-size: 24px; margin-bottom: 4px; }
.tab-label { font-size: 11px; }
.tab-item.active { color: #2980b9; font-weight: bold; }

/* 메인 컨텐츠 영역 (상/하단 탭 뒤로 가려지지 않도록 패딩 추가) */
#app-content {
    padding: 70px 15px 85px 15px;
    max-width: 800px; /* 데스크톱에서 볼 때 너무 넓어지지 않게 고정 */
    margin: 0 auto;
}

/* 모듈 내부 래퍼 (카드 형태) */
.module-card {
    background: white; padding: 15px; border-radius: 8px; 
    margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 사이드바 스타일 */
.sidebar {
    position: fixed; top: 0; left: -260px; width: 260px; height: 100%;
    background-color: #fff; box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    z-index: 2000; transition: left 0.3s ease; display: flex; flex-direction: column;
}
.sidebar.open { left: 0; }
.sidebar-header {
    padding: 16px 20px; background-color: #2c3e50; color: white;
    display: flex; justify-content: space-between; align-items: center; height: 56px;
}
.sidebar-header h2 { margin: 0; font-size: 18px; }
.close-btn { background: none; border: none; color: white; cursor: pointer; padding: 0; display: flex; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li {
    padding: 15px 20px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font-size: 16px; color: #333;
}
.sidebar-menu li:hover { background-color: #f4f6f8; color: #2980b9; }

/* 사이드바 오버레이 (배경 어두워짐) */
.sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1500; display: none;
}
.sidebar-overlay.show { display: block; }

/* 로그인 화면 스타일 */
.login-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f4f6f8; z-index: 3000;
    display: flex; justify-content: center; align-items: center;
}
.login-card {
    background: white; padding: 40px 30px; border-radius: 12px;
    width: 90%; max-width: 400px; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.login-card h2 { margin-top: 0; color: #2c3e50; margin-bottom: 30px; }
.login-card input { width: 100%; max-width: 100%; margin-bottom: 15px; padding: 12px; border-radius: 6px; border: 1px solid #ccc; }
.login-card button { width: 100%; padding: 14px; font-size: 16px; font-weight: bold; border-radius: 6px; }
.error-msg { color: #e74c3c; margin-top: 15px; font-size: 14px; min-height: 20px; }

/* 숨김 유틸리티 클래스 */
.hidden { display: none !important; }

/* 모듈 내 서브 탭 메뉴 (가로 스크롤 및 상단 고정) */
.sub-tab-menu {
    display: flex;
    overflow-x: auto;
    background: white;
    padding: 12px 15px;
    margin: -15px -15px 20px -15px; /* 컨테이너 패딩 무시하고 꽉 차게 */
    position: sticky;
    top: 56px; /* 상단바(56px) 바로 아래 고정 */
    z-index: 900;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}
.sub-tab-menu::-webkit-scrollbar { display: none; } /* 모바일에서 기본 스크롤바 숨김 */
.sub-tab-btn {
    background: #f4f6f8;
    color: #7f8c8d;
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap; /* 글자 줄바꿈 방지 */
    transition: all 0.2s;
    /* 모바일 텍스트 선택 및 기본 터치 팝업 차단 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.sub-tab-btn.active {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

/* 건물 등록 단계 표시기 스크롤바 숨김 */
.step-indicator-container::-webkit-scrollbar { display: none; }