/* ============================================== */
/* ============= 푸터 공통 스타일 ============= */
/* ============================================== */

/* 푸터 전체 컨테이너 */
.footer {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    background-color: #fff;
}

/* 푸터 섹션 구분선 */
.f_line {
    height: 1px;
    background-color: #eee;
    width: 100%;
    margin: 0 auto;
}

/* 세로 구분선 스타일 */
.footer-vertical-divider {
    width: 1px; /* 선의 두께 */
    background-color: #eee; /* 선의 색상 */
    border: none; /* hr 기본 border 제거 */
    display: block; /* Flex 아이템으로 잘 동작하도록 블록 설정 */
    flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
}

/* 푸터 상단 정보 영역 컨테이너 */
.footer_container {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 푸터 상단 컬럼들을 담는 Flex 컨테이너 */
.footer-top-container{
    width: 100%;
    margin: 0 auto;
}
.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 컬럼들을 중앙 정렬 */
    gap: 30px; /* 컬럼 간 간격 */
    align-items: flex-start; /* 컬럼들을 상단 정렬 */
}

/* 각 푸터 컬럼의 기본 스타일 */
.footer-column {
    box-sizing: border-box;
    position: relative;
    /* 이전 flex: 1 1 0%; padding: 0 10px; 는 각 컬럼별 min-width와 gap으로 조정 */
    flex: 1 1 auto; /* 기본적으로 유동적 너비 설정 */
    display: flex; /* 내부 콘텐츠 정렬을 위해 flex로 설정 */
    flex-direction: column; /* 제목과 콘텐츠 랩을 세로로 쌓기 */
    align-items: flex-start; /* 좌측 정렬 (오른쪽 정렬 컬럼은 개별 오버라이드) */
    text-align: left; /* 텍스트 좌측 정렬 (오른쪽 정렬 컬럼은 개별 오버라이드) */
}

/* 컬럼 제목 공통 스타일 */
.footer_title {
    font-weight: bold;
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
    text-align: left; /* 기본 좌측 정렬 */
}


/* ============================================== */
/* ============= footer-info-2 (대표전화) ============= */
/* ============================================== */

.footer-column.footer-info-2 {
    border-right: 1px solid #eee;
    padding: 20px 20px 20px 0;
    height: 130px;
}

/* 대표전화 정보와 영업시간 목록을 감싸는 Flex 컨테이너 */
.info-2-content-wrap {
    display: flex;
    justify-content: space-between; /* 전화번호와 영업시간을 양 끝으로 분리 */
    align-items: flex-start; /* 세로 상단 정렬 */
    width: 100%; /* 부모 너비에 맞춤 */
    flex-wrap: wrap; /* 공간 부족 시 줄바꿈 허용 (반응형 대비) */
}

/* 대표전화 제목과 전화번호 텍스트 컨테이너 */
.info-2-content-txt {
    flex-grow: 1; /* 남는 공간을 모두 차지 */
    min-width: 180px; /* 텍스트가 너무 줄어들지 않도록 최소 너비 설정 */
    display: flex; /* 제목과 전화번호를 세로로 쌓기 위해 flex 설정 */
    flex-direction: column;
    flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
}

/* 영업시간 목록을 담는 컨테이너 (이전 .footer-info-content 역할) */
.info-2-content {
    /* 이 컨테이너는 이제 flex item이므로, 내부 콘텐츠 정렬에만 집중합니다. */
}

/* 대표전화 번호 스타일 */
.tel_num_text {
    font-size: 35px;
    font-weight: bold;
    color: #00c6ac;
    margin-bottom: 0;
    line-height: 1;
}

/* 영업시간 목록 (ul.f_center) */
.footer-column ul.footer_center {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* 남는 공간을 최대한 가져가도록 */
    line-height: 1.5;
}

.footer-column ul.footer_center li {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

/* '본 사' 텍스트 정렬 보조 */
.align {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
}
.align-text {
    font-size: 13px;
    color: #666;
    letter-spacing: 11px;
    display: inline-block;
}

.a_txt{
    margin-left: 57px;
}

.em_sp{
    padding-left: 22px;
}
/* ================================================== */
/* ============= footer-info-3 (접수 및 입금확인 시간) ============= */
/* ================================================== */

.footer-column.footer-info-3 {
    border-right: 1px solid #eee;
    padding: 20px 20px 20px 0;
    height: 130px;
}

/* 텍스트 목록과 버튼 그룹을 감싸는 Flex 컨테이너 */
.receipt-info-content-wrap {
    display: flex;
    justify-content: space-around;
    align-items: flex-start; /* 세로 상단 정렬 */
    width: 100%; /* 부모 너비에 맞춤 */
    flex-wrap: wrap; /* 공간이 부족하면 줄바꿈 허용 (반응형 대비) */
}


/* 접수/입금확인 텍스트 목록 */
.receipt-text-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.receipt-text-list li {
    font-size: 13px;
    color: #666;
}

/* 버튼 그룹 (입금계좌 확인, 카드결제) */
.receipt-buttons {
    margin-top: 20px;
    display: flex;
    flex-direction: column; /* 버튼들을 세로로 쌓기 */
    gap: 4px; /* 버튼 간 간격 */
    flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
    align-items: flex-end; /* 버튼들을 오른쪽 정렬 */
}

/* 버튼 내 아이콘 공통 스타일 */
.c_icon {
    margin-right: 10px;
}

/* 버튼 공통 스타일 */
.dtime1 {
    width: 100%;
    background-color: #00c6ac;
    padding: 7px 20px; /* 패딩 조정 */
    font-size: 15px; /* 폰트 크기 조정 */
    border-radius: 50px;
    color: white;
    font-weight: 500; /* 폰트 굵기 조정 */
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center; /* 버튼 내부 텍스트 중앙 정렬 */
    align-items: center;
    text-decoration: none;
    margin: 0; /* 기존 마진 초기화 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.dtime1:hover {
    opacity: 0.9;
}


/* ======================================= */
/* ============= footer-info-4 (SNS) ============= */
/* ======================================= */

.footer-column.footer-info-4 {
    min-width: 200px;
    align-items: flex-end; /* SNS 컬럼은 기본적으로 오른쪽 정렬 */
    text-align: right; /* 텍스트도 오른쪽 정렬 */
    padding: 20px 0 20px 0px;
    height: 130px;
}

/* SNS 제목과 아이콘 그룹을 감싸는 Flex 컨테이너 */
.info-4-content-wrap {
    display: flex;
    justify-content: space-between; /* 텍스트와 SNS 아이콘을 양 끝으로 분리 */
    align-items: flex-start; /* 세로 상단 정렬 */
    width: 100%;
    flex-wrap: wrap; /* 반응형 대비 */
}

/* SNS 제목 및 설명 텍스트 컨테이너 */
.info-4-content-txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 남는 공간을 모두 차지 */
    min-width: 120px; /* 텍스트가 너무 줄어들지 않도록 최소 너비 설정 */
    text-align: right; /* 텍스트를 오른쪽 정렬 */
}

/* SNS 아이콘을 포함하는 컨테이너 */
.info-4-content {
    /* 특별한 flex 속성 없음. 내부 sns_icons 정렬에 집중 */
}



/* ul.f_right는 이제 .sns_icons를 감싸는 역할 (직접 스타일링은 .sns_icons에서) */
.footer-column.footer-info-4 ul.f_right {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* SNS 아이콘 그룹 */
.sns_icons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: flex-end; /* SNS 아이콘 그룹 전체를 오른쪽 정렬 */
}

/* SNS 아이콘 한 줄 (현재는 단일 그룹) */
.sns-group-row-single {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end; /* 아이콘들을 오른쪽 정렬 */
    width: 100%;
}

/* 개별 SNS 링크 아이템 */
.sns-link-item {
    text-decoration: none;
    transition: opacity 0.2s;
    width: auto; /* 아이콘 크기에 맞춰 유동적으로 */
    max-width: 60px; /* 최대 너비 제한 */
    box-sizing: border-box;
}

.sns-link-item:hover {
    opacity: 0.7;
}

/* SNS 아이콘 이미지 및 텍스트 래퍼 */
.sns-item-wrapper {
    display: flex;
    flex-direction: column; /* 아이콘과 텍스트를 세로로 쌓기 (현재 텍스트 없음) */
    align-items: center; /* 중앙 정렬 */
    border-radius: 50%; /* 원형으로 유지 */
    text-align: center;
}


.icon-img{
    width: 42px;
}

/* ================================================== */
/* ============= 푸터 메뉴 및 저작권 정보 등 ============= */
/* ================================================== */

/* 푸터 메뉴 영역 */

.footer-menu ul {
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 30px;
    padding: 5px 0;
}

.footer-menu ul li a {
    width: 100%;
    color: #333;
    text-decoration: none;
/*    padding: 5px 0;*/
    display: block;
    white-space: nowrap;
}

.footer-menu ul li a img{
    width: 60px;
    margin-right: 34px;
}

.footer-menu ul li a:hover {
    color: #00c6ac;
}

/* 저작권 및 주소 정보 영역 */
.copy_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-copy ul.add {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #666;
    text-align: left;
}

.footer-copy .copy {
    font-size: 12px;
    color: #999;
}

/* 인증 마크/이미지 */
.footer-cert img {
    max-width: 150px;
    width: 100%;
    display: block;
}

/* 새로 추가된 이미지 클래스에 애니메이션 적용 */
.top-button-icon {
    display: block; /* 이미지 하단 여백 제거 */
    width: 100%; /* 부모(a 태그) 너비에 꽉 차게 */
    height: auto; /* 비율 유지 */
    
    /* 이미지 자체의 변화에 부드러운 전환 효과 추가 (애니메이션과 별개) */
    transition: transform 0.2s ease-out, filter 0.2s ease-out;
}

/* 호버 시 이미지만 애니메이션 실행 */
.go_top:hover .top-button-icon {
    /* 이미지 자체도 살짝 확대 */
    transform: scale(1.05);
    /* 이미지 필터로 약간 밝게 */
    filter: brightness(110%);

    /* --- animate.css 애니메이션 선택 --- */
    /* 아래 옵션 중 하나를 선택하여 주석을 해제하고 사용하세요. */
    
    /* 1. bounce (통통 튀어오르는 느낌 - 가장 직관적) */
/*    animation: bounce 1s ease-out;*/
    
    /* 2. pulse (맥박처럼 커졌다 작아졌다 - 은은한 강조) */
/*     animation: pulse 1s ease-out; */
    
    /* 3. headShake (좌우로 살짝 흔들림 - 재미있고 활기찬 반응) */
/*     animation: headShake 0.8s ease-out; */
    
    /* 4. jello (젤리처럼 흔들림 - 더 유머러스하고 탄력 있는 느낌) */
     animation: jello 1s ease-out; 

    /* 애니메이션 무한 반복 (호버하는 동안) */
    animation-iteration-count: infinite; 
}

/* ============================================== */
/* ================== 모달 공통 스타일 ================== */
/* ============================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #fefefe;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    text-align: left;
}

.modal-content h3 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

.modal-content .c_name {
    text-align: center;
    margin-bottom: 20px;
    color: #555;
    font-size: 18px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
}

/* 모달 내 은행 계좌 목록 */
.f_banks {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.f_banks li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f2f2f2;
}

.f_banks li .bank-info {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.f_banks li .bank-logo {
    width: 60px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-right: 10px;
}

.f_banks li .bank-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.f_banks li .bank-name {
    font-weight: bold;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 10px;
    width: 50px;
}

.f_banks li .account-number {
    flex-grow: 1;
    font-size: 1.3em;
    color: #333;
    font-weight: 500;
}

.f_banks li .copy-button {
    background-color: #00C6AC;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.3em;
    transition: background-color 0.2s;
    margin-left: 15px;
    border-radius: 5px;
    white-space: nowrap;
}

.f_banks li .copy-button:hover {
    background-color: #00ad96;
}

/* ============================================== */
/* ============= 모바일/태블릿 반응형 (새로운 배열) ============= */
/* ============================================== */

/* 1025px ~ 1440px 반응형 (데스크톱 중간 해상도) */

@media (min-width: 1025px) and (max-width: 1440px) {

}

/* 태블릿 (1024px 이하) - 2열 또는 유동적인 3열 배치 시도 */
@media (max-width: 1024px) {
    .footer-top {
        justify-content: flex-start; /* 컬럼들을 왼쪽 정렬 */
        gap: 15px; /* 컬럼 간 간격 조정 */
        padding: 0 60px; /* 양 옆 패딩 추가 */
    }

    .footer-column {
        flex: 1 1 calc(50% - 10px); /* 기본적으로 2열 배치 (gap 고려) */
        min-width: unset; /* 최소 너비 제한 해제 */
        padding: 20px; /* 내부 패딩 추가 */
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
    }

    /* footer-info-2 (대표전화) - 2열 유지 */
    .footer-column.footer-info-2 {
        border-right: 1px solid #eee; /* 태블릿에서도 오른쪽 경계선 유지 */
        padding: 10px;
    }
    .info-2-content-wrap {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center;
        gap: 10px;
    }
    .info-2-content-txt {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .align { /* '본 사' 텍스트 정렬 */
        margin-top: 5px; /* 간격 조정 */
    }
    .a_txt { /* '본 사' 전화번호 옆 텍스트 */
        margin-left: 0; /* 모바일에서 마진 제거 */
    }


    /* footer-info-3 (접수 및 입금확인 시간) - 2열 유지 */
    .footer-column.footer-info-3 {
        border-right: 1px solid #eee; /* 태블릿에서도 오른쪽 경계선 유지 
        */
        padding: 10px;
    }
    .receipt-info-content-wrap {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center;
        gap: 10px;
    }
    .receipt-buttons {
        margin-top: 15px; /* 버튼 그룹 상단 마진 조정 */
        align-items: flex-start; /* 버튼들을 왼쪽 정렬 */
    }
    .dtime1 {
        margin-left: 0;
        margin-right: auto;
    }

    /* footer-info-4 (SNS) - 태블릿에서 한 줄 전체 사용 (아래로 내려감) */
    .footer-column.footer-info-4 {
        flex: 1 1 100%; /* 전체 너비 차지 */
        border-right: none; /* 오른쪽 경계선 제거 */
        align-items: flex-start; /* 왼쪽 정렬 */
        text-align: left; /* 텍스트 왼쪽 정렬 */
        padding: 10px; /* 내부 패딩 */
    }
    .info-4-content-wrap {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center;
        gap: 10px;
    }
    .info-4-content-txt {
        margin-right: 0;
        margin-bottom: 10px;
        text-align: left;
    }
    .footer-column.footer-info-4 .f_title {
        text-align: left;
    }
    .sns_icons {
        align-items: flex-start; /* 아이콘 왼쪽 정렬 */
    }
    .sns-group-row-single {
        justify-content: flex-start; /* 아이콘들을 왼쪽 정렬 */
        gap: 15px; /* 아이콘 간 간격 넓힘 */
    }
    .sns-link-item {
        width: auto; /* 아이콘 크기에 맞춤 */
        max-width: 60px; /* 최대 너비 제한 */
    }
    .sns-item-wrapper {
        flex-direction: column; /* 아이콘과 텍스트를 다시 세로로 쌓기 */
        align-items: center; /* 중앙 정렬 */
        border-radius: 50%; /* 원형 유지 */
        text-align: center;
    }
    .sns-item-wrapper img {
        margin-right: 0;
        margin-bottom: 5px; /* 이미지 아래 텍스트 간격 (텍스트가 있다면) */
    }

    /* 푸터 메뉴 영역 */
    .footer-menu ul {
        justify-content: center; /* 왼쪽 정렬 */
        padding: 5px 20px; /* 양 옆 패딩 추가 */
    }
    .footer-menu ul li {
        width: auto; /* 메뉴 아이템 너비 자동 */
        margin-bottom: 5px; /* 각 메뉴 아이템 아래 간격 */
    }
    .footer-menu ul li a {
        font-size: 13px; /* 폰트 크기 약간 줄임 */
    }

    /* 저작권 및 주소 정보 영역 */
    .copy_container {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center; /* 왼쪽 정렬 */
        padding: 10px 30px; /* 양 옆 패딩 추가 */
    }
    .footer-copy {
        margin-bottom: 15px; /* 저작권 정보 아래 간격 */
    }
    .footer-copy .copy {
        margin-top: 5px; /* 간격 조정 */
    }
    .footer-cert {
        margin-top: 10px; /* 인증 마크 위쪽 간격 */
    }
}

/* 모바일 (767px 이하) - 1열 배치 */
@media (max-width: 767px) {
    .footer-top {
        flex-direction: column; /* 모든 컬럼 세로로 쌓기 */
        padding: 0 15px; /* 양 옆 패딩 더 줄임 */
    }

    .footer-column {
        flex: 1 1 100%; /* 모든 너비를 차지 */
        padding: 15px; /* 내부 패딩 더 줄임 */
        border-right: none !important; /* 모든 컬럼의 오른쪽 경계선 제거 */
    }

    .f_title {
        font-size: 22px; /* 제목 폰트 크기 조정 */
        margin-bottom: 8px; /* 제목 아래 간격 조정 */
    }

    /* 대표전화 컬럼 모바일 반응형 */
    .tel_num_text {
        font-size: 30px; /* 전화번호 폰트 크기 조정 */
    }
    .footer-column ul.f_center li {
        font-size: 12px; /* 영업시간 폰트 크기 조정 */
    }

    /* 접수 및 입금확인 시간 컬럼 모바일 반응형 */
    .receipt-info-content-wrap {
        gap: 8px; /* 텍스트와 버튼 그룹 사이의 간격 */
        align-items: flex-start;
    }
    .receipt-text-list li {
        font-size: 12px; /* 폰트 크기 조정 */
    }
    .receipt-buttons {
        margin-top: 10px; /* 버튼 그룹 상단 마진 조정 */
    }
    .dtime1 {
        padding: 6px 15px; /* 버튼 패딩 조정 */
        font-size: 14px; /* 버튼 폰트 크기 조정 */
    }

    /* SNS 컬럼 모바일 반응형 */
    .info-4-content-wrap {
        gap: 8px;
    }
    .sns-group-row-single {
        gap: 10px; /* 아이콘 간 간격 더 줄임 */
        justify-content: flex-start;
    }
    .sns-link-item {
        width: calc(33.33% - 5.33px); /* 한 줄에 3개 아이콘 유지 (간격 고려) */
        max-width: none;
    }
    .icon-img {
        width: 35px; /* 아이콘 이미지 크기 조정 */
    }

    /* 푸터 메뉴 영역 */
    .footer-menu ul {
        flex-direction: column; /* 메뉴 아이템 세로로 쌓기 */
        align-items: flex-start;
        padding: 5px 35px; /* 양 옆 패딩 더 줄임 */
    }
    .footer-menu ul li {
        width: 100%; /* 각 메뉴 아이템 전체 너비 */
        margin-bottom: 3px;
    }
    .footer-menu ul li a {
        font-size: 13px;
        padding: 3px 0;
    }

    /* 저작권 및 주소 정보 영역 */
    .copy_container {
        padding: 10px 35px; /* 양 옆 패딩 더 줄임 */
        align-items: flex-start;
    }
    .footer-copy ul.add, .footer-copy .copy {
        font-size: 12px; /* 폰트 크기 조정 */
    }
    .footer-cert img {
        max-width: 120px; /* 인증 마크 크기 줄임 */
    }

    /* 모달 스타일도 모바일에서 보기 좋게 조정 */
    .modal-content {
        padding: 20px; /* 모달 내부 패딩 줄임 */
        width: 95%; /* 모바일에서 너비 더 넓게 */
    }
    .modal-content h3 {
        font-size: 24px; /* 모달 제목 폰트 크기 줄임 */
    }
    .modal-content .c_name {
        font-size: 16px; /* 모달 본문 폰트 크기 줄임 */
    }
    .close-button {
        font-size: 30px; /* 닫기 버튼 크기 줄임 */
        top: 10px;
        right: 15px;
    }
    .f_banks li {
        flex-direction: column; /* 계좌 정보 세로로 쌓기 */
        align-items: flex-start;
        padding: 10px;
    }
    .f_banks li .bank-info {
        flex-direction: row; /* 은행 로고와 이름은 가로 유지 */
        width: 100%;
        margin-bottom: 5px;
    }
    .f_banks li .account-number {
        font-size: 1em; /* 계좌번호 폰트 크기 조정 */
        margin-bottom: 5px; /* 계좌번호 아래 간격 */
    }
    .f_banks li .copy-button {
        width: 100%; /* 복사 버튼 너비 전체 차지 */
        margin-left: 0;
        margin-top: 5px;
        justify-content: center; /* 버튼 텍스트 중앙 정렬 */
    }
}