/* 기본 스타일 */
.support-container {
    flex-grow: 1;
    /* 화면 높이 채우기 */
    background-color: #f4f4f4;
    /* 연한 회색 배경 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* 세로 방향 정렬 */
    align-items: center;
    /* 가로축 중앙 정렬 */
    gap: 20px;
}

/* 뒤로가기 버튼 및 제목 */
.header-with-back {
    display: flex;
    align-items: center;
    width: 100%;
}

.header-with-back .back-arrow {
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
}


.header-with-back .header-title {
    font-size: 1.2rem;
    margin: 0 auto;
    padding-right: 50px;
    /* 왼쪽 화살표 크기만큼 오른쪽 안쪽 여백을 주어 정중앙 맞춤 */
}

/* 지원 메뉴 스타일 */
.support-menu {
    width: 100%;
    max-width: 800px;
    /* 너무 넓어지지 않게 제한 */
}

.support-menu .menu-item {
    display: block;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* 기본 그림자 */
    padding: 20px;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.3s ease;
    /* 그림자 변경 시 부드럽게 전환 */
    position: relative;
    /* 내부 화살표의 위치 기준점 */
}

/* 마우스 올렸을 때 입체감 강조 */
.support-menu .menu-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.support-menu .menu-item h3 {
    font-size: 1.3rem;
    color: #007bff;
    /* 파란색 포인트 컬러 */
    margin-bottom: 5px;
}

.support-menu .menu-item p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 10px;
}

/* 오른쪽 끝에 화살표 아이콘 배치 */
.support-menu .menu-item span {
    position: absolute;
    right: 20px;
    /* 오른쪽 끝에서 20px 띄움 */
    top: 50%;
    /* 위에서 50% 위치 */
    transform: translateY(-50%);
    /* 정확한 수직 중앙 정렬 보정 */
    font-size: 0.9rem;
    font-weight: bold;
    color: #888;
}
/* 공지사항 섹션 스타일 */
.support-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    width: 100%;
    max-width: 800px;
}

/* 공지사항 섹션 제목 스타일 */
.support-section h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* 리스트 스타일 초기화 및 디자인 */
.notice-list {
    list-style: none;
    padding: 0;
}

.notice-list li {
    border-bottom: 1px solid #f0f0f0;
    /* 항목 간 구분선 */
}

.notice-list li:last-child {
    border-bottom: none;
    /* 마지막 항목은 선 제거 */
}

/* 리스트 항목 내부 레이아웃 */
.notice-list li a {
    display: flex;
    align-items: center;
    /* 세로 중앙 정렬 */
    padding: 15px 5px;
    text-decoration: none;
    color: #444;
    transition: background-color 0.2s ease;
    flex-wrap: wrap;
    /* 내용이 길면 줄바꿈 허용 */
}

.notice-list li a:hover {
    background-color: #f9f9f9;
    /* 마우스 올리면 배경색 변경 */
}

/* 공지사항 뱃지 스타일 */
.notice-badge {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
    background: #6c757d;
    /* 기본 회색 */
    color: #fff;
}

/* 중요한 뱃지는 빨간색으로 강조 */
.notice-badge.new {
    background: #dc3545;
}

/* 말줄임표 (Text Truncation) */
.notice-title {
    flex-grow: 1;
    /* 남은 공간 차지 */
    font-size: 1rem;
    white-space: nowrap;
    /* 줄바꿈 금지 */
    overflow: hidden;
    /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;
    /* 숨겨진 부분 '...' 처리 */
}

.notice-date {
    font-size: 0.85rem;
    color: #888;
    margin-left: 10px;
    white-space: nowrap;
    /* 날짜가 줄바꿈되지 않도록 고정 */
}

/* 모바일 최적화 (Mobile Optimization) */
@media (max-width: 600px) {
    .notice-list li a {
        position: relative;
        /* 날짜 배치를 위한 기준점 */
        padding-bottom: 25px;
        /* 날짜가 들어갈 하단 여백 확보 */
    }

    /* 제목을 뱃지 아래로 내림 */
    .notice-title {
        width: 100%;
        /* 한 줄 꽉 채움 */
        margin-top: 5px;
        white-space: normal;
        /* 모바일에서는 말줄임 없이 2줄 이상 표시 허용 */
        order: 2;
        /* Flex 순서 변경: 뱃지(1) -> 제목(2) */
    }

    /* 뱃지가 제일 먼저 나오도록 설정 */
    .notice-badge {
        order: 1;
    }

    /* 날짜를 우측 하단으로 이동 */
    .notice-date {
        position: absolute;
        bottom: 5px;
        right: 5px;
        order: 3;
    }
}