/* 메인 헤더 스타일 */
.main-header .container .header-with-back {
    display: flex;
    /* 세로 기준 중앙 정렬 */
    align-items: center;
    /* 부모 컨테이너의 너비를 꽉 채움 */
    width: 100%;
    /* 가로 기준 왼쪽 정렬 시작 */
    justify-content: flex-start;
}

/* 뒤로가기 화살표 스타일 */
.main-header .container .header-with-back .back-arrow {
    /* 글자 크기 설정 (기본 1rem = 약 16px) */
    font-size: 1rem;
    /* 파란색 */
    color: #007bff;
    /* 링크 밑줄 제거 */
    text-decoration: none;
    /* 글자 굵게 강조 */
    font-weight: bold;
    /* 클릭 영역 확보를 위해 상하 5px, 좌우 10px 여백 추가 */
    padding: 5px 10px;
}


.main-header .container .header-with-back .header-title {
    /* 제목 폰트 크기 확대 */
    font-size: 1.2rem;
    /* 가독성을 위한 진한 회색 */
    color: #333;
    /* [중요] 남은 빈 공간을 모두 차지하여 제목을 중앙으로 밀어줌 */
    flex-grow: 1;
    /* 텍스트 자체 가운데 정렬 */
    text-align: center;
    /* 왼쪽의 뒤로가기 버튼 크기만큼 오른쪽에도 여백을 주어 정중앙 배치 */
    margin-right: 60px; 
}

/* 전체 레이아웃 컨테이너 */
.info-container {
    /* 화면 높이가 남을 경우 영역을 확장 */
    flex-grow: 1;
    /* 연한 회색 배경 */
    background-color: #f8f8f8;
    /* 내부 여백: 상하 30px, 좌우 20px */
    padding: 30px 20px;
    /* 내부 요소 정렬을 위한 Flexbox */
    display: flex;
    /* 요소들을 위에서 아래로 배치 */
    flex-direction: column;
    /* 가로축 기준 중앙 정렬 */
    align-items: center;
}

/* 그림자와 둥근 모서리를 사용하여 정보를 카드로 그룹화 */
.info-section {
    /* 카드 배경은 흰색 */
    background: #fff;
    /* 모서리를 8px만큼 둥글게 깎음 */
    border-radius: 8px;
    /* 그림자 효과 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    /* 카드 내부 컨텐츠 여백 */
    padding: 25px;
    /* 카드 간의 하단 간격 */
    margin-bottom: 25px;
    /* 너비 100% 사용 */
    width: 100%;
    /* 최대 화면 크기 제한 */
    max-width: 800px;
}

/* 제목 */
.info-section h2 {
    /* 큰 제목 크기 */
    font-size: 1.8rem;
    color: #333;
    /* 제목과 본문 사이 간격 */
    margin-bottom: 20px;
    /* 제목 아래 연한 회색 구분선 추가 */
    border-bottom: 2px solid #eee;
    /* 구분선과 글자 사이 간격 */
    padding-bottom: 10px;
}

/* 컨텐츠 박스 */
.info-section .content-box {
    /* 위쪽 요소와의 간격 */
    margin-top: 15px;
}

.info-section .content-box h3 {
    /* 중간 제목 크기 */
    font-size: 1.3rem;
    /* 파란색 포인트 컬러 적용 */
    color: #007bff;
    /* 위아래 간격 조정 */
    margin-top: 20px;
    margin-bottom: 10px;
}

.info-section .content-box p,
.info-section .content-box ul {
    /* 본문 기본 폰트 크기 */
    font-size: 1rem;
    /* 줄 간격 설정 */
    line-height: 1.7;
    /* 연한 회색 */
    color: #444;
    margin-bottom: 10px;
    /* 왼쪽 들여쓰기 */
    padding-left: 15px; 
}

/* 리스트 스타일: 앞에 점 표시 */
.info-section .content-box ul {
    list-style-type: disc;
}

/* 리스트 항목 간 간격 */
.info-section .content-box li {
    margin-bottom: 5px;
}

.info-section .content-box .note {
    /* 본문보다 작은 크기 */
    font-size: 0.9rem;
    /* 회색으로 처리하여 중요도 낮춤 */
    color: #6c757d;
    /* 오른쪽 정렬 */
    text-align: right;
    margin-top: 20px;
    padding-right: 0;
}


/* 반응형 웹 */
@media (max-width: 768px) {
    /* 카드의 여백을 줄임 */
    .info-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    /* 제목 크기를 화면에 맞춰 축소 */
    .info-section h2 {
        font-size: 1.6rem;
    }
    .info-section .content-box h3 {
        font-size: 1.2rem;
    }
    /* 본문 글자 크기를 약간 줄임 */
    .info-section .content-box p,
    .info-section .content-box ul {
        font-size: 0.95rem;
    }
}

/* 반응형 웹 */
@media (max-width: 480px) {
    /* 모바일에서는 여백을 더 최소화 */
    .info-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    /* 제목 크기 더 축소 */
    .info-section h2 {
        font-size: 1.4rem;
    }
    .info-section .content-box h3 {
        font-size: 1.1rem;
    }
    /* 본문 크기 축소 */
    .info-section .content-box p,
    .info-section .content-box ul {
        font-size: 0.9rem;
    }
}