/* =======================================================
   Reset & Base
======================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
a { text-decoration: none; color: inherit; }
body { background-color: #111; color: #fff; line-height: 1.6; word-break: keep-all; }

/* 유틸리티 클래스 */
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.point-color { color: var(--point-color) } /* 고채도 민트 */

:root {
    --point-color: #01b3b4;     /* 메인 브랜드 민트 (버튼, 타이틀, 뱃지 등) */
    --highlight-color: #00cccc; /* 강조 텍스트 및 플로팅 배너 포인트 */
}
/* =======================================================
   Layout & Components
======================================================= */
.campaign-container { width: 100%; overflow: hidden; }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; text-align: center; z-index: 2; }

/* 공통 섹션 스타일 */
section[class^="sec-"] { 
    padding: 120px 0; 
    position: relative; 
    background-size: cover; 
    background-position: center; 
}
section[class^="sec-"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); 
    z-index: 1;
}

/* 텍스트 타이포그래피 */
.sec-title { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 30px; line-height: 1.4; }
.desc { font-size: 20px; color: #ddd; line-height: 1.7; }
.highlight-text { font-size: 24px; font-weight: 700; color: var(--highlight-color); }

/* 버튼 스타일 */
.btn-donate {
    display: inline-block;
    padding: 20px 60px;
    background-color: var(--point-color);
    color: #111;
    font-size: 22px;
    font-weight: 800;
    border-radius: 50px;
    margin-top: 40px;
    box-shadow: 0 10px 20px rgba(0, 229, 255, 0.2);
    transition: all 0.3s ease;
}
.btn-donate:hover {
    background-color: var(--point-color);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 229, 255, 0.4);
}
@media (max-width: 768px) {
    .pc-only-br {
        display: none; 
    }
    .sec-action .sec-title {
        font-size: 22px; 
        line-height: 1.4;
        padding: 0 10px; 
    }
}

/* =======================================================
   Sections
======================================================= */
/* Sec 1: Hero */
.sec-hero { 
    height: 100vh; 
    min-height: 800px; 
    display: flex; 
    align-items: center; 
    background-image: url('../img/section-1.jpg'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}
.header { position: absolute; top: 40px; left: 20px; right:20px; text-align: left; z-index: 10; }
.logo a { display: block; width: 150px; height: 40px; text-indent: -9999px; background: url('../img/logo-wh.png') no-repeat center bottom; background-size: contain; }
.badge { display: inline-block; padding: 8px 20px; background: rgba(0, 229, 255, 0.2); color: var(--point-color); border: 1px solid var(--point-color); border-radius: 30px; font-weight: 700; margin-bottom: 20px; }
.main-title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-bottom: 20px; color: #fff; }
.scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); opacity: 0.8; animation: bounce 2s infinite; font-weight: bold; letter-spacing: 1px; color: var(--point-color); }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}

/* =======================================================
   Sec 2
======================================================= */
.sec-crisis {
    background-image: url('../img/section-2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 140px 0;
}
.sec-crisis::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.6));
    z-index: 1;
}
.sec-crisis .sec-title {font-size: 38px;font-weight: 800; line-height: 1.45;letter-spacing: -0.5px; margin-bottom: 35px;}
.sec-crisis .desc { font-size: 18px; color: #cecece; line-height: 1.8; font-weight: 400;}
.crisis-meta {display: flex; justify-content: center; margin-top: 50px;}
.meta-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px); 
    border-radius: 16px;
    padding: 40px 60px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}
.meta-item:hover { transform: translateY(-5px); border-color: rgba(23, 156, 173, 0.3); }
.meta-label { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #888; margin-bottom: 12px;}
.meta-value { display: block; font-size: 48px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 12px; letter-spacing: -1px;}
.meta-desc { font-size: 16px; color: #aaa;}

/* =======================================================
   Mobile (768px 이하)
======================================================= */
@media (max-width: 768px) {
    .sec-crisis {padding: 90px 0;}
    .sec-crisis .sec-title { font-size: 24px; line-height: 1.4; padding: 0 10px;}
    .sec-crisis .desc {font-size: 15px; line-height: 1.7;}
    .meta-item {padding: 30px 20px; margin: 0 10px;}
    .meta-value {font-size: 30px;}
    .meta-desc { font-size: 14px;}
}

/* Sec 5: Action (활동 안내) */
.sec-action { background-image:url('../img/section-5.jpg');background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
.sec-action::before { 
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.img-grid { display: flex; justify-content: center; gap: 24px; margin: 50px 0;}
.img-item { 
    flex: 1; 
    max-width: 360px; 
    height: 360px; 
    border-radius: 12px;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.img-item:nth-child(1) { background-image: url('../img/m-section-5-image1.jpg'); }
.img-item:nth-child(2) { background-image: url('../img/m-section-5-image2.jpg'); }
.notice { font-size: 16px; color: #ccc; position: relative; z-index: 2; } 

@media (max-width: 768px) { 
    .h3 {font-size:20px;}     
    .img-grid { 
        display: flex;                  /* flex 속성 재확인 */
        flex-direction: row !important; /* 위쪽 column 설정 덮어쓰기 */
        gap: 12px; 
        padding: 0 10px;
    }   
    .img-item { 
        width: 50%;                     /* 💡 핵심: max-width 대신 그냥 width를 주어야 영역이 살아납니다! */
        height: 180px;                  /* 모바일 높이 지정 */
        background-size: cover;         /* 배경 이미지 유실 방지 */
        background-position: center;
    }    
    .notice { 
        font-size: 11px; 
        line-height: 1.5; 
        margin-top: 20px;               /* 텍스트가 사진에 너무 붙지 않게 여백 추가 */
    }
}

/* =======================================================
   Sec 3: Children (통이미지 여백에 맞춰 우측 정렬)
======================================================= */
.sec-children {
    background-image: url('../img/section-3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 140px 0;
}

/* 💡 핵심: 내부 텍스트 전체를 오른쪽으로 밀어버림 */
.sec-children .inner {
    text-align: right; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* flex 요소들도 우측 끝으로 정렬 */
}

/* 타이틀, 본문, 강조 텍스트 전부 우측 정렬 */
.sec-children .sec-title,
.sec-children .desc,
.sec-children .highlight-text {
    text-align: right;
    width: 100%;
    max-width: 600px; /* 💡 글자가 왼쪽 이미지 영역까지 침범하지 못하게 가로폭 제한 */
}


/* =======================================================
   최하단 모바일 미디어 쿼리 구문 안쪽
======================================================= */
@media (max-width: 768px) {
    /* ... 기존 모바일 코드 ... */

    /* 💡 모바일은 화면이 좁으니 다시 중앙 정렬로 예쁘게 정돈 */
    .campaign-container .sec-children .inner {
        text-align: center;
        align-items: center;
    }
    .campaign-container .sec-children .sec-title,
    .campaign-container .sec-children .desc,
    .campaign-container .sec-children .highlight-text {
        text-align: center;
        max-width: 100%; /* 모바일에선 가로폭 제한 해제 */
    }
}


/* =======================================================
   Sec 4: Appeal
======================================================= */
.sec-appeal {background-color: #111; padding: 140px 0;}
.sec-appeal::before { display: none; } 
.appeal-container { display: flex; align-items: center; justify-content: space-between; gap: 60px; text-align: left;}
/* 좌측 텍스트 박스 */
.appeal-text {flex: 1.2; }
.sec-appeal .sec-title { margin-bottom: 25px; text-align: left;}
.sec-appeal .desc { color: #b0b0b0;  text-align: left;}
.sec-appeal .highlight-text {  text-align: left;}
/* 우측 이미지 박스 */
.appeal-img {
    flex: 1;
    height: 450px; 
    border-radius: 16px;
    background-image: url('../img/section-04.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* =======================================================
   Sec 4: Appeal (Mobile Responsive)
======================================================= */
@media (max-width: 768px) {
  .sec-appeal {
    padding: 70px 0; 
  }  
  .appeal-container {
    flex-direction: column-reverse;
    gap: 30px;
  }

 .appeal-img {
    flex: none;          
    width: 100%;
    height: 260px;       
    display: block;
    border-radius: 12px;
    background-image: url('../img/section-04.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .appeal-text {
    width: 100%;
  }

  .pc-only-br {
    display: none;
  }
  .sec-appeal .sec-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .sec-appeal .desc {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Sec 5: Action (활동 안내) */
.sec-action { 
    background-image:url('../img/section-5.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    position: relative;
    padding: 80px 0;
}
.sec-action::before { 
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.sec-action .inner {
    position: relative;
    z-index: 2; 
    text-align: center; 
}

.sec-title {
    font-size: 32px; 
    color: #fff; 
    margin-bottom: 20px;
}
.point-color { color: #f33; }

.img-grid { 
    display: flex; 
    justify-content: center; 
    gap: 24px; 
    margin: 50px 0;
}
.img-item { 
    flex: 1; 
    max-width: 360px; 
    height: 360px; 
    border-radius: 12px;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    position: relative; 
    overflow: hidden; 
}

.item1 { background-image: url('../img/m-section-5-image1.jpg'); }
.item2 { background-image: url('../img/m-section-5-image2.jpg'); }

.img-text-bar {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 60px; 
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center; 
    justify-content: center; 
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.img-text-bar span {
    font-size: 20px; 
    color: #333; 
    font-weight: bold;
}
.notice { 
    font-size: 16px; 
    color: #ccc; 
    line-height: 1.6;
} 

@media (min-width: 769px) {
    .pc-only-br { display: block; }
}

@media (max-width: 768px) { 
    .sec-action { padding: 40px 0; }
    .sec-title {font-size:22px; margin-bottom: 15px;}         
    .pc-only-br { display: none; }
    .img-grid { 
        display: flex;                 
        flex-direction: row !important; 
        gap: 12px; 
        padding: 0 10px;
        margin: 30px 0;
    }   
    .img-item { 
        width: 50%;                    
        height: 180px;                  
        background-size: cover;         
        background-position: center;
        border-radius: 8px; 
    }    
    
    .img-text-bar {
        height: 40px; 
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .img-text-bar span {
        font-size: 14px; 
    }

    .notice { 
        font-size: 11px; 
        line-height: 1.5; 
        margin-top: 20px;               
    }
}

/* =======================================================
   Sec 6: CTA (하단 통이미지 배경 적용)
======================================================= */
.sec-cta { 
    padding: 160px 0; 
    display: flex; 
    align-items: center; 
    position: relative;
    background-color: #000;
}

/* 💡 비디오 플레이스홀더 대신 통이미지 배경 세팅 */
.sec-cta .bg-video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    overflow: hidden; 
}

.sec-cta .placeholder-video { 
    width: 100%; 
    height: 100%; 
    background-image: url('../img/section-6.jpg'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; 
}

.sec-cta .cta-title { 
    font-size: 40px; 
    font-weight: 900; 
    line-height: 1.4; 
    color: #fff; 
    position: relative;
    z-index: 2;
}

/* 후원 버튼이 배경 위로 올라오도록 레이어 정렬 */
.sec-cta .btn-donate {
    position: relative;
    z-index: 2;
}



/* =======================================================
   Footer (세련된 다크 그레이 & 시인성 개선 버전)
======================================================= */
.footer { 
    background-color: #1a1c1e; /* 💡 완전 검은색 대신 신뢰감을 주는 딥 차콜 그레이 */
    color: #a0a5ab;            /* 💡 본문 텍스트가 눈에 잘 띄도록 밝기 상향 */
    padding: 70px 20px;        /* 위아래 여백을 살짝 늘려 공간감 확보 */
    font-size: 14px; 
    text-align: center; 
}

.footer-top { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 30px; 
    padding-bottom: 30px; 
    border-bottom: 1px solid #2d3135; /* 💡 배경색에 맞춰 보더 라인 투명도 자연스럽게 변경 */
}

.footer-logo { 
    height: 38px; 
    filter: brightness(0) invert(1); /* 💡 핵심: 칙칙한 회색 대신 완전한 화이트 로고로 치환 */
    opacity: 0.9;                    /* 쨍하지 않게 미세하게 투명도 조절 */
}

.agency-name { 
    color: #ffffff; /* 💡 기관 영문명을 화이트로 변경해 로고와 밸런스 유지 */
    font-size: 18px; 
    letter-spacing: 1px; 
}

.footer-info p { 
    margin-bottom: 12px; 
}

.footer-info span { 
    margin: 0 12px; 
    display: inline-block; 
    color: #90959a; /* 정보 텍스트 가독성 확보 */
}

.copyright { 
    margin-top: 35px; 
    color: #6a7077; /* 카피라이트는 조연이니까 은은하게 낮춤 */
}

.copyright-notice { 
    margin-top: 8px; 
    color: #5a6066; 
    font-size: 12px; 
}
/* =======================================================
   사이드 플로팅 배너 (스피닝 테두리 효과)
======================================================= */
.floating-badge {
    position: fixed;
    top: 240px;
    right: 80px;
    z-index: 9999;
    width: 150px;
    height: 217px;
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.floating-badge a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.floating-badge a::before {  
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: conic-gradient(transparent, transparent 70%, var(--highlight-color)); 
    animation: border-spin 2.5s linear infinite; 
    z-index: 1;
}

.floating-badge a::after {
    content: "";
    position: absolute;    
    top: 2px; 
    right: 2px; 
    bottom: 2px; 
    left: 2px; 
    background-color: #111; 
    background-image: url('../img/sec1_badge.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px;
    z-index: 2;
}

@keyframes border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =======================================================
   Mobile Responsive (768px 이하)
======================================================= */
@media (max-width: 768px) {
    section[class^="sec-"] { padding: 80px 0; }
    .sec-title { font-size: 26px; }
    .main-title { font-size: 34px; }
    .desc { font-size: 16px; }
    .highlight-text { font-size: 18px; }
    
    .btn-donate { padding: 16px 30px; font-size: 18px; width: 100%; }
    
    .img-grid { flex-direction: column; align-items: center; }
    .img-item { width: 100%; }
    
    .footer-info span { display: block; margin-bottom: 5px; }
    
    .floating-badge { display: none; } /* 모바일에서는 플로팅 배너 숨김 */
}