@charset "utf-8";

/* [1] 기본 세팅: 전체 페이지 스크롤 차단 */
body { 
    margin: 0; padding: 0; 
    font-family: 'Inter', -apple-system, sans-serif; 
    background: #ffffff; color: #0f1419; 
    height: 100vh; overflow: hidden; 
}
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.x-wrapper { 
    display: flex; 
    height: 100vh; 
    max-width: 1250px; 
    margin: 0 auto; 
}

/* 스크롤바 숨기기 */
.center-content::-webkit-scrollbar, .left-sidebar::-webkit-scrollbar, .right-sidebar::-webkit-scrollbar { display: none; }
.center-content, .left-sidebar, .right-sidebar { -ms-overflow-style: none; scrollbar-width: none; }

/* [2] 좌측 사이드바 (고정) */
.left-sidebar {
    width: 275px;
    flex-shrink: 0;
    height: 100vh;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eff3f4;
    overflow-y: auto;
}

/* 좌측 로고가 빠지면서 메뉴가 너무 위에 붙지 않도록 여백 조정 */
.sidebar-menu { flex: 1; margin-top: 25px; } 
.menu-item { margin-bottom: 5px; }
.menu-item a { display: flex; align-items: center; padding: 12px 20px; border-radius: 30px; font-size: 20px; color: #0f1419; transition: 0.2s; width: fit-content; }
.menu-item a:hover { background-color: #e8f5fe; }
.menu-item.active a { font-weight: 700; }
.menu-icon { margin-right: 20px; font-size: 26px; }
.menu-text { margin-top: 4px; }

.sidebar-footer { padding-bottom: 20px; }
.voiceit-btn { width: 100%; padding: 15px 0; border-radius: 30px; border: none; background-color: #121212; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: 0.2s; margin-bottom: 20px; }
.voiceit-btn:hover { background-color: #121212; }

.profile-box { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 30px; cursor: pointer; transition: 0.2s; }
.profile-box:hover { background-color: #e8f5fe; }
.profile-info { display: flex; align-items: center; }
.profile-img { width: 40px; height: 40px; border-radius: 50%; background-color: #ccc; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 20px; color: #fff; }
.profile-text { display: flex; flex-direction: column; }
.nickname { font-weight: 700; font-size: 15px; }
.username { color: #536471; font-size: 15px; }
.logout-btn { padding: 5px; color: #536471; }
.login-btn { width: 100%; padding: 12px 0; border-radius: 30px; border: 1px solid #cfd9de; background-color: #fff; color: #121212; font-size: 15px; font-weight: 700; text-align: center; cursor: pointer; transition: 0.2s; }
.login-btn:hover { background-color: #e8f5fe; }

/* [3] 중앙 메인 콘텐츠 (이 영역만 스크롤됨) */
.center-content { 
    flex: 1; 
    max-width: 600px; 
    height: 100vh; 
    overflow-y: auto; 
    border-right: 1px solid #eff3f4; 
    position: relative; 
}

.top-bar { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid #eff3f4; z-index: 50; }

/* ★ 추가: 중앙 상단 로고 스타일 */
.center-header-logo { 
    display: flex; 
    align-items: center; 
    justify-content: center; /* 로고를 중앙에 배치 */
    padding: 12px 20px; 
}
.center-header-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.center-logo-img { height: 32px; width: auto; min-width: 40px; object-fit: contain; }
.center-header-logo i { font-size: 32px; color: #0f1419; } /* 이미지가 없을 때 엑스 아이콘 크기 */

.top-tabs { display: flex; }
.tab-item { flex: 1; text-align: center; padding: 15px 0; font-weight: 600; color: #536471; position: relative; transition: 0.2s; }
.tab-item:hover { background-color: #eff3f4; }
.tab-item.active { color: #0f1419; }
.tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: #121212; border-radius: 2px; }

.timeline { padding: 0; }

/* [4] 우측 사이드바 (고정) */
.right-sidebar { 
    width: 350px; 
    flex-shrink: 0;
    height: 100vh; 
    overflow-y: auto; 
    padding: 20px 30px; 
}

.search-box { display: flex; align-items: center; background-color: #eff3f4; border-radius: 25px; padding: 10px 20px; margin-bottom: 20px; }
.search-box i { color: #536471; margin-right: 10px; }
.search-box input { border: none; background: transparent; outline: none; font-size: 15px; flex: 1; }

.widget { background-color: #f7f9f9; border-radius: 20px; padding: 15px; margin-bottom: 20px; }
.widget-title { margin: 0 0 15px 0; font-size: 20px; font-weight: 700; }

.trend-list li a { display: block; padding: 10px 0; }
.trend-category { display: block; font-size: 13px; color: #536471; }
.trend-keyword { display: block; font-weight: 700; font-size: 15px; margin: 2px 0; }
.trend-count { display: block; font-size: 13px; color: #536471; }

.follow-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.follow-user { display: flex; align-items: center; }
.user-img { width: 40px; height: 40px; border-radius: 50%; background-color: #ccc; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 20px; color: #fff; }
.user-info { display: flex; flex-direction: column; }
.follow-btn { background-color: #0f1419; color: #fff; border: none; border-radius: 20px; padding: 8px 15px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
.follow-btn:hover { background-color: #272c30; }

/* 모바일 반응형 처리 */
@media screen and (max-width: 1024px) {
    .x-wrapper { max-width: 100%; display: block; overflow-y: auto; }
    body { overflow-y: auto; height: auto; }
    .left-sidebar { width: auto; height: auto; padding: 10px; border-right: none; position: fixed; bottom: 0; left: 0; right: 0; flex-direction: row; background: #fff; z-index: 100; border-top: 1px solid #eff3f4; justify-content: space-around; }
    .sidebar-footer, .menu-text { display: none; }
    .sidebar-menu ul { display: flex; justify-content: space-around; width: 100%; }
    .sidebar-menu { margin-top: 0; }
    .menu-item a { padding: 15px; }
    .menu-icon { margin-right: 0; font-size: 24px; }
    .center-content { width: 100%; max-width: 100%; border-right: none; height: auto; padding-bottom: 60px; overflow-y: visible; }
    .right-sidebar { display: none; }
}