/* ==========================================================================  
   1. 초기화 및 기본 설정  
   ========================================================================== */


   * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: 'Funnel Display';
  color: #fff;
  overflow-x: hidden;
}
body {
  padding-top: 60px; /* 네비게이션 바 높이(height: 60px)와 동일하게 설정 */
}

/* ==========================================================================  
   2. Locomotive Scroll 컨테이너  
   ========================================================================== */
#scroll-wrapper {
  position: relative;
  overflow: hidden;
  scrollbar-width: none;            /* Firefox */
}
#scroll-wrapper::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

/* ==========================================================================  
   3. 페이지별 배경  
   ========================================================================== */

/* 1) 컨테이너 세팅 */
.midas-page {
  position: relative;
  overflow: hidden;
}

/* 2) 배경이미지 패닝/줌 애니메이션 */
.bg-aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 120vw;   /* 살짝 크게 잡아야 패닝 시 빈틈이 안 생깁니다 */
  height: 120vh;
  background: url('https://cdn.pixabay.com/photo/2020/03/24/20/53/aurora-borealis-4965488_1280.jpg') 
  center/cover no-repeat;
  transform: translate(-50%, -50%) scale(1);
  animation: aurora-pan 40s ease-in-out infinite alternate;
  z-index: -1;
}

/* 3) 애니메이션 키프레임 */
@keyframes aurora-pan {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-60%, -40%) scale(1.05); }
  50%  { transform: translate(-60%, -40%) scale(1.1); }
  75%  { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* ==========================================================================  
   4. 네비게이션 바  
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;

  /* 별헤는 밤 같은 짙은 남색 + 60% 투명도 */
  background-color: rgba(144, 156, 171, 0.261);

  /* 뒤 배경이 살짝 흐려보이도록 블러 효과 추가 */
  backdrop-filter: blur(8px);

  /* 기존 레이아웃 스타일 유지 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 2rem;
}
.navbar .logo a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}
.navbar .links {
  display: flex;
  list-style: none;
  gap: 2rem;
}
.navbar .links a {

  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color .3s;
}
.navbar .links a:hover {
  color: rgb(63, 222, 105);
}
.action_btn {
  text-decoration: none;
  background: orange;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.action_btn:hover {
  transform: scale(.95);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* ==========================================================================  
   5. Hero / 메인 영역  
   ========================================================================== */
.hero {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; max-width: 600px; }

/* ==========================================================================  
   6. 로그인/회원가입 폼  
   ========================================================================== */
.form-container {
  max-width: 400px;
  margin: 100px auto;
  background:  #ffcb57;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
}
.form-container input,
.form-container select {
  width: 100%;
  padding: 10px;
  margin: .5rem 0;
  border: none;
  border-radius: 5px;
}
.form-container button {
  background: #ffcb57;
  color: #fff;
  padding: .7rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

/* ==========================================================================  
   7. 지도 오버레이 (location 페이지)  
   ========================================================================== */
/* style.css */

/* 기존에 정의된 Noto Sans KR 폰트 @import는 그대로 유지합니다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
/* 새로운 폰트 import는 그대로 둡니다. */


body {
    /* 기존 body 스타일은 유지하되, location-page에서는 flex 정렬을 메인 콘텐츠에만 적용 */
    font-family: 'Source Sans 3', 'Noto Sans KR', sans-serif; /* 새로운 폰트를 기본으로 설정 */
    margin: 0;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    background-color: #f8f9fa; /* 기본 배경색 */
}

/* location-page 전용 body 스타일 */
body.location-page {
    display: flex; /* 네비게이션과 푸터를 포함한 전체 페이지를 정렬하기 위함 */
    flex-direction: column; /* 세로 정렬 */
    min-height: 100vh; /* 최소 높이 설정 */
    justify-content: space-between; /* 네비, 메인, 푸터를 공간 분배하여 정렬 */
}

.bg-location {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0f2f7 0%, #b2ebf2 100%); /* 산뜻한 그라데이션 배경 */
    z-index: -1; /* 다른 콘텐츠 뒤로 보냄 */
    opacity: 0.8; /* 투명도 조절 */
}
#map-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1rem;
  color: #666;
}
.main-container {
    flex: 1; /* 메인 콘텐츠가 남은 공간을 모두 차지하도록 설정 */
    display: flex;
    flex-direction: column;
    gap: 0; /* 간격 제거 */
    padding: 20px; /* 패딩 추가 */
    box-sizing: border-box; /* 패딩을 포함한 박스 크기 계산 */
}

/* 메인 콘텐츠 컨테이너 정렬 */
.location-main-content {
    flex-grow: 1; /* 남은 공간을 모두 차지하여 푸터가 아래로 가도록 함 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* 상하 패딩 추가 */
}

.card-container {
    perspective: 1000px;
    width: 100%; /* 너비를 100%로 설정하여 유연하게 반응하도록 */
    max-width: 600px; /* 최대 너비 설정 */
    margin: auto; /* 가운데 정렬 */
}

.card {
    width: 100%; /* card-container 내에서 100% 차지 */
    min-height: 550px; /* 지도를 포함할 수 있도록 최소 높이 증가 */
    background-color: #fff; /* 카드 배경을 흰색으로 변경하여 지도와 더 잘 어울리게 */
    border-radius: 20px;
    padding: 30px; /* 패딩 증가 */
    color: #333; /* 텍스트 색상 변경 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 그림자 약하게 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: floatIn 1.5s ease-out forwards;
    opacity: 0;
    transform: rotateY(-20deg) rotateX(10deg) translateZ(50px);
    transition: transform 0.25s cubic-bezier(.21,.99,.29,1), box-shadow 0.25s;
}

.card:hover {
    transform: scale(1.01) rotateY(3deg) rotateX(1deg) translateZ(10px); /* 호버 효과 조절 */
    box-shadow: 0 16px 40px rgba(44, 154, 142, 0.15); /* 호버 시 그림자 변경 */
}


/* 기존 @keyframes floatIn 은 그대로 유지합니다. */
@keyframes floatIn {
    to {
        opacity: 1;
        transform: rotateY(0) rotateX(0) translateZ(0);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header .logo {
    width: 30px;
    height: 30px;
    background-color: #2c9a8e; /* 로고 색상 예시 */
    border-radius: 50%;
}
.card-header .chip {
    background-color: #f0f0f0;
    color: #555;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
}


.card-content h1 {
    font-size: 2rem; /* 제목 크기 조절 */
    margin-bottom: 10px;
    color: #333;
}

.card-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
}

.map-in-card {
    width: 100%;
    height: 300px; /* 카드 안 지도 높이 */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #eee; /* 지도 경계선 */
}

.card-footer {
    text-align: center;
    margin-top: 10px;
}

.btn-direction {
    background-color: #2c9a8e;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* 버튼 너비 100% */
}

.btn-direction:hover {
    background-color: #247d73;
}

/* 푸터 스타일 조정 */
footer {
    background-color: #f0f2f5; /* 푸터 배경색 변경 */
    color: #888; /* 푸터 텍스트 색상 변경 */
    padding: 20px 0; /* 패딩 조정 */
    margin-top: 0; /* 메인 콘텐츠가 공간을 모두 차지했으므로 마진 제거 */
    text-align: center;
}

/* 기존 body의 flex 속성 제거 */
body.location-page:not(.some-other-page-class) { /* 다른 페이지와 충돌 방지 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.location-page .main-container {
    display: block; /* 이전에 .main-container에 적용된 flex를 초기화 */
    gap: 0;
}

/* 기존 .card-image, .card-footer 스타일은 더 이상 사용되지 않으므로 제거하거나 주석 처리합니다. */
/* .card-image {} */
/* .card-image img {} */
/* .card-footer {} */

/* ==========================================================================  
   8. About 페이지 스크롤 애니메이션 섹션  
   ========================================================================== */
/* 공통 섹션 레이아웃 */
.section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Intro 메시지 */
.section--intro {
  height: 70vh;
  text-align: center;
  overflow: hidden;
}
  .section--intro .slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 2) 슬라이드 레이어 */
.section--intro .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slidefade 10s infinite ease-in-out;
}

/* 3) 각 슬라이드별 시작 시점 (2초 간격) */
.section--intro .slide:nth-child(1) { animation-delay: 0s; }
.section--intro .slide:nth-child(2) { animation-delay: 3s; }
.section--intro .slide:nth-child(3) { animation-delay: 6s; }

/* 4) 키프레임: 각 슬라이드가 2초간 보였다가 천천히 사라지도록 */
@keyframes slidefade {
  /* 0%~16.6%: 페이드 인 (≈1초) */
  0%   { opacity: 0; }
  16.6%{ opacity: 1; }
  /* 16.6%~49.9%: 유지 (≈2초) */
  49.9%{ opacity: 1; }
  /* 49.9%~66.6%: 페이드 아웃 (≈1초) */
  66.6%{ opacity: 0; }
  /* 나머지: 투명 유지 */
  100% { opacity: 0; }
}
.about-top-message {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Split 섹션 (이미지 + 텍스트) */
.section--split {
  background: #fff;
  padding: 120px 10%;
}
.split-container {
  display: flex;
  gap: 4rem;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.split-image{
  flex: 0 0 50%;
}
.split-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.split-text { flex: 1; color: #333; }
.split-title {
  font-size: 3rem;
  color: #222;
  margin-bottom: 1rem;
}
.split-desc {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #222;
}
/* 반투명 오버레이 
.section--split::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1;
}*/

/* ==========================================================================  
   9. (옵션) 섹션별 배경 이미지  
   ========================================================================== */
/*
.section--split:nth-of-type(2) {
  background: url('/about1.png') center/cover no-repeat;
}
.section--split:nth-of-type(3) {
  background: url('/about2.png') center/cover no-repeat;
}
.section--split:nth-of-type(4) {
  background: url('/about3.png') center/cover no-repeat;
}
*/

/*  join -------------------------------------- */

.join-page .finisher-header, .login-page .finisher-header{
  background-color: transparent;
}
/* finisher-header 내부 폼 오버라이드 */
/* finisher-header 기본 (화면 전체를 덮고 가운데 정렬) */
.finisher-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;                 /* 뷰포트 높이만큼 */
  display: flex;                 /* Flexbox */
  justify-content: center;       /* 가로 중앙 정렬 */
  align-items: center;           /* 세로 중앙 정렬 */
  background-color: #9138e5;     /* JS 로딩 전 잠깐 보일 배경색 */
}

/* 캔버스는 뒤로 */
.finisher-header canvas {
  position: absolute !important;
  top: -20%;
  left: -20%;
  width: 140% !important;
  height: 140% !important;
  transform-origin: top left !important;
  z-index: 0;
}

/* 폼 컨테이너는 앞쪽에 표시 */
.finisher-header .form-container {
  position: relative;
  z-index: 1;
  max-width: 400px;
  width: 90%;
  background: rgba(255,255,255,0.1);
  padding: 2rem;
  border-radius: 10px;
  color: #fff;
  text-align: center;
}

/* 폼 내부 요소 스타일 */
.finisher-header .form-container input,
.finisher-header .form-container select {
  width: 100%;
  padding: 10px;
  margin: 0.5rem 0;
  border: none;
  border-radius: 5px;
}

.finisher-header .form-container button {
  background:  #ffc547;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

/* 게시판 전용 스타일 */
.board-section {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
}

.board-section .board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.board-section .board-header h1 {
  font-size: 2rem;
  margin: 0;
}

.board-section .board-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.board-section .board-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.board-section .board-list li a {
  flex: 1;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

.board-section .board-list li span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-left: 1rem;
}
.board-empty {
  text-align: center;
  margin-top: 2rem;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
}
.dark-text {
  /* 부트스트랩의 기본 텍스트 색상과 유사한 어두운 색으로 지정 */
  color: #212529;
}