/* 창원 탄소중립 포털 - 기본 스타일 */

/* 커스텀 색상 변수 */
:root {
    --primary-color: #2ecc71;
    --secondary-color: #27ae60;
}

/* Bootstrap container 반응형 */
.container {
    width: 100%;
    max-width: 1490px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    position: relative;
}

/* 기본 바디 스타일 - 반응형 */
html, body {
    width: 100%;
    overflow-x: hidden;  /* 가로 스크롤 방지 */
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;  /* 모바일에서는 푸터가 relative이므로 패딩 제거 */
    position: relative;
}

/* body::before 제거 (모바일에서 불필요) */

main {
    flex: 1;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 메인 내부 container */
main .container {
    width: 100% !important;
    max-width: 1490px !important;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* 푸터 스타일 - 반응형 */
.footer {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 83px;  /* 전체 높이 83px */
    min-height: 83px;
    background-color: #2A2F3B;  /* 피그마 디자인: 다크 블루-그레이 배경 */
    color: #ffffff;
    z-index: 100;
    box-sizing: border-box;
    padding: 20px 0;  /* 피그마 디자인: 상하 패딩 조정 */
    margin-top: auto;  /* flex 컨테이너에서 자동으로 하단에 붙도록 */
    display: flex;
    align-items: center;  /* 수직 중앙 정렬 */
}

/* 푸터 내부 container */
.footer .container {
    width: 100% !important;
    max-width: 1490px !important;
    margin: 0 auto;  /* 중앙 정렬 */
    padding-left: 15px;  /* 모바일에서는 작은 패딩 */
    padding-right: 15px;
    padding-top: 0;  /* padding-top 제거 */
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    height: fit-content;  /* 내용물 높이에 맞게 자동 조정 */
}

/* 푸터 컨텐츠 영역 - 피그마 디자인: 가로 3개 섹션 배치 */
.footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0;  /* 개별 간격으로 제어 */
}

/* 왼쪽: 로고 및 타이틀 */
.footer-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 80px;  /* footer-center-title의 왼쪽으로 80px 간격 */
}

.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 8px;  /* 피그마 디자인: 로고와 텍스트 사이 간격 조정 */
}

.footer-logo {
    width: auto;
    height: 26px;  /* 피그마 디자인: 24px-28px */
    display: block;
    flex-shrink: 0;
}

.footer-title {
    font-family: 'KbizHanmaumGothic', 'Noto Sans KR', sans-serif;
    font-size: 25px;
    font-weight: 700;  /* 피그마 디자인: 가장 크고 굵은 폰트 */
    color: #ffffff;
    line-height: 25px;
    white-space: nowrap;
}

/* 가운데: 창원시 탄소중립 지원센터 정보 */
.footer-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    text-align: left;
}

.footer-center-title {
    font-family: 'Droid Sans', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 20px;
    margin-bottom: 0.25rem;  /* 피그마 디자인: 제목과 주소 사이 간격 조정 */
}

.footer-center-address {
    font-family: 'Droid Sans', 'Noto Sans KR', sans-serif;
    font-size: 13px;  /* 피그마 디자인: 작은 회색 폰트 */
    font-weight: 400;
    color: #687187;
    line-height: 18px;
}

/* 오른쪽: 창원산업진흥원 */
.footer-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.footer-right-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right-logo {
    height: 32px;  /* 피그마 디자인: 30px-35px (왼쪽 로고보다 약간 큼) */
    width: auto;
    object-fit: contain;
}

.footer-right-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;  /* 피그마 디자인: 제목과 부제목 사이 간격 조정 */
}

.footer-right-title {
    font-family: 'Droid Sans', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 20px;
}

.footer-right-subtitle {
    font-family: 'Droid Sans', sans-serif;
    font-size: 11px;  /* 피그마 디자인: 매우 작은 회색 폰트 */
    font-weight: 400;
    color: #97a4c4;
    line-height: 14px;
}

/* Figma 디자인 - 메인 타이틀 섹션 (반응형) */
.main-title-section {
    position: relative;  /* 기본값: relative */
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 500;
    line-height: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
}

.main-title-line1,
.main-title-line2 {
    margin: 0;
    font-family: 'Noto Sans KR', 'Droid Sans', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
    line-height: 1;
    white-space: normal;  /* 모바일에서 줄바꿈 허용 */
    text-align: center;
}

.main-title-line1 {
    margin-bottom: 0.3rem;
}

/* 메인 타이틀 이미지 섹션 (반응형) */
.main-title-image-section {
    position: relative;  /* 기본값: relative */
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 500;
    pointer-events: none;
    margin: 1rem auto;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-title-image {
    display: block;
    width: 100%;
    max-width: 492px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 1));
    margin: 0 auto;
}

/* 데이터 카드 그리드 섹션 (반응형) */
.data-cards-section {
    position: relative;  /* 기본값: relative */
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 500;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 290px;  /* 카운트다운 타이머 하단으로부터 290px 간격 */
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* 데이터 카드 */
.data-card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid white;
    border-radius: 14px;  /* 20px * 0.7 */
    opacity: 0.9;
    backdrop-filter: blur(10px);
    width: 189px;
    flex: 0 0 189px;
    height: auto;
    min-height: 122px;  /* 174px * 0.7 */
    padding: 0.7rem;  /* 1rem * 0.7 */
    box-sizing: border-box;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    cursor: pointer;
}

/* 카드 아이콘 (기본 상태: 숨김) */
.card-icon {
    position: absolute;
    right: 16.8px;  /* 24px * 0.7 */
    bottom: 17.5px;  /* 25px * 0.7 */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.card-icon-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;  /* 오른쪽 하단 정렬 */
}

/* 호버 이미지 기본 상태: 숨김 */
.card-icon-hover {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 클릭 이미지 기본 상태: 숨김 */
.card-icon-click {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 카드 아이콘 크기 (카드별로 다름) */
.data-card:nth-child(1) .card-icon {
    width: 67.9px;  /* 97px * 0.7 */
    height: 65.1px;  /* 93px * 0.7 */
}

.data-card:nth-child(2) .card-icon {
    width: 62.3px;  /* 89px * 0.7 */
    height: 67.2px;  /* 96px * 0.7 */
}

.data-card:nth-child(3) .card-icon {
    width: 79.1px;  /* 113px * 0.7 */
    height: 65.8px;  /* 94px * 0.7 */
}

.data-card:nth-child(4) .card-icon {
    width: 66.5px;  /* 95px * 0.7 */
    height: 71.4px;  /* 102px * 0.7 */
}

.data-card:nth-child(5) .card-icon {
    width: 65.8px;  /* 94px * 0.7 */
    height: 65.8px;  /* 94px * 0.7 */
    right: 16.8px;  /* 24px * 0.7 */
    bottom: 17.5px;  /* 25px * 0.7 */
}

.data-card:nth-child(6) .card-icon {
    width: 74.2px;  /* 106px * 0.7 */
    height: 66.5px;  /* 95px * 0.7 */
}

/* 호버 제목 (기본 상태: 숨김) */
.card-title-hover {
    display: none;
    position: absolute;
    left: 0.7rem;  /* padding 고려 */
    top: 0.7rem;  /* padding 고려 */
    flex-direction: column;
    gap: 0;
    font-family: 'Noto Sans KR', 'Droid Sans', sans-serif;
    font-size: 15.4px;  /* 22px * 0.7 */
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    line-height: 17.5px;  /* 25px * 0.7 */
    white-space: pre-wrap;
    width: 154px;  /* 220px * 0.7 */
    z-index: 2;
}

.card-title-hover div {
    margin: 0;
}

/* 카드 숫자 값 */
.card-value {
    position: absolute;
    right: 16px;  /* 23px * 0.7 */
    bottom: 19px;  /* 27px * 0.7 */
    font-family: 'Montserrat', sans-serif;  /* Aldrich 대체 */
    font-size: 38.5px;  /* 55px * 0.7 */
    font-weight: 400;
    line-height: 1;  /* 줄간격 최소화 */
    letter-spacing: -1.93px;  /* -2.75px * 0.7 */
    text-align: right;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
    transform-origin: right bottom;  /* 오른쪽 하단 기준 */
}

.card-value-orange {
    color: #fca653;  /* 주황색 */
}

.card-value-blue {
    color: #6be3f9;  /* 하늘색 */
}

.card-value-green {
    color: #61fd86;  /* 초록색 */
}

/* 카드 컨텐츠 (제목 + 단위) */
.card-content {
    position: absolute;
    left: 0.7rem;  /* padding 고려 */
    top: 0.7rem;  /* padding 고려 */
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    width: 154px;  /* 220px * 0.7 */
    line-height: 17.5px;  /* 25px * 0.7 */
    z-index: 2;
}

.card-title {
    font-family: 'Noto Sans KR', 'Droid Sans', sans-serif;
    font-size: 15.4px;  /* 22px * 0.7 */
    font-weight: 700;  /* Bold */
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    white-space: pre-wrap;
}

.card-unit {
    font-family: 'Noto Sans KR', 'Droid Sans', sans-serif;
    font-size: 11.2px;  /* 16px * 0.7 */
    font-weight: 400;  /* Regular */
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    margin-top: 0;
    transition: opacity 0.3s ease;
}

/* 카드 호버 효과 */
.data-card:hover {
    background: #12152a;  /* 어두운 파란색 배경 */
    backdrop-filter: blur(0px);  /* 글라스 효과 제거 */
}

.data-card:hover .card-value {
    opacity: 0;  /* 숫자 값 숨김 */
}

.data-card:hover .card-icon {
    opacity: 1;  /* 아이콘 컨테이너 표시 */
}

.data-card:hover .card-icon-hover {
    opacity: 1;  /* 호버 이미지 표시 */
}

.data-card:hover .card-icon-click {
    opacity: 0;  /* 클릭 이미지 숨김 */
}

.data-card:hover .card-title {
    display: none;  /* 기본 제목 숨김 */
}

.data-card:hover .card-title-hover {
    display: flex;  /* 호버 제목 표시 */
}

.data-card:hover .card-unit {
    opacity: 0;  /* 단위 숨김 */
}

/* 카드 클릭(active) 효과 - 호버와 동일하지만 배경색이 검은색 */
.data-card:active {
    background: rgba(0, 0, 0, 0.9) !important;  /* 검은색 배경, opacity 0.9 */
    backdrop-filter: blur(0px);  /* 글라스 효과 제거 */
}

.data-card:active .card-value {
    opacity: 0 !important;  /* 숫자 값 숨김 */
}

.data-card:active .card-icon {
    opacity: 1 !important;  /* 아이콘 컨테이너 표시 */
}

.data-card:active .card-icon-click {
    opacity: 1 !important;  /* 클릭 이미지 표시 */
}

.data-card:active .card-icon-hover {
    opacity: 0 !important;  /* 호버 이미지 숨김 */
}

.data-card:active .card-title {
    display: none !important;  /* 기본 제목 숨김 */
}

.data-card:active .card-title-hover {
    display: flex !important;  /* 호버 제목 표시 */
}

.data-card:active .card-unit {
    opacity: 0 !important;  /* 단위 숨김 */
}

/* 호버와 active가 동시에 적용될 때 active 우선 */
.data-card:hover:active {
    background: rgba(0, 0, 0, 0.9) !important;  /* 검은색 배경 우선 */
}

.data-card:hover:active .card-icon {
    opacity: 1 !important;  /* 아이콘 확실히 표시 */
}

.data-card:hover:active .card-icon-click {
    opacity: 1 !important;  /* 클릭 이미지 표시 */
}

.data-card:hover:active .card-icon-hover {
    opacity: 0 !important;  /* 호버 이미지 숨김 */
}

/* 반응형 미디어 쿼리 */

/* 데스크톱 (1490px 이상) */
@media (min-width: 1490px) {
    body::before {
        content: '';
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 1490px;
        height: 100vh;
        pointer-events: none;
        z-index: -1;
    }
    
    /* 모든 페이지에서 푸터는 relative로 컨텐츠 아래에 붙임 */
    body:has(.main-title-section) {
        padding-bottom: 0;
    }
    
    /* 메인화면의 메인 컨텐츠 영역 최소 높이 설정 (푸터가 아래에 붙도록) */
    body:has(.main-title-section) main {
        min-height: 100vh;  /* 최소 화면 높이 */
    }
    
    /* 메인화면의 푸터를 스크롤 가능하게 relative로 변경 */
    body:has(.main-title-section) .footer {
        position: relative !important;
        bottom: auto !important;
        margin-top: auto;
    }
    
    /* 메인 페이지가 아닌 경우 푸터는 relative */
    body:not(:has(.main-title-section)) {
        padding-bottom: 0;
    }
    
    body:not(:has(.main-title-section)) .footer {
        position: relative !important;
        bottom: auto;
        height: 83px;
        min-height: 83px;
        padding: 20px 0;
        margin-top: auto !important;  /* flex 컨테이너에서 자동으로 하단에 붙도록 */
    }
    
    .footer .container {
        padding-left: 75px;
        padding-right: 75px;
        padding-top: 0;
    }
    
    .footer-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;  /* 개별 간격으로 제어 */
    }
    
    .footer-left {
        flex-shrink: 0;
        margin-right: 80px;  /* footer-center-title의 왼쪽으로 80px 간격 */
    }
    
    .footer-center {
        flex: 1;
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .footer-right {
        flex-shrink: 0;
    }
    
    .footer-logo {
        height: 26px;  /* 데스크톱: 피그마 디자인 크기 */
        width: auto;
    }
    
    .footer-right-logo {
        height: 32px;  /* 데스크톱: 피그마 디자인 크기 */
        width: auto;
    }
    
    .main-title-section,
    .main-title-image-section,
    .data-cards-section {
        position: relative;
        left: auto;
        top: auto;
    }
    
    .main-title-section {
        margin-top: 200px;
        margin-bottom: 1rem;
    }
    
    .main-title-image-section {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .countdown-container {
        margin-top: 2rem;
        margin-bottom: 0;  /* 카운트다운과 data-card 사이 간격은 data-cards-section의 margin-top으로 제어 */
    }
    
    .data-cards-section {
        margin-top: 290px;  /* 카운트다운 타이머 하단으로부터 정확히 290px 간격 */
        margin-bottom: 2rem;
        max-width: 1490px;
        flex-wrap: nowrap;
        gap: 1rem;
    }
    
    .data-card {
        width: 189px;  /* 피그마 디자인: 각 카드 가로 사이즈 189px */
        flex: 0 0 189px;
        min-width: 189px;
        max-width: 189px;
    }
}

/* 태블릿 (768px ~ 1489px) */
@media (min-width: 768px) and (max-width: 1489px) {
    .main-title-section,
    .main-title-image-section,
    .data-cards-section {
        position: relative;
        left: auto;
        top: auto;
        margin: 2rem auto;
        padding: 0 1rem;
    }
    
    .main-title-section {
        max-width: 100%;
        margin-top: 120px;
    }
    
    .main-title-line1,
    .main-title-line2 {
        font-size: 20px;
        white-space: normal;
    }
    
    .main-title-image {
        width: 100%;
        max-width: 492px;
        height: auto;
    }
    
    .data-cards-section {
        width: 100%;
        max-width: 870px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-top: 290px;  /* 카운트다운 타이머 하단으로부터 정확히 290px 간격 */
        margin-bottom: 2rem;
    }
    
    .data-card {
        width: 189px;  /* 피그마 디자인: 각 카드 가로 사이즈 189px */
        flex: 0 0 189px;
        min-width: 189px;
        max-width: 189px;
        height: auto;
        min-height: 122px;  /* 174px * 0.7 */
    }
    
    .footer .container {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0;
    }
    
    .footer-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;  /* 개별 간격으로 제어 */
    }
    
    .footer-left {
        flex-shrink: 0;
        margin-right: 80px;  /* footer-center-title의 왼쪽으로 80px 간격 */
    }
    
    .footer-center {
        flex: 1;
        text-align: center;
        max-width: 500px;
    }
    
    .footer-right {
        flex-shrink: 0;
    }
    
    .footer-logo {
        height: 24px;
        width: auto;
    }
    
    .footer-title {
        font-size: 22px;
    }
    
    .footer-center-title {
        font-size: 15px;
    }
    
    .footer-center-address {
        font-size: 12px;
    }
    
    .footer-right-logo {
        height: 30px;
        width: auto;
    }
    
    .footer-right-title {
        font-size: 15px;
    }
    
    .footer-right-subtitle {
        font-size: 11px;
    }
}

/* 모바일 (767px 이하) */
@media (max-width: 767px) {
    body {
        padding-bottom: 0;
    }
    
    /* 메인 컨텐츠 영역을 flexbox로 설정하여 순서 조정 가능하게 */
    body:has(.main-title-section) main {
        display: flex;
        flex-direction: column;
    }
    
    .main-title-section,
    .main-title-image-section,
    .data-cards-section {
        position: relative;
        left: auto;
        top: auto;
        margin: 1rem auto;
        padding: 0 1rem;
    }
    
    .main-title-section {
        max-width: 100%;
        margin-top: 100px;
        order: 1;  /* 첫 번째: 메인 타이틀 텍스트 */
    }
    
    body:has(.main-title-section) .main-title-image-section {
        order: 2;  /* 두 번째: 메인 타이틀 이미지 */
    }
    
    /* 카운트다운을 메인 타이틀 이미지 아래, 카드 위로 배치 */
    body:has(.main-title-section) .countdown-container {
        order: 3;  /* 세 번째: 카운트다운 (main-title-image-section 아래) */
    }
    
    body:has(.main-title-section) .data-cards-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;  /* 모바일에서는 카운트다운과의 간격 조정 */
        margin-bottom: 2rem;
        order: 4;  /* 네 번째: 데이터 카드 (countdown-container 아래) */
    }
    
    body:has(.main-title-section) .data-card {
        width: calc(100% - 2rem);  /* 모바일: 화면 너비에 맞게 조정 (좌우 여백 제외) */
        max-width: 350px;  /* 모바일 최대 너비 제한 */
        min-width: 280px;  /* 모바일 최소 너비 */
    }
    
    .main-title-line1,
    .main-title-line2 {
        font-size: 16px;
        white-space: normal;
        line-height: 1.4;
    }
    
    .main-title-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .data-card {
        width: calc(100% - 2rem);  /* 모바일: 화면 너비에 맞게 조정 */
        max-width: 350px;  /* 모바일 최대 너비 제한 */
        min-width: 280px;  /* 모바일 최소 너비 */
        height: auto;
        min-height: 105px;  /* 150px * 0.7 */
        padding: 0.75rem;
    }
    
    .card-value {
        font-size: 28px;  /* 40px * 0.7 */
    }
    
    .card-title {
        font-size: 12.6px;  /* 18px * 0.7 */
    }
    
    .card-title-hover {
        font-size: 12.6px;  /* 18px * 0.7 */
        width: 100%;
    }
    
    .card-unit {
        font-size: 9.8px;  /* 14px * 0.7 */
    }
    
    .footer {
        height: 83px;
        min-height: 83px;
        padding: 1.5rem 0;
        display: flex;
        align-items: center;  /* 수직 중앙 정렬 */
    }
    
    .footer .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0;
        padding-bottom: 1.5rem;
    }
    
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .footer-left,
    .footer-center,
    .footer-right {
        width: 100%;
    }
    
    .footer-logo {
        height: 22px;  /* 모바일: 작은 크기 */
        width: auto;
    }
    
    .footer-title {
        font-size: 18px;
    }
    
    .footer-center-title {
        font-size: 13px;
    }
    
    .footer-center-address {
        font-size: 11px;
        line-height: 1.5;
    }
    
    .footer-right-logo-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .footer-right-logo {
        height: 26px;  /* 모바일: 작은 크기 */
        width: auto;
    }
    
    .footer-right-title {
        font-size: 13px;
    }
    
    .footer-right-subtitle {
        font-size: 10px;
    }
}