/* Google Fonts - Roboto Condensed 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/* HTML 기본 폰트 크기를 조절하여 rem 단위의 기준 변경 (16px -> 25px 기준) */
html {
    font-size: 156.25%; /* 1rem = 16px * 1.5625 = 25px */
    scroll-behavior: smooth; /* 기존 html 스타일 유지 */
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #ffffff;
    /* 기본 폰트 설정 */
    font-family: 'Noto Sans KR', 'Roboto Condensed', sans-serif;
    /* body에서 font-size를 제거하여 html로부터 상속받도록 함 */
    /* letter-spacing 값은 여기서 계속 조절하면 됨 */
    letter-spacing: 1.5px; /* 이 값을 조절해서 원하는 자간을 맞춰보세요 */
    /* 가로 스크롤 숨김 유지 */
    overflow-x: hidden;
    /* 세로 스크롤은 필요에 따라 허용 (overflow: auto;) */
}

/* 별 컨테이너 (Fixed로 스크롤 따라오게 설정) */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* 파티클보다 아래, 가장 뒤에 위치 */
    pointer-events: none; /* 별 뒤의 요소를 클릭할 수 있도록 설정 */
}

/* 별 요소 */
.star {
    position: absolute; /* stars-container 내부에서 절대 위치 */
    width: 2px;
    height: 2px;
    background-color: white;
    border-radius: 50%;
    opacity: 0; /* 초기 투명도 */
    /* JS에서 설정하는 CSS 변수 사용 */
    top: var(--top);
    left: var(--left);
    /* 별 애니메이션 */
    animation: twinkle 3s forwards; /* 애니메이션 유지 */
    animation-delay: var(--delay); /* JS에서 설정하는 지연 시간 */
    /* 별의 빛나는 효과 */
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
}

/* 별 애니메이션 키프레임 */
@keyframes twinkle {
    0% { opacity: 0; }
    100% { opacity: 0.8; } /* 별의 최대 투명도 */
}

/* Particles.js 컨테이너 (Fixed로 스크롤 따라오게 설정) */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 별보다 위에, 컨텐츠보다 아래 */
    /* 초기 투명도는 JS에서 설정하고 트랜지션으로 부드럽게 나타나게 함 */
    opacity: 0;
    transition: opacity 2s ease; /* JS에서 opacity 변경 시 사용될 트랜지션 */
    pointer-events: none; /* 파티클 뒤의 요소를 클릭할 수 있도록 설정 */
}

/* 전체 화면 섹션 (예: 홈 섹션) */
.full-screen-section {
    min-height: 100vh; /* 뷰포트 높이의 100% */
    padding-top: 40px; /* 상단 네비게이션바 높이 고려하여 내용 시작 위치 조정 */
    position: relative; /* 자식 요소의 z-index 기준 - footer-tagline 위치 지정을 위해 필요 */
    z-index: 1; /* 배경 요소들보다 위에 오도록 설정 */
    display: flex; /* 내부 .content를 중앙에 배치하기 위해 flexbox 사용 */
    flex-direction: column; /* 세로 방향 정렬 */
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

/* 섹션 내 콘텐츠 컨테이너 (메인 요소들을 묶음) */
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* 자식 요소(H1, P, A)의 애니메이션 지연 기준 */
    z-index: 2; /* 섹션 내에서 가장 위에 오도록 */
}

/* 메인 제목 (PINEX) 스타일 및 애니메이션 */
/* Removed animation from here, will be controlled by JS */
h1 {
    font-size: 6em;
    margin: 0;
    letter-spacing: 2px; /* 이 제목은 개별적으로 letter-spacing이 지정되어 있음 */
    /* opacity and transition will be set by JS */
    text-shadow: 0 0 10px #ffffff55, 0 0 20px #ffffff44, 0 0 30px #ffffff33; /* Initial glow effect */
}

/* Removed glowFade keyframes as animation is removed from h1 */
/* @keyframes glowFade {
    0% {
        opacity: 0;
        text-shadow: none;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 10px #ffffff55, 0 0 20px #ffffff44, 0 0 30px #ffffff33;
    }
} */

/* 부제목 스타일 */
/* Removed initial opacity and animation from here, will be controlled by JS */
.subtitle {
    margin-top: 10px;
    font-size: 1.3em;
    /* opacity and transition will be set by JS */
}

/* 푸터 스타일 */
footer {
    position: relative; /* 섹션 아래에 자연스럽게 오도록 */
    width: 100%;
    text-align: center;
    font-size: 0.85em;
    color: #888;
    padding: 40px 0; /* 상하 패딩 */
    z-index: 1; /* 컨텐츠 레벨 */
}

/* 홈 섹션의 태그라인 스타일 (수정됨: absolute positioning 적용) */
.footer-tagline.home-tagline {
    position: absolute; /* 부모(#home)를 기준으로 절대 위치 지정 */
    bottom: 40px; /* 아래쪽에서 30px 위로 배치 (값은 조절 가능) */
    left: 50%; /* 가로 중앙에 오도록 시작점 설정 */
    transform: translateX(-50%); /* 자신의 너비의 50%만큼 왼쪽으로 이동하여 완벽하게 중앙 정렬 */
    width: 100%; /* 부모 요소(#home)의 너비를 따라가도록 설정 */
    text-align: center; /* 문구를 중앙 정렬 */

    font-size: 0.85em; /* 기존 폰트 크기 유지 */
    color: #888; /* 기존 색상 유지 */
    opacity: 0.4; /* 기존 투명도 유지 (애니메이션과 연관) */
    /* margin-top 제거 */

    /* 애니메이션 지연 클래스는 index.html에 그대로 유지 */
    /* fade-in-delay-4 애니메이션이 이 위치에 적용될 것임 */
}

/* 초대 신청 버튼 스타일 */
.invite-button {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 24px;
    font-size: 1em;
    border: 2px solid #ffffff33;
    border-radius: 8px;
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease; /* 호버 시 부드러운 변화 */
    opacity: 0; /* 초기 투명도 */
}
/* 버튼 호버 시 스타일 */
.invite-button:hover {
    background-color: #ffffff22;
    border-color: #ffffff55;
}

/* 버튼 하이라이트 애니메이션 */
/* 버튼 하이라이트 애니메이션 */
@keyframes highlight {
    0% {
        /* 시작 시점: 은은한 상태 */
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), /* 골드 색상, 약간의 투명도 */
                    0 0 15px rgba(255, 204, 0, 0.3); /* 좀 더 퍼지게 */
        opacity: 1; /* 버튼 자체는 보이도록 유지 */
    }
    50% {
        /* 중간 시점: 빛이 가장 강하고 넓게 퍼짐 */
        box-shadow: 0 0 25px rgba(255, 223, 128, 0.9), /* 밝은 골드/흰색 계열, 좀 더 불투명하게, 번짐 확대 */
                    0 0 50px rgba(255, 215, 0, 0.8), /* 번짐 확대 */
                    0 0 75px rgba(255, 204, 0, 0.7), /* 번짐 확대 */
                    0 0 100px rgba(255, 193, 0, 0.6); /* 점점 더 넓게 퍼지는 효과, 번짐 확대 */
       	opacity: 1;
    }
    100% {
        /* 종료 시점: 빛이 약해지면서 거의 사라짐 (또는 아주 미미하게 남거나) */
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.2); /* 은은하게 남는 여운 */
        opacity: 1;
    }
}

  /* 하이라이트 적용 클래스 - 우선순위 유지 */
.full-screen-section .content .invite-button.highlight-cta {
    animation: highlight 4s ease-in-out forwards; /* 애니메이션 지속 시간 4초로 늘림, 타이밍 함수 변경 */
    opacity: 1 !important; /* 이전 문제 해결을 위해 유지 */
  }


/* 요소가 서서히 나타나는 애니메이션 지연 클래스 */
/* Removed fade-in-delay-2 as it's controlled by JS now */
/* .fade-in-delay-2 { animation: fadeIn 1s ease-out forwards; animation-delay: 2.5s; } */
/* Adjusted delays for quicker appearance after ticket animation */
/* .fade-in-delay-3 { animation: fadeIn 1s ease-out forwards; animation-delay: 1s; }
.fade-in-delay-4 { animation: fadeIn 1s ease-out forwards; animation-delay: 1.5s; } /* 이 클래스는 index.html의 문구 p 태그에 붙어있음 */



/* 달 이미지 스타일 */
.moon {
    position: fixed; /* 스크롤 따라오게 고정 */
    top: 20px;
    left: 20px;
    width: 40px;
    opacity: 0.28; /* 초기 투명도 */
    z-index: 10001; /* 최상단 네비게이션 바 위에 오도록 */
    cursor: pointer; /* 마우스 오버 시 포인터 모양 */
    transition: opacity 0.3s ease, box-shadow 0.3s ease; /* 투명도 및 그림자 변화 트랜지션 */
    filter: none;
    box-shadow: none;
}
/* 달 이미지 호버 시 투명도 변경 */
.moon:hover {
    opacity: 0.5;
}
/* 달 이미지 클릭 시 적용되는 glow 효과 */
.moon-glow {
    box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.2);
}

/* 이스터 에그 컨테이너 스타일 */
.easter-egg {
    display: none; /* 초기 상태: 숨김 */
    position: fixed; /* 스크롤 따라오게 고정 */
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%); /* 가운데 정렬 */
    z-index: 10002; /* 달 이미지보다 위에 오도록 */
    text-align: center;
    color: #ccc;
    font-size: 1.2em;
    flex-direction: column;
    gap: 0.3em;

    opacity: 0; /* 초기 투명도: 투명 */
    transition: opacity 0.5s ease-out; /* 투명도 변화에 트랜지션 적용 (페이드인/아웃 시 사용) */
}

/* 이스터 에그가 보일 때 적용할 클래스 (페이드인 트리거 및 표시 상태 유지) */
.easter-egg.is-visible {
    opacity: 1;
}

/* 이스터 에그 내용 (각 줄) 스타일 및 애니메이션 */
.easter-content .line {
    opacity: 0; /* 초기 투명도 */
    animation: typeIn 1s ease-out forwards; /* 타자 치는 듯한 애니메이션 */
}
/* 각 줄별 애니메이션 지연 시간 */
.easter-content .line:nth-child(1) { animation-delay: 0.2s; }
.easter-content .line:nth-child(2) { animation-delay: 1.6s; }

/* 이스터 에그 이모지 스타일 및 애니메이션 */
.easter-content .emoji {
    opacity: 0; /* 초기 투명도 */
    font-size: 1.3em;
    animation: fadeIn 1s ease forwards; /* 서서히 나타나는 애니메이션 */
    animation-delay: 3s; /* 나타나는 지연 시간 */
}

/* typeIn 애니메이션 키프레임 */
@keyframes typeIn {
    from { opacity: 0; transform: translateY(10px); } /* 시작: 투명하고 약간 아래에서 */
    to   { opacity: 1; transform: translateY(0); }   /* 끝: 불투명해지고 원래 위치로 */
}

/* index.html에서 이동된 스타일 */
.top-nav {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 10000;
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
    font-weight: 600;
}

.top-nav a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease; /* 호버 트랜지션 추가 */
}
.top-nav a:hover {
    opacity: 1;
}
.emotional-section {
    min-height: 100vh;
    padding: 140px 20px;
    text-align: center;
    color: #ccc;
    font-family: 'Roboto Condensed', sans-serif; /* 여기에도 폰트가 지정되어 있지만, body에서 상속받음 */
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* emotional-section 내 h2 (제목) 스타일 */
.emotional-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 24px; /* 제목 아래 여백 */
    color: #fff;
    text-shadow: 0 0 6px rgba(255,255,255,0.3);
}
/* emotional-section 내 p (본문 단락) 스타일 - margin-bottom 추가 */
.emotional-section p {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 20px; /* !!! 단락 아래에 20px 여백 추가 !!! */
    color: #ccc;
}
/* emotional-section 내 마지막 p 태그는 아래 여백을 제거하여 다음 섹션과 자연스럽게 이어지도록 */
.emotional-section p:last-child {
    margin-bottom: 150px ;
}
.emotional-section p strong {
    color: #fff; /* 하얀색으로 변경 */
    font-weight: 700; /* 폰트 굵기 더 강조 (Roboto Condensed 700이 가장 굵음) */
}
/* 서비스 섹션 전체 컨테이너 수정 */
.service-section {
    display: flex; /* 플렉스박스 사용 */
    flex-direction: row; /* ★ 항목을 가로 방향으로 나열 ★ */
    flex-wrap: wrap; /* ★ 항목들이 넘치면 다음 줄로 넘어가게 설정 ★ */
    gap: 40px; /* ★ 항목들 사이의 가로/세로 간격 설정 (원래 60px였는데 2열에선 40px 정도로 줄여봄) ★ */
    max-width: 840px; /* ★ 2열 배치 고려해서 최대 너비 살짝 늘림 (카드 너비 + 간격 감안) ★ */
    margin: 0 auto; /* 가운데 정렬 */
    padding: 0 20px; /* 좌우 패딩 */
    justify-content: center; /* ★ 항목들을 가운데로 모아주기 ★ */
}

/* 각 서비스 내용을 담는 카드 스타일 - 너비 추가 */
.card {
    /* 기존 스타일 유지 */
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* ★ 2열 배치를 위한 너비 설정 ★ */
    width: calc(50% - 20px); /* 50% 너비에서 gap 절반(20px)을 뺀 값 */
    /* flex-basis: calc(50% - 20px); */ /* flex-basis를 써도 비슷해 */
}

/* 카드에 마우스 오버 시 효과 */
.card:hover {
    transform: translateY(-5px); /* 살짝 위로 뜨는 효과 */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); /* 그림자 좀 더 강하게 */
}


/* 카드 제목 스타일 */
.card h3 {
    font-size: 1.5em; /* rem 말고 em 단위 사용 (부모 글자 크기 기준) */
    font-weight: 700; /* 볼드체 */
    margin-top: 0; /* 위쪽 마진 제거 */
    margin-bottom: 15px; /* 아래 마진 */
    color: #fff; /* 흰색 */
    /* text-align: center; /* 부모에서 상속받거나 여기에 명시 */
    text-shadow: 0 0 5px rgba(255,255,255,0.3); /* 제목에 미세한 그림자 */
}

/* 카드 본문 단락 스타일 */
.card p {
    margin: 8px 0; /* 위아래 마진 좀 더 주고 좌우는 0 */
    line-height: 1.7; /* 줄 간격 좀 더 넓게 */
    color: #ccc; /* 회색 텍스트 */
    /* text-align: center; /* 부모에서 상속받거나 여기에 명시 */
    font-size: 1em; /* 부모 글자 크기 기준 */
}

/* 모바일 반응형 (기존 코드 수정) */
@media (max-width: 600px) {
    .service-section {
        flex-direction: column; /* ★ 좁은 화면에선 다시 세로로 쌓이게 ★ */
        gap: 40px; /* 세로 간격 */
        max-width: 100%; /* 모바일에서는 좌우 꽉 채우도록 */
    }
    .card {
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .card p {
        margin: 8px 0;
    line-height: 1.7;
    color: #ccc;
    font-size: 1em;

    word-break: keep-all;
    text-align: justify;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    }
}
.regional-note {
    margin-top: 60px;
    text-align: center;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    opacity: 0.8;
}
.regional-note strong {
    color: #fff;
    font-weight: 600;
}
.services {
    margin-top: 350px; /* Access by invitation only와의 간격을 위한 마진 (값은 조절 가능) */
    padding: 60px 20px; /* 위쪽 패딩을 늘리고, 나머지 패딩은 기존 값 유지 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-title {
    font-size: 2em;
    margin-bottom: 40px;
    font-weight: bold;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.card {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 30px;
    border-radius: 12px;
    width: calc(50% - 20px); /* 두 칸씩 */
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    text-align: left;
}

.card h3 {
    font-size: 1.3em;
    margin-bottom: 16px;
    font-weight: bold;
}

.card p {
    font-size: 0.95em;
    line-height: 1.6;
    word-break: keep-all;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .card {
        width: 100%;
    }
}
/* styles.css 파일 하단 또는 적절한 위치에 추가 */

/* 스크롤 애니메이션 초기 상태 (숨겨져 있고 약간 아래에 위치) */
.reveal {
    opacity: 0; /* 초기 투명 */
    transform: translateY(50px); /* 아래쪽에서 50px 올라오는 효과 */
    transition: opacity 1.5s ease-out, transform 1s ease-out; /* 1초 동안 부드럽게 변화 */
}

/* 스크롤 애니메이션 최종 상태 (나타나면서 원래 위치로 이동) */
.revealed {
    opacity: 1; /* 불투명해짐 */
    transform: translateY(0); /* 원래 위치로 이동 */
}

/* 예시: 서비스 카드에 이 효과를 적용하고 싶다면, 기존 .card 스타일에는 transition을 제거하거나 조정해야 할 수 있습니다. */
/* 만약 .card 자체에 hover 효과 등 다른 transition이 있다면 충돌하지 않도록 주의해야 합니다. */
/* 지금 .card에는 transform과 box-shadow transition이 있으니, reveal 클래스 적용 시 transform transition이 override 될 수 있도록 .revealed 클래스가 나중에 오거나 specificity가 높아야 합니다. */
/* 아니면 .card 자체에 reveal 클래스를 주는 대신, .card 내부 요소에 reveal 클래스를 줄 수도 있습니다. */
/* 맨 위로 가기 버튼 기본 스타일 */
/* 우주 초대장 카드 스타일 */

/* styles.css 파일에서 우주 초대장 카드 스타일 부분 수정 */

/* 우주 초대장 카드 스타일 - 이미지에 맞게 수정 */
/* 우주 초대장 카드 스타일 - 이미지에 맞게 수정 */
/* 우주 초대장 카드 스타일 - 이미지 컨테이너 역할만 하도록 수정 */


/* 카드 내부 메시지 스타일 */
.card-message {
    font-size: 0.9em;
    margin: 0 0 8px 0;
    color: #ccc;
    line-height: 1.5;
    /* ★ 텍스트가 넘칠 때 줄바꿈되도록 속성 추가 ★ */
    word-wrap: break-word; /* 긴 단어가 넘칠 때 강제 줄바꿈 */
    overflow-wrap: break-word; /* CSS3 표준 속성 (word-wrap의 최신 버전) */
}

/* 카드 내부 CTA 문구 스타일 */
.card-cta {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    margin: 0;
    /* ★ 텍스트가 넘칠 때 줄바꿈되도록 속성 추가 ★ */
    word-wrap: break-word; /* 긴 단어가 넘칠 때 강제 줄바꿈 */
    overflow-wrap: break-word; /* CSS3 표준 속성 */
}

/* 워프 애니메이션 중 텍스트 숨김 효과 */
body.warping .top-nav,
body.warping .full-screen-section .content,
body.warping .footer-tagline,
body.warping .stars-container,
body.warping #particles-js,
body.warping .services,
body.warping .emotional-section,
body.warping footer {
    opacity: 0 !important;
    pointer-events: none;
}

body.warping .full-screen-section {
    opacity: 1;
  }

/* Google Fonts ... */
html { font-size:156.25%; }
body { background:#000; color:#fff; overflow-x:hidden; }

/* fade-in helper */
.fade-in { opacity:1 !important; transition:opacity 1s ease-in-out; }

/* 스타, 파티클 초기 상태 */
#particles-js, #stars-container { opacity:0; }

/* 별 */
.star { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:0;
  animation:twinkle 3s forwards; animation-delay:var(--delay);
  top:var(--top); left:var(--left);
}
@keyframes twinkle { to { opacity:0.8; }}


/* Apply 버튼 강조 유지 */
.invite-button.highlight-cta { box-shadow:0 0 20px gold; }

/* === 별 & 파티클 === */
#stars-container, #particles-js { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1s ease-in-out; }
.star { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:0; animation:twinkle 3s forwards; animation-delay:var(--delay); top:var(--top); left:var(--left); }
@keyframes twinkle { to { opacity:0.8; } }

/* === 우주 초대장 카드 스타일 === */
/* 이 코드 블록으로 styles.css 파일 내의 모든 .invitation-card 관련 중복 규칙을 대체하세요. */

.invitation-card {
    position: fixed; /* 스크롤에 상관없이 화면에 고정 */

    /* ★ 초기 위치 설정 (하단 중앙 근처) - top/left/transform 방식 ★ */
    /* 이 위치에서 애니메이션이 시작됩니다. 필요시 top 값만 조절하세요. */
    top: 80%; /* 뷰포트 높이의 80% 지점에서 시작 */
    left: 50%; /* 뷰포트 너비의 50% 지점에서 시작 (가로 중앙) */
    transform: translate(-50%, -50%) scale(1); /* 자신의 크기 기준으로 중앙 정렬, 스케일 1로 시작 */

    width: 240px; /* 카드 너비 유지 */
    height: auto; /* 이미지 비율 유지를 위해 auto (이미지가 컨테이너 크기를 결정하도록) */

    /* 사각형 카드 효과 완전히 제거 */
    background-color: transparent !important; /* 배경색 투명 강제 */
    border: none !important; /* 테두리 제거 강제 */
    border-radius: 0 !important; /* 둥근 모서리 제거 강제 */
    backdrop-filter: none !important; /* 배경 흐림 제거 강제 */
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important; /* 기본 box-shadow 제거 강제 */
    padding: 0 !important; /* 내부 여백 제거 강제 */

    z-index: 9999; /* 다른 요소들보다 위에 */
    cursor: pointer; /* 마우스 오버 시 포인터 모양 */
    text-align: center; /* 내부 이미지/요소 중앙 정렬을 위해 */
    display: flex; /* 내부 요소 정렬을 위해 flexbox 사용 */
    flex-direction: column; /* 세로 방향 정렬 */
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    box-sizing: border-box; /* padding이 width에 포함되도록 */

    opacity: 0; /* 초기 상태: 완전히 투명 (숨김) */
    pointer-events: none; /* 초기에는 클릭 불가 */

    /* ★ 애니메이션에 사용할 속성들에 대한 transition 정의 ★ */
    /* JS에서 top, left, transform, opacity, filter 값을 변경할 때 이 속성들에 따라 부드럽게 변함 */
    /* visible 상태 진입 시 opacity와 filter 변화 트랜지션은 .visible 규칙에 다시 정의 */
    transition: top 1s ease-in-out, /* top 변화는 1초 */
                left 1s ease-in-out, /* left 변화는 1초 */
                transform 1s ease-in-out, /* transform 변화는 1초 */
                opacity 0.5s ease-in-out, /* opacity 변화는 기본적으로 여기서 제어 */
                filter 0.8s ease-in-out; /* filter 변화는 기본적으로 여기서 제어 */

    /* 기본 상태에서는 필터 글로우 없음 (visible 상태에서 추가) */
    filter: none;
}

/* 초대장 카드가 스크롤로 보일 때 적용될 클래스 (자바스크립트에서 추가/제거) */
.invitation-card.visible {
    opacity: 1; /* 불투명해져서 보이게 함 */
    pointer-events: auto; /* 클릭 가능하게 함 */
    /* visible 상태가 될 때 opacity와 filter만 트랜지션 */
    /* transform: translate(-50%, -50%) scale(1); // visible 상태의 transform은 기본값 유지 */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6))
            drop-shadow(0 0 10px rgba(255, 204, 0, 0.4));
     /* visible 상태 진입/해제 시 opacity와 filter만 부드럽게 변하도록 transition 다시 정의 */
     /* 이 transition이 기본 .invitation-card의 opacity, filter transition을 덮어씁니다. */

}

/* 초대장 카드에 마우스 오버 시 스타일 (visible 상태일 때 호버가 가능하므로 visible 상태와 함께 적용) */
/* 기본 위치(top, left)는 변경하지 않고, transform과 filter만 변화 */
.invitation-card:hover {
    /* 배경색, 테두리 등은 변경 없음 */
    background-color: transparent !important; /* 호버 시에도 투명 유지 */
    border-color: transparent !important; /* 호버 시에도 테두리 없음 */

    /* ★ 호버 시 작은 변화 (새 포지셔닝 시스템에 맞게 translate(-50%, -50%) 기준) ★ */
    /* 예: 살짝 위로 올라가는 transform 효과 (기존 translateY(-8px)를 새 시스템에 맞게) */
    /* transform: translate(-50%, calc(-50% - 8px)); */ /* calc 사용 */
    /* 예: 살짝 커지게 (scale 1.03) */
    transform: translate(-50%, -50%) scale(1.03); /* 기본 translate(-50%,-50%) 유지하고 scale만 변경 */

    /* ★ 호버 시 더 강한 이미지 형태 글로우 적용 ★ */
    filter: drop-shadow(0 0 15px rgba(255, 223, 128, 0.9))
            drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 50px rgba(255, 204, 0, 0.6));

    /* ★ 호버 효과의 변화 시간 정의 (기본/visible transition과 별개로 짧게) ★ */
    /* transform과 filter 변화에만 짧은 transition 적용 */
    /* 이 transition이 기본 .invitation-card의 transform, filter transition을 덮어씁니다. */


    /* 커서 모양은 기본 invitation-card에 정의되어 있으므로 여기서는 불필요하지만, 명시해도 됨 */
    /* cursor: pointer; */
}

/* 초대장 카드 컨테이너 안의 이미지 스타일 */
.invitation-ticket-img {
    display: block; /* 이미지 태그의 기본 마진/패딩 제거 */
    width: 100%; /* 부모(.invitation-card) 너비에 맞춤 */
    height: auto; /* 이미지 비율 유지 */
    margin: 0 auto; /* 이미지 자체를 가운데 정렬 (부모의 text-align: center와 flexbox로도 가능하지만 안전하게) */
}


/* ★ 미디어 쿼리 내의 .invitation-card 관련 스타일 (새 포지셔닝 시스템 사용) ★ */
/* 작은 화면에서 카드 크기나 위치를 조정해야 한다면 여기에 정의 */
@media (max-width: 768px) {
    .invitation-card {
        width: 200px; /* 작은 화면에서 너비 조절 */
        /* 위치 조절 예시: 하단에서 더 올라오게 하고 싶다면 top 값을 조정 */
        /* top: 85%; */ /* 기본 80%에서 85%로 변경 */
        /* transform: translate(-50%, -50%) scale(1); // 기본값은 유지 */
        /* 필요시 작은 화면에서의 transition 재정의 (기본 invitation-card transition 덮어씀) */
        /* transition: top 0.8s ease-in-out, left 0.8s ease-in-out, transform 0.8s ease-in-out, opacity 0.4s ease-in-out, filter 0.2s ease-in-out; */
    }


}


/* 다른 미디어 쿼리가 있다면 그 안의 .invitation-card 관련 스타일도 동일하게 확인/수정 */

#home h1,
#home .subtitle,
.invite-button {
  opacity: 0;             /* 기본 숨김 */
  transition: opacity 1s ease-out;  /* JS로 opacity=1 줄 때 부드러운 fade-in */
}

.main-title,
.subtitle {
  opacity: 0;           /* 시작은 숨김 */
  transition: opacity 1s ease-out; /* 1초간 fade-in */
}


.scroll-glow-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px; /* 또는 2px 등 아주 작은 값 유지 */
    background: none; /* 배경 제거 상태 유지 */
    box-shadow: none; /* box-shadow 제거 상태 유지 */

    pointer-events: none; /* 초기에는 클릭 안 되게 */
    z-index: 4999;

    /* >>>>>> 여기 수정 <<<<<< */
    opacity: 0; /* 초기 투명 상태 */
    visibility: hidden; /* 초기 숨김 상태 (공간은 차지) */

    /* 트랜지션 설정 */
    /* 투명도 트랜지션 (예: 1.5초동안 ease로) */
    /* visibility 트랜지션 (즉시 발생, 하지만 숨길 때는 opacity 트랜지션이 끝난 후에) */
    transition: visibility 0s linear 5s; 
    /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 투명도 트랜지션 시간(1.5s)만큼 지연시킨 후 visibility를 hidden으로 바꿈 */


    /* JS에서 display: none/block 제어 코드 삭제된 상태 유지 */
}


/* ::after 가상 요소 규칙은 삭제된 상태 유지 */


.scroll-glow-indicator.glow-active {
    /* >>>>>> 여기 수정 <<<<<< */
    opacity: 1; /* 불투명 상태 (보임) */
    visibility: visible; /* 보임 상태 */

    /* 트랜지션 설정 */
    /* 투명도 트랜지션 (예: 1.5초동안 ease로) */
    /* visibility 트랜지션 (즉시 발생, 나타날 때는 바로 visible) */
    transition: visibility 0s linear 0s; 
    /* ^^^^^^^ 지연 시간 없이 바로 visibility를 visible로 바꿈 */
    box-shadow: 0 80px 150px 50px rgba(255, 215, 0, 0.8); /* box-shadow 유지 */

}

/* @keyframes glowPulse 수정: box-shadow의 속성들을 애니메이션 */
@keyframes glowPulse {
    0%   { box-shadow: 0 60px 100px 30px rgba(255, 215, 0, 0.4); } /* 시작 상태 */
    50%  { box-shadow: 0 80px 150px 50px rgba(255, 215, 0, 0.8); } /* 중간 상태: 아래로 더 퍼지고 강하게 */
    100% { box-shadow: 0 60px 100px 30px rgba(255, 215, 0, 0.4); } /* 끝 상태: 다시 시작 상태로 */
}
.pinex-logo {
    width: 160px;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 1s ease-out;
}

.main-image {
    width: 480px;
    max-width: 90%;
    margin-bottom: 30px;
    opacity: 0;
    transition: opacity 1s ease-out;
}

.pinex-logo {
    width: 400px; /* 원하는 크기로 조정 */
    margin-bottom: 60px;
    transform: translateX(15px);
    filter:
    drop-shadow(-1px -1px 1.5px white)
    drop-shadow(1px -1px 1.5px white)
    drop-shadow(-1px 1px 1.5px white)
    drop-shadow(1px 1px 1.5px white);
}

.main-image {
    width: 500px; /* 필요에 따라 조정 */
    max-width: 100%;
    margin-bottom: 80px;
  filter:
    drop-shadow(-1px -1px 0 white)
    drop-shadow(1px -1px 0 white)
    drop-shadow(-1px 1px 0 white)
    drop-shadow(1px 1px 0 white);
}

@media (max-width: 768px) {
  .main-image {
    width: 90%;
  }

  .subtitle {
    font-size: 1.2em; /* 기존보다 약간 키움 */
  }

  .invite-button {
    font-size: 1.1em;
    padding: 14px 28px;
  }
}