/* Global Styles */
@font-face {
    font-family: 'D2Coding';
    src: url('fonts/D2Coding.woff2') format('woff2'),
        url('fonts/D2Coding.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 초기 상태: 숨김 */
.hidden {
    opacity: 0;
}

/* 표시 상태 */
.visible {
    opacity: 1;
    transition: opacity 0.5s ease; /* 전환 효과 */
}

body {
    background-color: #060c0e;
    color: #D4E9EC;
    margin: 0;
    width: 100vw;
    font-family: 'D2Coding', sans-serif; 
    /* Use D2Coding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Spacer Classes */
.spacer-large {
    height: calc(5em);
    /* Forced spacing */
}

.spacer-medium {
    height: calc(3em);
}

.spacer-small {
    height: calc(1.5em);
}

.spacer-tiny {
    height: calc(0.5em);
}

/* 이메일 링크 스타일 */
.email-link {
    display: inline-block; /* 부모의 정렬 속성을 따름 */
    text-align: center; /* 텍스트 가운데 정렬 */
    width: 100%; /* 선택 사항: 너비를 부모 요소에 맞춤 */
    color: #F1F9D7;
    font-size: 12px;
    text-decoration: none; /* 밑줄 제거 */
    margin: 0 auto; /* 선택 사항: 가운데 정렬 */
}

/* 마우스 오버 시 밑줄 표시 */
.email-link:hover {
    text-decoration: underline;
}

.email-link2 {
    color: #F1F9D7;
    font-size: 12px;
    text-decoration: none; /* 밑줄 제거 */
}

/* 마우스 오버 시 밑줄 표시 */
.email-link2:hover {
    text-decoration: underline;
}

.hyper-link {
    display: inline-block; /* 부모의 정렬 속성을 따름 */
    color: #177ab3;
    text-decoration: none;
    font-size: 12px;
}

.hyper-link:hover {
    font-weight: bold;
}

.privacy-link {
    display: inline-block; /* 부모의 정렬 속성을 따름 */
    text-align: center; /* 텍스트 가운데 정렬 */
    width: 100%; /* 선택 사항: 너비를 부모 요소에 맞춤 */
    color: #b34317;
    text-decoration: none;
    font-size: 12px;
}

.privacy-link:hover {
    font-weight: bold;
}

/* 컨테이너 스타일 */
.specific-container {
    position: relative;
    width: 560px;
    height: 315px;
    cursor: pointer;
}

#language-selector button {
    width: 100px; /* 모든 버튼의 너비를 동일하게 설정 */
    height: 30px; /* 모든 버튼의 높이를 동일하게 설정 */
    padding: 5px; /* 버튼 내부 여백 */
    margin: 5px; /* 버튼 간 간격 */
    font-size: 14px; /* 텍스트 크기 설정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    border: 1px solid #D4E9EC; /* 버튼 테두리 */
    border-radius: 5px; /* 모서리를 둥글게 설정 */
    background-color: #06292e; /* 버튼 배경색 */
    color: #D4E9EC; /* 버튼 텍스트 색상 */
    cursor: pointer; /* 마우스 커서 변경 */
    box-sizing: border-box; /* 패딩과 테두리를 크기 계산에 포함 */
    transition: background-color 0.3s ease; /* 마우스 오버 시 부드러운 색상 전환 */
}

/* 버튼에 마우스 오버 시 스타일 */
#language-selector button:hover {
    background-color: #57AAB5;
    color: #FFFFFF;
}

/* 부모 컨테이너: 플렉스박스 설정 */
body .language-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 80%;
    max-width: 520px;
    text-align: left;
}

body .language-content.hidden {
    opacity: 0;
    display: none; /* 초기 상태에서 완전히 숨김 */
}

body .language-content.visible {
    opacity: 1;
    display: flex; /* 보이는 상태에서 플렉스 컨테이너 활성화 */
    transition: opacity 0.5s ease;
}

/* 자식 요소: 텍스트 스타일 */
.language-content p,
.language-content h2,
.language-content h3 {
    text-align: left; /* 텍스트 좌측 정렬 */
    width: 100%; /* 부모 요소를 기준으로 너비 설정 */
    word-wrap: break-word; /* 단어 단위로 개행 */
    overflow-wrap: break-word; /* 긴 단어도 개행 */
    margin: 10px 0; /* 문단 간격 추가 */
}

.development-container {
    display: flex; /* Flexbox 활성화 */
    justify-content: space-between; /* 항목 간 간격 균등 분배 */
    align-items: center; /* 이미지와 텍스트를 수직으로 정렬 */
    gap: 20px; /* 각 항목 간의 간격 */
    flex-wrap: nowrap; /* 화면 크기에 따라 줄바꿈 */
}

/* 개별 항목 스타일 */
.development-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 250px; /* 최소 너비 */
    text-align: center;
}

/* 이미지 스타일 */
.development-specific-image {
    width: 100%; /* 이미지 크기를 항목 너비에 맞춤 */
    height: auto; /* 비율 유지 */
    margin-top: 10px; /* 텍스트와 이미지 간 간격 */
}

/* 각 항목 아래의 스토어 링크 컨테이너 */
.store-links {
    display: flex; /* Flexbox로 가로 정렬 */
    justify-content: center; /* 중앙 정렬 */
    gap: 10px; /* 두 아이콘 간 간격 */
    margin-top: 10px; /* 이미지와 아이콘 간 간격 */
}

/* 스토어 아이콘 스타일 */
.store-icon {
    width: 100%; /* 아이콘 너비 */
    max-width: 40px;
    height: auto; /* 비율 유지 */
    transition: transform 0.2s ease; /* 클릭 효과 추가 */
}

.store-icon:hover {
    transform: scale(1.1); /* 호버 시 확대 효과 */
    cursor: pointer; /* 클릭 가능한 포인터 표시 */
}

.date-style {
    font-size: 12px; /* 폰트 크기를 조정 */
    color: #2db194;   /* 텍스트 색상 변경 */
    font-weight: bold; /* 필요하면 두께 변경 */
}

/* 텍스트 강조 박스 스타일 */
.text-highlight {
    position: relative; /* 이미지와 독립적으로 위에 위치 */
    width: 100%;
    max-width: 560px; /* 이미지 너비와 동일, 양쪽 여백 추가 */
    background-color: rgba(47, 82, 82, 0.144); /* 반투명 배경 */
    color: #D4E9EC; /* 텍스트 색상 */
    font-size: 14px; /* 텍스트 크기 */
    text-align: center; /* 텍스트 가운데 정렬 */
    padding: 10px 20px; /* 내부 여백 */
    border: 2px solid transparent #57aab500; /* 테두리 */
    border-radius: 5px; /* 둥근 모서리 */
    box-sizing: border-box; /* 테두리 포함 크기 계산 */
    /*margin-bottom: 10px; /* 이미지와 간격 추가 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 텍스트 강조 */
}

/* 이미지 스타일 */
.specific-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px; /* Optional rounded corners */
    transition: opacity 0.3s ease;
}

/* 레이어 스타일 */
.video-layer {
    position: absolute; /* 이미지 위치를 기준으로 배치 */
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 검정 배경 */
    z-index: 1000;
}

/* 닫기 버튼 스타일 */
.close-button {
    position: absolute;
    top: 20px;
    right: 30px;
    background-color: #06292e;
    color: #58797e;
    font-size: 12px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1001;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    background-color: #57AAB5;
    color: #FFF;
}

/* Header Styles */
h1 {
    color: #57AAB5;
    font-size: 70px;
    text-align: center;
    margin: 0;
}

h2 {
    color: #57AAB5;
    font-size: 50px;
    text-align: center;
    margin: 0;
}

h3 {
    color: #57AAB5;
    font-size: 28px;
    text-align: center;
    margin: 0;
}

/* Paragraph Styles */
p {
    color: #D4E9EC;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

img {
    width: auto; /* 기본 너비를 유지 */
    max-width: 100%; /* 부모 요소의 너비를 초과하지 않음 */
    height: auto; /* 비율 유지 */
    display: block; /* 브라우저 기본 마진 제거 */
    margin: 0 auto; /* 가운데 정렬 */
}

/* Footer Styles */
footer {
    color: #1C3C40;
    font-size: 14px;
    text-align: center;
}

footerSub {
    color: #1C3C40;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .development-container {
        flex-direction: column; /* 작은 화면에서 세로로 배치 */
        align-items: center;
    }

    .store-icon {
        width: 100%; /* 아이콘 너비 */
        max-width: 40px;
        height: auto; /* 비율 유지 */
    }

    .text-highlight {
        width: 90%; /* 작은 화면에서 뷰포트 너비의 90% */
        max-width: none; /* 최대 너비 제한 해제 */
        margin: 0 auto; /* 항상 가운데 정렬 */
    }

    .specific-container {
        width: 100%; /* 이미지 컨테이너 너비를 화면 너비에 맞춤 */
    }

    .specific-image {
        width: 100%; /* 이미지도 화면 너비에 맞춤 */
    }

    .language-content {
        width: 90%; /* 화면 너비의 90%로 제한 */
        max-width: none;
        padding: 0 10px; /* 양쪽 여백 추가 */
    }

    .language-content p,
    .language-content h2,
    .language-content h3 {
        max-width: 90%; /* 모바일 화면에서는 너비를 화면의 90%로 제한 */
    }
}