@font-face {
    font-family: 'BMDOHYEON';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
  
  :target {
    scroll-margin-top: 50px; /* navbar 높이 만큼 */
  }
  
  html{
    font-size: clamp(0.7rem, 2vw, 1rem);
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 4rem);
  }
  
  .menu-item h4 {
    font-size: clamp(1rem, 3vw, 2rem); 
  }
  
  .overlay-box p {
    font-size: clamp(0.8rem, 2vw, 1.5rem);
  }

  body {
    margin: 0;
    padding: 0;
  }

  .btn-primary {
    background-color: #074C17;
    border-color: #074C17;
  }
  
  .btn-primary:hover {
    background-color: #066017;
    border-color: #066017;
  }
  
  .kakao-chat-btn {
    position: fixed;
    bottom: 25px; /* 하단에서 20px */
    right: 25px; /* 우측에서 20px */
    z-index: 1000; /* 다른 요소 위에 배치 */
  }
  
  .kakao-chat-btn img {
    transition: transform 0.2s ease-in-out;
  }
  
  .kakao-chat-btn img:hover {
    transform: scale(1.3); /* 마우스 오버 시 살짝 확대 */
  }
  
  #home {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* navbar 커스텀 */
/* 기본 반투명 상태 */
.navbar-custom {
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

/* 스크롤 시 적용할 불투명 상태 */
.navbar-custom.scrolled {
  background: rgba(0, 0, 0, 1);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #ecf0f1;               /* 원하는 글자색 */
  font-size: 2rem;
}
/* 토글 아이콘(햄버거) 색상 조정 (필요할 때) */
.navbar-custom .navbar-toggler-icon {
  filter: invert(1);            /* SVG 아이콘 색상 반전 */
}
.navbar-custom .nav-link.active,
.navbar-custom .nav-link[aria-current="page"] {
  color: #f1c40f !important;
}

/* 배경 이미지 슬라이드 */
#homeCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 배경 슬라이드의 z-index 낮게 설정 */
}

/* 배경 오버레이 (어두운 필터) */
#homeCarousel .carousel-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 배경보다 위 */
}

/* 배경 이미지 */
#homeCarousel .carousel-item img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* 반투명 박스 (항상 위에 고정) */
.overlay-box {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6); /* 반투명 */
    color: white;
    padding: 30px;
    border-radius: 20px;
    z-index: 10; /* 항상 최상단에 위치 */
    backdrop-filter: blur(5px); /* 블러 효과 */
    width: 90%;
    max-width: 800px;
}

/* 제목 중앙 정렬 */
.overlay-box h2 {
  text-align: center;
  font-family: 'BMDOHYEON';
  font-size: 4rem;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
}

/* p 태그 좌측 정렬 */
.overlay-box p {
  text-align: left;
  align-self: flex-start; /* 부모의 중앙 정렬에서 벗어나 좌측 정렬 */
  font-size: 1.5rem;
  font-weight: 400;
  width: 100%;
}

/* 버튼 우측 정렬 */
.overlay-box a {
  align-self: flex-end; /* 부모의 중앙 정렬에서 벗어나 우측 정렬 */
  float: right;
  font-size: 2rem;
  padding: 10px;
  border-radius: 15px;
  margin-top: 10px; /* 버튼과 텍스트 간 간격 추가 */
}

/* 반응형 대응 */
@media (max-width: 768px) {
    .overlay-box {
        width: 90%;
        padding: 20px;
        font-size: 14px;
    }
}
  
  /* Menu Section */
  #menu {
    background-color: #222831;
    /* padding: 3rem 0; */
    color: white;
  }
  
  #menu h2 {
    font-family: 'BMDOHYEON';
    text-align: center;
    margin: 3rem auto;
    font-size: 4rem;
  }
  
  .menu-img {
    object-fit: cover;
    border-radius: 30%;
  }
  
  .menu-item h4 {
    font-size: 2rem;
    margin-top: 3rem;
  }
  
  
  /* Startup Cost Chart */
  #intro h2 {
    font-family: 'BMDOHYEON';
    text-align: center;
    margin: 3rem auto;
    font-size: 4rem;
  }
  
  
  /* Branch Info */
  .branch-section {
      padding: 60px 0;
      background-color: #222831;
      color: white;
  }
  .branch-section h2 {
      font-family: 'BMDOHYEON';
      text-align: center;
      margin: 3rem auto;
      font-size: 4rem;
  }

  .map-container {
      width: 100%;
      height: 500px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .branch-list {
      height: 500px;
      overflow-y: auto;
      padding: 0;
  }

  .branch-item {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 10px;
      background-color: #222831;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .branch-item:hover, .branch-item.active {
      background-color: #e9ecef;
      color: #222831;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .branch-name {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 5px;
  }

  .branch-address {
      color: #6c757d;
      margin-bottom: 5px;
  }
  /* 스크롤바 스타일링 */
  .branch-list::-webkit-scrollbar {
      width: 8px;
  }

  .branch-list::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
  }

  .branch-list::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
  }

  .branch-list::-webkit-scrollbar-thumb:hover {
      background: #555;
  }

  /* 로딩 인디케이터 */
  .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 18px;
      color: #6c757d;
  }

  .loading-spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #09f;
      animation: spin 1s linear infinite;
      margin-right: 10px;
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  /* Startup Inquiry */
  #startup-inquiry {
    background-color: #ECDFD5;
    color: black;
  }
  
  #startup-inquiry h2 {
    font-family: 'BMDOHYEON';
    font-size: 4rem;
    margin-top: 3rem;
  }
  #startup-inquiry label{
    font-size: 1.5rem;
  }
  
  /* Footer */
  footer {
    background-color: #222831;
    color: white;
    padding-bottom: 0;
  }