/* ==========================================================================
   동물병원 전문 마케팅 전용 스타일시트 (Animal Landing Page Styles)
   ========================================================================== */

/* 기본 HTML, 바디 스크롤 활성화 (스무스 휠 관성 스크롤 적용) */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden; /* 가로 스크롤만 방지 */
    overflow-y: auto;   /* 브라우저 세로 스크롤 활성화 */
}

/* 스크롤 컨테이너 스타일 (기본 윈도우 스크롤을 쓰므로 래퍼 역할만 수행) */
.animal_scroll-container {
    width: 100%;
    position: relative;
}

/* 개별 섹션 공통 스타일 */
.animal_section {
    width: 100%;
    height: 100vh;
    /* 각 섹션을 100% 뷰포트 높이로 고정 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 80px 0;
    background-color: #ffffff;
}

.animal_container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* 타이틀 공통 */
.sec-title {
    font-size: 3em;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0 0 15px 0;
    word-break: keep-all;
}

.sec-title span {
    color: #2769E1;
    /* 윈에이드 포인트 블루 */
}

.sec-subtitle {
    font-size: 1.3em;
    color: #555;
    font-weight: 500;
    margin: 0 0 30px 0;
    word-break: keep-all;
}

.sec-subtitle span {
    color: #2769E1;
    font-weight: 700;
}

.sec-divider {
    width: 60px;
    height: 4px;
    background-color: #2769E1;
    margin-bottom: 50px;
}

.mo-br {
    display: none;
    /* 데스크톱에서는 모바일 줄바꿈 태그를 비활성화 */
}

/* --------------------------------------------------------------------------
   1섹션: 히어로 섹션 (Section 1: Hero Section)
   -------------------------------------------------------------------------- */
.sec-hero {
    height: 70vh;
    /* 높이를 70vh로 축소하여 콤팩트하게 변경 */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 텍스트 콘텐츠 수평 중앙 정렬 */
    position: relative;
    z-index: 10;
    overflow: visible;
    /* 캐릭터가 2섹션으로 침범하여 정상 노출되도록 숨김 해제 */
}

.sec-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-content {
    text-align: center;
    /* 텍스트 정가운데 정렬 */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-winaid {
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

.logo-winaid img {
    height: 38px;
    width: auto;
}

.hero-title {
    font-size: 4.8em;
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.hero-title span {
    color: #ffe600;
    /* 강조 노란색 */
}

.hero-subtitle {
    font-size: 1.8em;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.hero-desc {
    font-size: 1.3em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    margin: 0;
    word-break: keep-all;
    /* 한글 텍스트가 단어 단위로 자연스럽게 줄바꿈되도록 설정 */
}

/* 히어로 캐릭터 일러스트 - 좌우 끝에 절대 배치하고 하단 경계선에 걸치도록 정렬 */
.hero-characters {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 99;
}

.char-wrap {
    position: absolute;
    bottom: -23px;
    /* 흰색 경계선에 자연스럽게 걸치도록 음수 마진 적용 */
    pointer-events: none;
    will-change: transform;
}

.char-left-wrap {
    left: 12%;
    transform-origin: bottom center; /* 회전 축을 발바닥(바닥선)으로 고정 */
    animation: swayTiltLeft 6s ease-in-out infinite; /* 6초 리듬으로 좌우 갸웃 */
}

.char-right-wrap {
    right: 12%;
    transform-origin: bottom center; /* 회전 축을 발바닥(바닥선)으로 고정 */
    animation: swayTiltRight 8.5s ease-in-out infinite; /* 8.5초 리듬으로 좌우 갸웃 */
}

.hero-characters img {
    height: 240px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* 문턱 바닥 평행선 유지를 위해 회전은 제거하고 오직 수평으로만 미세하게 움직이는 키프레임 */
@keyframes swayTiltLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-15px); /* 왼쪽으로 최대 15px 수평 이동 */
    }
}

@keyframes swayTiltRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(12px); /* 오른쪽으로 최대 12px 수평 이동 */
    }
}

/* --------------------------------------------------------------------------
   2섹션: 자가 진단 카드 (Section 2: Diagnosis Cards)
   -------------------------------------------------------------------------- */
.sec-diagnostic {
    background-color: #fcfdfe;
    padding-top: 180px;
    /* 상단 여백을 늘려 1섹션 경계와의 간격 확보 */
    padding-bottom: 160px;
    /* 카드 아래 여백을 더욱 여유롭게 160px로 조정 */
    text-align: center;
    /* 텍스트 요소들 중앙 정렬 */
    height: auto !important;
    /* 콘텐츠가 넘쳐도 잘리지 않고 자연스럽게 스크롤되도록 높이 제한 해제 */
}

.sec-subtitle-eng {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #2769E1;
    text-transform: none;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.highlight-box {
    background-color: #007fff;
    /* 시안처럼 더 밝고 쨍한 포인트 블루로 변경 */
    color: #ffffff !important;
    padding: 1px 3px;
    /* 좌우 여백도 시안과 동일하게 3px로 타이트하게 축소 */
    border-radius: 0px;
    /* 시안처럼 각진 직각 사각형으로 변경 */
    display: inline-block;
    font-weight: 800;
    line-height: 1.1;
    /* 상하 여백을 글자 높이에 딱 붙이기 위해 제한 */
}

.sec-desc-lead {
    font-size: 1.25em;
    color: #555555;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 50px;
    word-break: keep-all;
    font-weight: 700;
    /* 소개글 글씨 두께를 굵게 변경 */
}

.diagnostic-grid {
    display: flex;
    flex-direction: column;
    /* 세로 적층 레이아웃 */
    gap: 25px;
    /* 개별 카드 사이 여백 복구 */
    width: 100%;
    max-width: 1100px;
    /* 카드가 과도하게 넓어지는 현상 차단 */
    margin: 0 auto;
}

.diagnostic-card {
    position: relative;
    /* 자식 텍스트의 absolute 배치를 위해 기준점 설정 */
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    transition: transform 0.3s ease;
}

.diagnostic-card:hover {
    transform: translateY(-5px);
    /* 호버 시 카드가 세련되게 살짝 떠오르는 모션 */
}

.card-img-wrap {
    width: 100%;
    height: auto;
    display: block;
}

.card-img-wrap img {
    width: 100% !important;
    height: auto !important;
    /* 이미지 고유 비율 그대로 렌더링 */
    display: block !important;
    object-fit: contain !important;
    /* 카드 이미지의 찌그러짐을 원천 방지 */
}

.card-info {
    position: absolute;
    left: 6.3%;
    /* 이미지 내의 📌 뱃지 시작선에 맞춘 수직 정렬 여백 */
    top: 60%;
    /* 이미지 내의 📌 뱃지 바로 밑에 글씨가 오도록 Y축 정렬 */
    transform: translateY(-50%);
    width: 50%;
    /* 우측의 동물/회의실 사진을 침범하지 않도록 너비 제한 */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
    /* 클릭 이벤트 방해 방지 */
}

.card-title {
    font-size: 2.2em;
    /* 시안 비율에 맞춰 제목 폰트 크기를 큼직하게 변경 */
    font-weight: 800;
    /* 제목을 매우 굵게 강조 */
    color: #1a1a1a;
    margin: 0;
    word-break: keep-all;
    line-height: 1.35;
}

.card-desc {
    font-size: 1.05em;
    color: #1a1a1a;
    /* 설명글 글자색을 검정으로 변경 */
    line-height: 1.5;
    margin-top: 10px;
    /* 제목과의 여백 */
    word-break: keep-all;
    font-weight: 500;
    /* 설명글 글자 두께를 더 얇게 최적화 */
}


/* --------------------------------------------------------------------------
   3섹션: 과거 vs 현재 시장 분석 (Section 3: Past vs Now Table)
   -------------------------------------------------------------------------- */
.sec-market {
    background-image: url('/images/animal/3_bg.png');
    background-size: cover;
    /* cover와 bottom 정렬을 통해 하단 일러스트는 살리고 위쪽만 자연스럽게 잘라냄 */
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1920 / 2100;
    /* 세로 크기 비율을 2275에서 2050으로 깎아 섹션 높이를 줄이고 위쪽 하늘색 영역을 일부 단축 */
    height: auto !important;
    min-height: auto;
    padding-top: 4.5%;
    /* 화면 가로 폭에 비례하여 HOW 위의 여백 고정 */
    padding-bottom: 23%;
    /* 화면 가로 폭에 비례하여 하단 수의사 일러스트 구역 여백 고정 */
    display: flex;
    align-items: flex-start;
    /* 상단 기준 정렬 */
    justify-content: center;
    box-sizing: border-box;
}

.market-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 상단 타이틀 영역 */
.market-header {
    text-align: center;
    margin-bottom: 50px;
    /* 타이틀과 카드 사이의 간격을 시안 비율에 맞춰 50px로 확대하여 여백 노출 */
}

.market-badge-eng {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    color: #2769E1;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 12px;
}

.market-title {
    font-size: 3em;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0;
    word-break: keep-all;
}

/* 과거 vs 현재 비교 카드 레이아웃 */
.market-comparison {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* 상단 기준 정렬로 하여 세로가 긴 Now 카드가 하단으로 더 내려오도록 유도 */
    gap: 30px;
    width: 100%;
    max-width: 900px;
    /* 카드 확대에 맞춰 비교 컨테이너 최대 크기를 900px로 확장 */
    margin-bottom: 220px;
    /* 카드와 말풍선 그룹 사이의 거리를 220px로 대폭 늘려 말풍선 그룹을 하강 배치 */
}

.market-card {
    flex: none;
    /* 원본 비율 고정을 위해 flex 속성 강제 해제 */
}

.card-past {
    width: 375px;
    /* 시안 비례를 고려해 카드를 10% 추가로 키운 375px */
    max-width: 100%;
}

.card-now {
    width: 468px;
    /* 시안 비례를 고려해 카드를 10% 추가로 키운 468px */
    max-width: 100%;
    margin-top: 45px;
    /* 카드 확대에 따라 처짐 배치를 45px로 소폭 조정 */
}

.market-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 말풍선 레이아웃 */
.market-bubble-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    /* 말풍선이 좌우로 더 벌어질 수 있도록 최대 너비를 800px에서 1000px로 대폭 확장 */
    gap: 20px;
    margin-bottom: 90px;
    /* 말풍선과 하단 안내 텍스트 사이의 간격을 넓혀 하단 배치 구도를 맞춤 */
}

.bubble-row {
    display: flex;
    width: 100%;
}

.bubble-row img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.70;
    /* 뒤의 배경 실사가 더 투명하게 투과되도록 투명도를 0.70으로 강화 */
    will-change: transform;
}

/* 말풍선 개별 엇박자 둥실둥실(Floating) 애니메이션 연동 */
.row-left img {
    animation: floatBubble1 4.8s ease-in-out infinite;
}

.row-right img {
    animation: floatBubble2 5.8s ease-in-out infinite;
}

.row-center img {
    animation: floatBubble3 5.2s ease-in-out infinite;
}

@keyframes floatBubble1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes floatBubble2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes floatBubble3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.row-left {
    justify-content: flex-start;
    padding-left: 0%;
    /* 좌측 패딩을 0%로 없애 말풍선 1을 왼쪽 바깥쪽으로 완전히 벌림 */
}

.row-right {
    justify-content: flex-end;
    padding-right: 0%;
    /* 우측 패딩을 0%로 없애 말풍선 2를 오른쪽 바깥쪽으로 완전히 벌림 */
}

.row-center {
    justify-content: center;
}

/* 하단 텍스트 영역 */
.market-footer-content {
    text-align: center;
    color: #ffffff;
    width: 100%;
    max-width: 900px;
    z-index: 15;
}

.market-footer-title {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.4;
    word-break: keep-all;
}

.text-highlight-yellow {
    color: #ffe600;
    /* 노란색 강조 색상 */
    font-weight: 800;
}

.market-footer-desc {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    word-break: keep-all;
}

/* 반응형 모바일 대응 스타일 */
@media (max-width: 768px) {
    .sec-market {
        aspect-ratio: auto;
        /* 모바일에서는 고정 비율 비활성화 */
        background-size: cover;
        /* 배경을 모바일용으로 꽉 채우도록 복구 */
        padding-top: 50px;
        /* 모바일에서도 상단 여백을 대폭 줄임 */
        padding-bottom: 260px;
        /* 모바일 하단 여백 축소 */
    }

    .market-title {
        font-size: 2em;
    }

    .market-comparison {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .market-card {
        width: 100%;
        max-width: 320px;
    }

    .market-bubble-list {
        gap: 15px;
        padding: 0 15px;
    }

    .row-left,
    .row-right {
        padding: 0;
    }

    .market-footer-title {
        font-size: 1.5em;
        padding: 0 15px;
    }

    .market-footer-desc {
        font-size: 0.95em;
        padding: 0 15px;
    }
}

/* --------------------------------------------------------------------------
   4섹션: 서비스 채널 (Section 4: Services & Channels)
   -------------------------------------------------------------------------- */
.sec-services {
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
    height: auto !important;
    /* 콘텐츠 증량에 맞춰 높이 제한 해제 */
}

.services-header-box {
    text-align: center;
    margin-bottom: 60px;
}

.sub-lead-blue {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 800;
    color: #2769E1;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}


.sec-desc-sub {
    font-size: 1.25em;
    color: #555555;
    line-height: 1.6;
    margin-top: 25px;
    margin-bottom: 50px;
    word-break: keep-all;
    font-weight: 700;
}

.services-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.service-tab-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: calc((100% - 70px) / 8);
    /* 8개 버튼 가로 나란히 균등 분할 */
    aspect-ratio: 140 / 76;
    /* 이미지 가로세로 규격 비율 적용 */
    outline: none;
    overflow: hidden;
    position: relative;
    box-shadow: none;
    border-radius: 0;
    transition: transform 0.2s ease;
}

.service-tab-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.service-tab-btn .btn-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 마우스 호버 및 active 상태일 때 hover 이미지 활성화 */
.service-tab-btn:hover .btn-hover,
.service-tab-btn.active .btn-hover {
    opacity: 1;
}

/* 탭 상세 소개 이미지 영역 */
.services-tab-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
}

.tab-detail-img-wrap {
    width: 100%;
    height: auto;
}

.tab-detail-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   5섹션: 시스템 프로세스 (Section 5: System Processes)
   -------------------------------------------------------------------------- */
.sec-system {
    padding-top: 180px;
    /* 원래의 5섹션 크기(패딩) 완전히 복원 */
    /* 상단 여백 복원 */
    padding-bottom: 160px;
    /* 원래의 5섹션 크기(패딩) 완전히 복원 */
    /* 하단 여백 복원 */
    height: auto !important;
}

.system-title-box {
    text-align: center;
    margin-bottom: 60px;
    /* 원래의 제목 하단 여백 복원 */
    /* 마진 복원 */
}

.system-title-box .subtitle-eng {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15em;
    font-weight: 800;
    color: #2769E1;
    /* 파란색 리드 텍스트 */
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.system-title-box .sec-title {
    color: #1a1a1a;
}

.system-title-box .sec-subtitle {
    color: #555555;
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 50px;
    /* 마진 복원 */
    word-break: keep-all;
    font-weight: 700;
}

.system-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 카드 사이 여백 미세 축소 */
    width: 100%;
    max-width: 960px;
    /* 카드 크기를 960px로 줄여 배경 비율에 완벽히 정합 */
    margin: 0 auto;
}

.system-card {
    position: relative;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    transition: transform 0.3s ease;
    z-index: 3;
    /* 캐릭터보다 카드 콘텐츠가 앞쪽(위)에 오도록 설정 */
}

.system-card:hover {
    transform: translateY(-5px);
}

.system-card .card-img-wrap {
    width: 100%;
    height: auto;
    display: block;
}

.system-card .card-img-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.system-card .card-info {
    position: absolute;
    left: 6.3%;
    top: 60%;
    transform: translateY(-50%);
    width: 50%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
}

.system-card .card-title {
    font-size: 1.95em;
    /* 타이틀 크기 미세 조정 */
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    word-break: keep-all;
    line-height: 1.35;
}

.system-card .card-desc {
    font-size: 0.96em;
    /* 설명글 크기 미세 조정 */
    color: #1a1a1a;
    line-height: 1.5;
    margin-top: 8px;
    /* 여백 미세 조정 */
    word-break: keep-all;
    font-weight: 500;
}

/* 강아지 고양이 캐릭터 일러스트 */
.system-characters {
    position: absolute;
    top: 0;
    left: -8%;
    /* 컨테이너 경계를 뚫고 좌우로 넓게 벌림 */
    width: 116%;
    /* 100% + 16% */
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* 카드(z-index: 3) 뒤쪽으로 겹치도록 설정 */
}

.sys-dog-wrap {
    position: absolute;
    left: 1.5%;
    /* 강아지를 왼쪽(바깥쪽)으로 살짝 조정 */
    bottom: 260px;
    /* 강아지 수직 위치: 3단계 카드 옆으로 상승 정렬 */
    height: 180px;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.sys-dog {
    height: 100%;
    width: auto;
    object-fit: contain;
    animation: dogRunningBounce 3.8s ease-in-out infinite;
    will-change: transform;
}

.sys-cat-wrap {
    position: absolute;
    right: 5%;
    /* 고양이를 조금 더 왼쪽(안쪽)으로 이동하여 2단계 카드를 터치하도록 설정 */
    bottom: 600px;
    /* 고양이 수직 위치: 강아지보다 더 높여서 2단계 카드 옆으로 상승 정렬 */
    height: 240px;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.sys-cat {
    height: 100%;
    width: auto;
    object-fit: contain;
    transform-origin: bottom center;
    animation: catShutterBreathing 5.0s ease-in-out infinite;
    will-change: transform, filter;
}

/* 왼쪽 강아지: 통통 가볍게 리드미컬하게 뛰어오르는 바운싱 */
@keyframes dogRunningBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(1.2deg);
    }
}

/* 오른쪽 고양이: 카메라 셔터 누르는 순간의 반동과 렌즈 플래시 번쩍임 연출 */
@keyframes catShutterBreathing {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    46% {
        transform: rotate(-1.2deg) scale(1.015);
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
    }
    50% {
        transform: rotate(-1.2deg) scale(1.015);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
    54% {
        transform: rotate(-1.2deg) scale(1.015);
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
    }
    62% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

/* --------------------------------------------------------------------------
   5 & 6섹션 통합 배경 래퍼 (Section 5 & 6 Combined Background Wrapper)
   -------------------------------------------------------------------------- */
.sec-system-contact-wrap {
    width: 100%;
    position: relative;
    background-image: url('/images/animal/5_bg.png');
    /* 통합 배경 이미지 지정 */
    background-size: 100% 100%;
    /* 종횡비 고정에 호환되도록 100% 100% 복원 */
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0c388f;
    aspect-ratio: 1920 / 3515;
    /* 원래의 1920x3515 비율로 크기 복원 */
    height: auto !important;
}

/* --------------------------------------------------------------------------
   6섹션: 문의 폼 및 무료 진단 (Section 6: Contact Form)
   -------------------------------------------------------------------------- */
.sec-contact {
    background: transparent;
    /* 공통 5_bg.png 투과를 위한 배경 투명화 */
    color: #ffffff;
    padding-top: 60px;
    /* 5섹션과의 간격 조율을 위해 상단 패딩 축소 및 위로 이동 */
    /* 통합 래퍼 높이에 알맞게 패딩값 상향 조정 */
    padding-bottom: 120px;
    /* 하단 짤림 해결을 위한 안정적인 패딩 공간 확보 */
    height: auto !important;
    /* .animal_section의 100vh 높이 제한 강제 해제 */
    overflow: visible !important;
    /* 하단 버튼 잘림 현상 완전히 차단 */
}

.contact-header {
    text-align: center;
    margin-bottom: 45px;
    /* 타이틀 하단 여백 시원하게 확장 */
}

.diagnostic-speech {
    margin-bottom: 25px;
    /* 말풍선과 타이틀 사이 여백 확장 */
}

.diagnostic-speech img {
    height: auto;
    width: auto;
    max-width: 100%;
    will-change: transform;
    animation: floatDiagnosticSpeech 4.8s ease-in-out infinite;
}

@keyframes floatDiagnosticSpeech {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px); /* 아래로 살짝 내려갔다 오는 모션 */
    }
}

.contact-title {
    font-size: 4.2em;
    /* 타이틀 폰트 크기 시안에 맞춰 웅장하게 유지 */
    font-weight: 900;
    line-height: 1.45;
    /* 위아래 문단 간의 줄간격을 조금 더 넓게 조정 */
    letter-spacing: -0.05em;
    /* 자간 더욱 조밀하게 밀착 */
    color: #ffffff !important;
    /* 전역 스타일로 인해 제목이 어둡게 덮어써지는 현상 완전히 차단 */
}

.contact-title .highlight-yellow {
    color: #FFF29A !important;
    /* 사용자 요청 지정 색상(#FFF29A)으로 노란색 강조 강제 지정 */
}

.contact-split {
    display: flex;
    justify-content: center;
    /* 단일 폼 박스 중앙 정렬 */
    align-items: center;
    width: 100%;
}

.contact-form-box {
    width: 100%;
    max-width: 650px;
    /* 시안 매칭을 위해 기존 530px에서 650px로 대폭 확장 */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 55px 45px 45px 45px;
    /* 내부 여백 시원하게 복원 */
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #333333;
}

.animal_form-group {
    margin-bottom: 22px;
    /* 인풋창 사이 간격 시안 비율로 복원 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.animal_form-group label {
    font-size: 1.05em;
    /* 라벨 폰트 크기 확장 */
    font-weight: 800;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.animal_form-group label .required {
    color: #e53e3e;
    font-size: 0.8em;
    /* *필수 텍스트 크기 조율 */
    font-weight: 600;
    margin-left: 2px;
}

.animal_form-group input,
.animal_form-group select {
    width: 100%;
    padding: 14px 18px;
    /* 인풋 패딩 확장으로 시안처럼 큼직하게 설정 */
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    font-size: 1.05em;
    /* 인풋 폰트 크기 확장 */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.animal_form-group input:focus,
.animal_form-group select:focus {
    border-color: #0085FF;
}

.animal_privacy-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 0.9em;
    /* 동의 폰트 크기 보정 */
    color: #666666;
    text-align: left;
}

.animal_privacy-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.animal_btn-submit {
    display: block;
    /* 가로 가운데 정렬을 위해 블록 요소로 지정 */
    margin: 0 auto;
    /* 가로 가운데 정렬 */
    width: 380px;
    /* 버튼 가로 너비 축소 */
    max-width: 100%;
    /* 모바일 뷰포트 대응 */
    padding: 15px;
    /* 버튼 패딩 조율 */
    background-color: #0085FF;
    /* 시안 맞춤 밝고 선명한 파란색 버튼 */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 1.35em;
    /* 버튼 내 글자 크기 더 확대 */
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
}

.animal_btn-submit:hover {
    background-color: #0072dd;
}

/* 무료 진단권 카드 디자인 */
.ticket-image-box {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

.diagnostic-ticket-card {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5fa 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 40px;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    text-align: left;
    border: 2px solid #5a93ff;
    position: relative;
}

.diagnostic-ticket-card::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 32px;
    background-color: #0c388f;
    /* 스크롤 배경 짙은 파랑색에 맞춤 */
    border-radius: 0 16px 16px 0;
    border: 2px solid #5a93ff;
    border-left: none;
}

.diagnostic-ticket-card::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 32px;
    background-color: #0c388f;
    border-radius: 16px 0 0 16px;
    border: 2px solid #5a93ff;
    border-right: none;
}

.ticket-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    font-weight: 900;
    color: #2769E1;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.ticket-subtitle {
    font-size: 1.5em;
    font-weight: 800;
    color: #333333;
    margin-bottom: 20px;
}

.ticket-rule {
    width: 100%;
    height: 1px;
    border-top: 2px dashed #b8c9e0;
    margin-bottom: 25px;
}

.ticket-text {
    font-size: 1.05em;
    color: #555555;
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}

/* --------------------------------------------------------------------------
   우측 플로팅 퀵 메뉴 (Quick Menus)
   -------------------------------------------------------------------------- */
.animal_quick-menu {
    position: fixed;
    right: 50px;
    /* 조금 더 왼쪽으로 이동 (30px -> 50px) */
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}

.animal_quick-menu a {
    width: 68px; /* 원래 크기 68px로 복원 */
    height: 68px;
    display: block;
    transition: transform 0.2s;
    background: transparent;
    /* 흰색 배경 제거 */
    box-shadow: none;
    /* 그림자 제거 */
    border-radius: 50%;
    /* 투명 클릭 영역(Hitbox)을 원형으로 한정 */
}

.animal_quick-menu a img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.animal_quick-menu a:hover {
    transform: scale(1.08);
}

/* TOP 버튼만 스크롤 제어용 개별 설정 */
#quick-go-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding: 15px; /* 패딩을 8px에서 15px로 늘려 이미지를 더 작게 축소 */
    box-sizing: border-box;
}

#quick-go-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   서비스 성공사례 모달 팝업 (Service Popup Modal)
   -------------------------------------------------------------------------- */
.animal_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.animal_modal.show {
    display: flex;
    opacity: 1;
}

.animal_modal-content {
    background-color: #ffffff;
    border-radius: 20px;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: zoomIn 0.3s ease;
}

.animal_modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2.2em;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    z-index: 2100;
    transition: color 0.2s;
}

.animal_modal-close:hover {
    color: #333;
}

.animal_modal-body {
    padding: 40px;
    text-align: center;
}

.animal_modal-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   반응형 미디어 쿼리 (Responsive Styles)
   ========================================================================== */

/* 태블릿 (1200px 이하) */
@media (max-width: 1200px) {
    .sec-title {
        font-size: 2.6em;
    }

    .hero-title {
        font-size: 4em;
    }

    .diagnostic-grid {
        gap: 20px;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .system-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-layout {
        gap: 20px;
    }
}

/* 모바일 통합 최적화 (767px 이하 - 100vh 스냅 해제) */
@media (max-width: 767px) {

    html,
    body {
        overflow-y: auto;
        /* 기본 스크롤 허용 */
        height: auto;
    }

    .animal_scroll-container {
        height: auto;
        scroll-snap-type: none;
        /* 스크롤 스냅 끄기 */
    }

    .animal_section {
        height: auto !important;
        /* 높이 제한 해제 */
        padding: 70px 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .animal_container {
        padding: 0 24px;
    }

    .sec-title {
        font-size: 2em;
    }

    /* 1섹션 모바일 */
    .sec-hero {
        padding-top: 120px !important;
        padding-bottom: 180px !important;
        height: auto !important;
    }

    .hero-title {
        font-size: 2.4em;
    }

    .hero-desc {
        font-size: 1.05em;
        /* 모바일 화면에 맞춰 폰트 크기 축소 */
        line-height: 1.5;
        /* 모바일 행간 최적화 */
        margin-top: 10px;
        /* 제목과의 간격 조정 */
    }

    .hero-characters {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        transform: none;
    }

    .char-wrap {
        bottom: -12px !important;
        transform: none !important;
    }

    .char-left-wrap {
        left: 3% !important;
        right: auto !important;
    }

    .char-right-wrap {
        right: 3% !important;
        left: auto !important;
    }

    .hero-characters img {
        height: 120px !important;
    }

    /* 2섹션 모바일 */
    .sec-diagnostic .animal_container {
        padding: 0 16px !important;
        /* 좌우 여백을 줄여 카드 크기를 가로로 더 넓고 시원하게 확보 */
    }

    .sec-desc-lead {
        font-size: 0.92em !important;
        /* 성장의 기쁨은 더하고. 문구가 잘려 줄바꿈되지 않도록 소폭 축소 */
        line-height: 1.5 !important;
        margin-bottom: 35px !important;
    }

    .diagnostic-grid {
        flex-direction: column;
        gap: 20px !important;
    }

    .diagnostic-card {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .card-info {
        position: absolute !important;
        left: 6.3% !important;
        top: 35% !important;
        /* Y축 시작 기준점을 35%로 내려서 카드 제목들의 위치를 조금 더 하강 정렬 */
        transform: none !important;
        /* 높이 변화에 의한 Y축 왜곡 차단을 위해 transform 강제 해제 */
        width: 56% !important;
        /* 글자 노출 영역 가로 폭을 늘려 한 줄 정렬 공간 확보 */
        text-align: left !important;
        padding: 0 !important;
    }

    .card-title {
        font-size: 0.88em !important;
        /* 1.05em에서 0.88em으로 축소하여 모바일 한 줄 정렬 */
        font-weight: 800 !important;
        color: #1a1a1a !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        /* 무조건 한 줄로만 나오도록 강제 적용 */
    }

    .card-desc {
        font-size: 0.74em !important;
        /* 설명 문구 개행이 보완되므로 글씨 크기를 0.74em으로 가독성 복원 */
        font-weight: 500 !important;
        color: #555555 !important;
        margin-top: 3px !important;
        line-height: 1.25 !important;
    }

    .mo-br {
        display: block !important;
        /* 모바일 환경에서만 개행 br 태그 강제 활성화 */
    }

    .mo-nowrap {
        white-space: nowrap !important;
        display: inline-block;
    }

    /* 3섹션 모바일 */
    .sec-market {
        aspect-ratio: auto !important;
        /* 모바일 고정 종횡비 해제 */
        background-size: cover !important;
        background-position: center bottom !important;
        padding-top: 60px !important;
        padding-bottom: 240px !important;
        /* 하단 캐릭터 일러스트 노출 영역 보존 */
    }

    .market-title {
        font-size: 1.8em !important;
    }

    .market-header {
        margin-bottom: 30px !important;
    }

    .market-comparison {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        margin-bottom: 50px !important;
    }

    .card-past,
    .card-now {
        width: 90% !important;
        max-width: 300px !important;
        margin-top: 0 !important;
        /* 데스크톱 처짐 정렬 제거 */
    }

    .market-bubble-list {
        max-width: 100% !important;
        gap: 12px !important;
        margin-bottom: 50px !important;
    }

    .bubble-row {
        padding: 0 15px !important;
    }

    .bubble-row img {
        max-width: 260px !important;
        /* 모바일 말풍선 기본 크기 조절 */
        opacity: 0.70 !important;
    }

    .row-left img {
        max-width: 215px !important;
        /* 1번 말풍선이 비대하게 보이는 문제를 잡기 위해 너비를 215px로 제한 */
    }

    .market-footer-title {
        font-size: 1.05em !important;
        /* 모바일에서 텍스트가 줄바꿈 없이 한 줄에 들어차도록 폰트 축소 */
        letter-spacing: -0.04em !important;
        /* 글자 자간 축소 */
        padding: 0 10px !important;
    }

    .market-footer-desc {
        font-size: 0.78em !important;
        /* 본문 문장들이 가로 영역 이탈 없이 한 줄로 나오도록 크기 축소 */
        letter-spacing: -0.03em !important;
        /* 자간 축소 */
        padding: 0 10px !important;
        line-height: 1.6 !important;
    }

    /* 4섹션 모바일 */
    .sec-services {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        border-bottom: none !important;
    }

    .services-header-box {
        margin-bottom: 35px !important;
    }

    .sub-lead-blue {
        font-size: 0.95em !important;
        margin-bottom: 12px !important;
    }

    .sec-desc-sub {
        font-size: 0.9em !important;
        margin-top: 15px !important;
        margin-bottom: 30px !important;
        line-height: 1.6 !important;
        padding: 0 10px;
    }

    .services-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        /* 모바일에서는 4열 2행 격자 배치 */
        gap: 6px !important;
        margin-bottom: 25px !important;
        padding: 0 5px !important;
    }

    .service-tab-btn {
        width: 100% !important;
        aspect-ratio: 140 / 76 !important;
        height: auto !important;
    }

    .services-tab-content {
        max-width: none !important;
        width: calc(100% + 28px) !important;
        /* 부모 container 패딩을 상쇄하여 이미지 영역 확대 */
        margin-left: -14px !important;
        /* 기존 좌우 여백 24px을 절반 이하인 10px 수준으로 좁힘 */
        margin-right: -14px !important;
        /* 기존 우측 여백도 상쇄 */
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    /* 5 & 6섹션 통합 배경 래퍼 모바일 오버라이딩 */
    .sec-system-contact-wrap {
        aspect-ratio: auto !important;
        /* 모바일 가로 협소에 따른 세로 납작 현상 방지를 위해 종횡비 고정 해제 */
        background-size: cover !important;
        /* 배경 이미지가 모바일 세로 전체를 예쁘게 덮도록 커버 처리 복원 */
        background-position: center top !important;
        margin-top: -2px !important;
        /* 브라우저 서브픽셀 틈새(gap)로 인한 실선 노출 완벽 차단 */
    }

    /* 5섹션 모바일 */
    .sec-system {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .sec-system .animal_container {
        padding: 0 16px !important;
    }

    .system-grid {
        flex-direction: column !important;
        gap: 10px !important;
        /* 카드 사이 여백 절반(10px)으로 축소 */
    }

    .system-card {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .system-card .card-info {
        position: absolute !important;
        left: 6.3% !important;
        top: 35% !important;
        /* Y축 시작 기준점을 35%로 맞추어 제목 정렬 일치 */
        transform: none !important;
        width: 56% !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .system-card .card-title {
        font-size: 0.88em !important;
        /* 제목 크기 원래대로 복원 */
        font-weight: 800 !important;
        color: #1a1a1a !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    .system-card .card-desc {
        font-size: 0.74em !important;
        /* 설명글 크기 원래대로 복원 */
        font-weight: 500 !important;
        color: #555555 !important;
        margin-top: 3px !important;
        line-height: 1.25 !important;
    }

    /* 모바일 캐릭터 위치 재배치 */
    .system-characters {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        bottom: auto !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .sys-dog-wrap {
        position: absolute !important;
        left: 8px !important;
        top: 275px !important;
        /* 강아지 수직 위치: 1번 카드 중간 영역 정도로 조금 더 하강 조정 */
        height: 55px !important;
        /* 대폭 축소 */
        width: auto !important;
        transform: none !important;
        margin-left: 0 !important;
    }

    .sys-dog {
        height: 100% !important;
        width: auto !important;
    }

    .sys-cat-wrap {
        position: absolute !important;
        right: 8px !important;
        bottom: -72px !important;
        /* 고양이 수직 위치: 4번 카드 영역 아래로 더 하강시켜 겹침 방지 */
        height: 75px !important;
        /* 대폭 축소 */
        width: auto !important;
        margin-right: 0 !important;
    }

    .sys-cat {
        height: 100% !important;
        width: auto !important;
    }

    /* 6섹션 모바일 */
    .sec-contact {
        background: transparent !important;
        /* 모바일 배경 투명화로 5-6 통합배경 공유 */
        padding-bottom: 220px !important;
        /* 모바일 세로 하단 여백을 조금 더 연장하여 배경 노출 확장 */
    }

    .diagnostic-speech img {
        max-width: 260px !important; /* 모바일 말풍선 크기 축소 */
        height: auto !important;
        margin: 0 auto;
    }

    .contact-title {
        font-size: 1.55em !important;
        /* 모바일 기기 규격에 알맞게 타이틀 축소 */
    }

    .contact-split {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .contact-form-box {
        padding: 25px 18px 20px 18px !important;
        /* 폼 박스 세로/가로 패딩 축소 */
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    .contact-form-box .animal_form-group {
        margin-bottom: 10px !important;
        /* 모바일 폼 세로 크기 단축을 위한 필드 여백 축소 */
        gap: 5px !important;
    }

    .contact-form-box .animal_form-group label {
        font-size: 0.85em !important;
        /* 라벨 크기 축소 */
    }

    .contact-form-box .animal_form-group label .required {
        font-size: 0.85em !important;
    }

    .contact-form-box .animal_form-group input {
        padding: 10px 14px !important;
        /* 인풋 높이 축소 */
        font-size: 0.9em !important;
        /* 인풋 폰트 크기 축소 */
    }

    .contact-form-box .animal_privacy-group {
        margin-bottom: 15px !important;
        /* 동의 영역 여백 축소 */
        font-size: 0.78em !important;
        /* 동의 폰트 크기 축소 */
    }

    .contact-form-box .animal_privacy-group input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
    }

    .contact-form-box .animal_btn-submit {
        width: 100% !important;
        max-width: 280px !important;
        /* 모바일에 알맞게 제출 버튼 가로폭 슬림화 */
        padding: 11px !important;
        /* 버튼 패딩 축소 */
        font-size: 1.1em !important;
        /* 버튼 폰트 크기 축소 */
    }

    /* 퀵메뉴 모바일 크기 줄임 */
    .animal_quick-menu {
        right: 8px !important;
        bottom: 30px !important;
        gap: 8px !important;
    }

    .animal_quick-menu a {
        width: 56px !important; /* 모바일 버튼 크기를 50px에서 56px로 상향 */
        height: 56px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 50% !important;
    }

    #quick-go-top {
        padding: 13px !important;
        box-sizing: border-box !important; /* 패딩 적용 시 전체 크기가 56px로 유지되며 찌그러짐을 방지 */
    }
}

/* ==========================================================================
   커스텀 경고 모달 팝업 스타일 (Custom Alert Modal Styles)
   ========================================================================== */
.animal_alert_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* 다른 모든 모달 및 퀵메뉴보다 위쪽에 노출 */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.animal_alert_modal.show {
    display: flex;
    opacity: 1;
}

.animal_alert_modal-content {
    background-color: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    overflow: hidden;
    padding: 30px 24px;
    box-sizing: border-box;
    border: 2px solid #2769E1;
    /* 윈에이드 포인트 블루 */
}

/* 모달 등장 시 좌우로 흔들리는 쉐이크 효과 */
.animal_alert_modal.shake .animal_alert_modal-content {
    animation: alertShake 0.4s ease;
}

@keyframes alertShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15%,
    45%,
    75% {
        transform: translateX(-8px);
    }

    30%,
    60%,
    90% {
        transform: translateX(8px);
    }
}

.alert-logo {
    height: 24px;
    width: auto;
    margin-bottom: 15px;
}

.animal_alert_modal-body {
    padding: 10px 0 20px 0;
}

.alert-icon {
    font-size: 2.5em;
    color: #ffb800;
    /* 주의 경고용 골드 옐로우 */
    margin-bottom: 12px;
    display: block;
}

#animal_alert-message {
    font-size: 1.1em;
    font-weight: 700;
    color: #333333;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}

.animal_alert_modal-footer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.animal_alert-btn {
    background-color: #2769E1;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 11px 0;
    font-size: 1em;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    outline: none;
    box-shadow: 0 4px 10px rgba(39, 105, 225, 0.2);
}

.animal_alert-btn:hover {
    background-color: #0056e3;
}

/* 미입력 인풋 필드 흔들림 효과 (Input Shake) */
.input-shake {
    animation: inputFieldShake 0.4s ease-in-out;
    border-color: #ff3b30 !important;
    /* 경고 레드 색상 강조 */
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.2) !important;
}

@keyframes inputFieldShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15%,
    45%,
    75% {
        transform: translateX(-6px);
    }

    30%,
    60%,
    90% {
        transform: translateX(6px);
    }
}