/* main_page_style.css */

/* 응급지원 div 스타일 */
/* 응급지원 컨테이너 중앙 정렬 및 위치 조정 */
.emergency-support-container {
    margin-bottom: 10px;
}

/* 응급지원 배너 스타일 */
.emergency-support {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #ee6344, #ff9966);
    padding: 10px 20px;
    /* 내부 여백 */
    border-radius: 10px;
    font-family: 'Pretendard', Arial, sans-serif;
    /* 폰트 */
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 그림자 효과 */
    max-width: 340px;
    /* 배너의 최대 너비 */
    width: 100%;
    /* 부모 너비를 따름 */
}

/* 이송기록 갤러리 */
.transfer-record-container {
    width: 1160px;
    margin: 0 auto;
    margin-top: 30px;    
}

/* 링크 스타일 */
.transfer-record-container a {
    text-decoration: none;
    color: inherit;
}

.transfer-record-container a.me-8 {
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 0;
    font-size: 14px;
    font-weight: bold;
    color: #4d4d4d;
    text-decoration: none;
    padding: 0px 20px;
    transition: all 0.3s ease;
    margin-right: 8rem;
}

.transfer-record-container i {
    margin-right: 5px;
}

/* 아이콘 스타일 */
.emergency-support img {
    height: 40px;
    margin-right: 10px;
    /* 텍스트와의 간격 */
}

/* 응급지원 텍스트 */
.emergency-support span {
    display: inline-block;
}

/* 첫 번째 컨테이너 전체 스타일 */
.first-container {
    display: flex;
    justify-content: space-between;
    /* 양쪽 간격 분리 */
    align-items: flex-start;
    /* 세로 정렬 */
    gap: 20px;
    /* 카드 간 기본 간격 */
    margin: 0px auto;
    /* 위아래 여백 */
    margin-top: 120px;
    max-width: 1200px;
    /* 최대 너비 */
    padding: 0px 20px;
}

/* 왼쪽 및 오른쪽 카드 스타일 */
.first-left-container {
    /* 카드 배경 */
    border-radius: 10px;
    /* 모서리 둥글게 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 카드 내부 여백 */
    max-width: 780px;
    /* 각 카드 고정 너비 */
    height: 470px;
    font-family: 'Pretendard', Arial, sans-serif;
    /* 폰트 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    flex: 0 0 auto;
    /* Flexbox의 유동 크기 비활성화 */
    overflow: hidden;
    /* 넘치는 슬라이드를 숨김 */
    width: 100%;
    /* 전체 너비 */
    position: relative;
}

/* 슬라이더 래퍼 */
.slider-wrapper {
    position: relative;
    /* 화살표 위치를 설정하기 위한 상대 위치 */
    overflow: hidden;
    /* 넘치는 슬라이드 숨김 */
    width: 100%;
    /* 부모 너비에 맞춤 */
    height: 100%;
    /* 전체 높이를 부모에 맞춤 */
    display: flex;
    /* 전체를 Flexbox로 배치 */
    align-items: center;
    /* 세로 가운데 정렬 */
}

/* 슬라이더 내부 */
.slider {
    display: flex;
    /* 슬라이드를 가로로 배치 */
    transition: transform 0.5s ease-in-out;
    /* 부드러운 이동 효과 */
    width: 100%;
    /* 슬라이드 너비 */
    height: 100%;
    /* 부모 높이를 따라감 */
}

/* 개별 슬라이드 */
.slide {
    min-width: 100%;
    /* 슬라이드 하나의 너비 */
    height: 100%;
    /* 부모 높이를 따라감 */
    text-align: center;
    display: flex;
    flex-direction: column;
    /* 이미지와 텍스트를 세로 배치 */
    align-items: center;
    /* 가로 가운데 정렬 */
    justify-content: center;
    /* 세로 가운데 정렬 */
    gap: 10px;
    /* 요소 간 간격 */
    box-sizing: border-box;
    /* 패딩 포함 */
}

/* 슬라이드 이미지 */
.slide img {
    max-width: 100%;
    /* 부모 컨테이너 너비에 맞춤 */
    width: 100%;
    /* 기본 이미지 크기 */
    height: auto;
    /* 비율 유지 */
}

/* 슬라이드 텍스트 */
.slide h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.swiper-slide {
    display: flex;
    flex-direction: column; /* 요소를 수직 정렬 */
    align-items: center; /* 가운데 정렬 */
    text-align: center;
}

/* 화살표 버튼 */
.arrow {
    position: absolute;
    top: 50%;
    /* 세로 가운데 정렬 */
    transform: translateY(-50%);
    background-color: transparent;
    /* 동그라미 이미지를 사용하므로 배경 제거 */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 5;
    background-size: cover;
    /* 이미지 전체를 버튼 크기에 맞춤 */
    background-repeat: no-repeat;
    background-position: center;
}

/* 왼쪽 화살표 */
.left-arrow {
    left: 20px;
    /* 왼쪽 위치 */
    background-image: url('../resource/back.png');
    /* 왼쪽 화살표 이미지 */
}

/* 오른쪽 화살표 */
.right-arrow {
    right: 20px;
    /* 오른쪽 위치 */
    background-image: url('../resource/forward.png');
    /* 오른쪽 화살표 이미지 */
}


.arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
    /* hover 시 색 변경 */
}

/* 오른쪽 카드 스타일 */
.first-right-container {
    font-family: 'Pretendard', Arial, sans-serif;
    text-align: center;
}

/* 폼 컨테이너 스타일 */
.form-content-container {
    max-width: 340px;
    height: 400px;
    background: lightgrey;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-family: 'Pretendard', Arial, sans-serif;
    text-align: center;
}

/* 제목 스타일 */
.first-right-container h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 강조 텍스트 */
.first-right-container .highlight {
    color: #ee6344;
    font-weight: bold;
}

/* 폼 그룹 */
.form-group {    
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    padding-left: 4px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

/* 폼 컨테이너 Flexbox 설정 */
.form-container {
    display: flex; /* Flexbox로 설정 */
    flex-direction: column; /* 세로 방향 정렬 */
    height: 310px; /* 부모 높이 100% */
}

/* 버튼 스타일 */
.submit-button {
    margin-top: auto; /* 남은 공간을 위쪽으로 밀어 버튼이 하단에 위치 */
    width: 100%;    
    display: inline-block;
    background-color: coral;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    padding-left: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    background: linear-gradient(to bottom, coral, #e6523d);
}

/* 아이콘 추가 (버튼 옆 화살표) */
.submit-button::after {
    content: "→";
    margin-left: 10px;
    font-size: 18px;
}

/* 카드 제목 */
.first-left-container h3,
.first-right-container h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;    
    max-width: 540px;
}

/* 카드 내용 */
.first-left-container p,
.first-right-container p {
    font-size: 16px;
    color: #555;
    margin-bottom: 0px !important;
}

/* 전체 BOTTOM 컨테이너 스타일 */

/* 각 항목 스타일 */
.bottom-item {
    box-sizing: border-box;
    /* 패딩 포함 크기 계산 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    font-family: 'Pretendard', Arial, sans-serif;
}

/* 이미지 스타일 */
.bottom-item img {
    height: 40px;
    width: auto;
}

/* 제목 스타일 */
.bottom-item h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* 내용 스타일 */
.bottom-item p {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* 기본 데스크톱용 */
.first-bottom-swiper {
    width: 100%;
    max-width: 1200px;
    /* 필요하면 최대 너비 제한 */
    margin: 0 auto;
    /* 가운데 정렬 */
    margin-top: 130px;
    margin-bottom: 90px;
}

.swiper-slide.bottom-item {
    width: auto;
    margin: 0 auto;
    max-width: 1200px;
}

.swiper-slide.bottom-item {
    /* 각 슬라이드 내부 스타일은 자유롭게 */
    text-align: center;
    font-family: 'Pretendard', Arial, sans-serif;
}

/* 이미지 크기 */
.bottom-item img {
    height: 40px;
    width: auto;
    margin-bottom: 8px;
}

/* 추가 텍스트 스타일 등 필요시 */
.bottom-item p {
    font-size: 14px;
    color: #555;
}