* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;        /* 1rem = 10px */
    scroll-behavior: smooth;
}
.body{
    margin: 0 auto;
}
/*main-layout*/
.main-layout {
    width: 100%;
    min-width: 1440px;
    height: 100vh;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 80px 1360px;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
  "sidebar  header"
  "sidebar  content";
}
.sidebar { grid-area: sidebar; border: 1px solid #aaa; }
.header  { grid-area: header;  border: 1px solid #aaa; }
.content { grid-area: content; border: 1px solid #aaa; margin-top: 10px;}
           /*padding-right: 20px;}*/


.sidebar { background: #f0f0f0; }
.header  { background: #fafafa; }
.content { background: #ffffff; }


/* 사이드바 css */
/* 사이드바 기본 설정 */
.sidebar {
    width: 80px;
    background-color: #ffffff;
    border-right: 1px solid #ddd;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 각 메뉴 항목 스타일 */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    cursor: pointer;
    transition: background 0.3s;
}

/*.nav-item:hover {*/
/*    background-color: #f0f0f0;*/
/*}*/

/* 아이콘 스타일 */
.side-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

/* 텍스트 스타일 */
.side-text {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

/* 링크 기본 스타일 제거 */
.nav-item a {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit;        /* 부모(li)의 글자색 상속 */
    display: flex;         /* flex를 유지해야 정렬이 깨지지 않음 */
    flex-direction: column;
    align-items: center;
    width: 100%;           /* 클릭 영역을 가로로 꽉 채움 */
    padding: 10px 0;       /* li에 있던 패딩을 a로 옮기면 클릭 범위가 넓어짐 */
}

/* 마우스 올렸을 때 효과 (선택 사항) */
/*.nav-item a:hover {*/
/*    background-color: #f4f4f4;*/
/*}*/

/* 이미지 크기 조정 (이미지가 너무 크다면) */
.side-icon img {
    width: 24px;  /* 적절한 크기로 조절 */
    height: 24px;
}


/* 헤더부분 css */
.header-container {
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center;            /* 세로 중앙 정렬 */
    padding: 0 40px;
    height: 100%;                   /* 헤더 높이 설정 */
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

/* 로고 이미지 크기 조절 */
.header-logo img {
    height: 80px;
    display: block;
    width: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* 프로필 영역 스타일 */
.header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-info {
    display: flex;            /* 내부 요소들을 flex로 배치 */
    flex-direction: row;      /* 가로로 나열 */
    align-items: center;      /* 이름과 아이콘의 세로 중앙 맞춤 */
    gap: 12px;                /* 이름과 아이콘 사이 간격 */
}

.logout-btn {
    cursor: pointer;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 8px;
    color: #666;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: #eeeeee;
    color: #333;
}

/* 사용자 이름 스타일 */
.profile-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* 프로필 이미지를 감싸는 원형 박스 (이미지처럼 보이게 함) */
.profile-img-wrapper {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden; /* 영역 밖으로 나가는 이미지 숨김 */
    border: 1px solid #ddd; /* 테두리 추가 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.profile {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 채움 */
}

/* 알림 전체 컨테이너 */
/* 전체 알림 컨테이너: 위치와 크기 고정 */
/* 알림창 본체: 오른쪽 상단 작게 고정 */
.chat-toast {
    position: fixed !important;
    top: 15px !important;
    right: -350px !important; /* 화면 밖 대기 */
    width: 280px !important; /* 너비 고정 */
    max-width: 300px !important;
    /* 1. 배경 투명도 대폭 수정 (0.7 -> 0.4) */
    background-color: rgba(255, 255, 255, 0.3) !important;

    /* 2. 블러 효과 (접두사 포함하여 확실하게 적용) */
    backdrop-filter: blur(15px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(15px) !important;


    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    z-index: 999999 !important;
    transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
    overflow: hidden !important;
}

/* 나타났을 때 */
.chat-toast.active {
    right: 20px !important;
}

/* 내부 레이아웃 */
.toast-inner {
    display: flex !important;
    padding: 15px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 프로필 이미지 영역 */
.toast-profile {
    width: 42px !important;
    height: 42px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.toast-profile img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important; /* 원형 프로필 */
    object-fit: cover !important;
}

/* 텍스트 영역 */
.toast-text-area {
    flex: 1 !important;
    min-width: 0 !important; /* 텍스트 생략 처리를 위한 필수 설정 */
}

.toast-user-name {
    display: block !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1d1d1f !important;
    margin-bottom: 2px !important;
}

.toast-message {
    display: block !important;
    font-size: 13px !important;
    color: #3a3a3c !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* 길면 ... 처리 */
}

/* 호버 시 살짝 반응 */
.chat-toast:hover {
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}