@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

/* 1. 기본 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans KR", sans-serif;
  color: #1a1a1a;
  line-height: 1.2;
}

ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: middle;
  border: 0;
}

/* 2. 공통 레이아웃 (1290px 중앙 정렬) */
.inner {
  max-width: 1290px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 3. 헤더 전체 (1층 + 2층 합쳐서 100px) */
header {
  width: 100%;
  height: 100px; /* 전체 높이 고정 */
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 1층 (로그인/언어 - 높이 30px) */
.header-top {
  width: 100%;
  height: 30px;
}

.header-top .inner {
  justify-content: flex-end;
}

.header-top .top-menu {
  display: flex;
  gap: 20px;
}

.header-top .top-menu a {
  font-size: 10.45px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-top .top-menu a img {
  width: 14px;
  height: 14px;
}

/* 2층 (메인 메뉴 - 나머지 70px) */
.header-bottom {
  width: 100%;
  flex: 1; /* 남은 70px을 가득 채움 */
}

.header-bottom .inner {
  position: relative; /* 전체 메뉴가 펼쳐질 기준점 */
}

.header-bottom .logo img {
  height: 45px; /* 70px 높이에 맞춰 로고 크기 최적화 */
  width: auto;
  object-fit: contain;
}

.header-bottom .menu ul {
  display: flex;
  gap: 110px; /* 피그마 아이템 간격 */
}

.header-bottom .menu ul li a {
  font-size: 22px; /* 24px에서 높이에 맞춰 살짝 조정 */
  font-weight: 600;
  letter-spacing: -0.02em;
}

.header-bottom .icons {
  display: flex;
  gap: 22px;
}

.header-bottom .icons img {
  width: 24px;
  height: 24px;
}

/* 4. 히어로 섹션 (배너) */
.main-visual {
  position: relative;
  width: 100%;
  height: 650px;
  background: url("../assets/images/main_bg.jpg") no-repeat center/cover;
}

.main-visual .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* 가로 정렬을 왼쪽(start)으로 변경 */
  text-align: left; /* 글자 정렬을 왼쪽으로 변경 */
  padding-top: 120px; /* 위쪽 여백 */
}

.main-visual .text-box {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-visual h2 {
  font-size: 48px;
  font-weight: 800;
  color: #1a1a1a; /* 검은색 */
  line-height: 1.2;
  margin-bottom: 10px;
}

.main-visual h2 span,
.main-visual p span {
  color: #ff6b00;
  font-weight: 800;
}

.main-visual p {
  font-size: 22px;
  color: #000; /* 부제목도 어두운 회색으로 변경 */
  font-weight: 500;
}

/* 예매 박스 전체 컨테이너 */
.booking-container {
  position: absolute;
  bottom: -80px; /* 수치를 조절해서 글자와 박스 사이 간격을 벌리세요 */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 360px;
  z-index: 10; /* 박스가 위로 올라오게 설정 */
}

/* 상단 탭 스타일 */
.booking-tabs {
  display: flex;
  height: 60px;
}

.booking-tabs li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.6); /* 비활성 탭 반투명 */
  border-radius: 15px 15px 0 0;
  cursor: pointer;
}

.booking-tabs li.active {
  background: #2b3991;
  color: #fff;
}

/* 흰색 메인 컨텐츠 영역 */
.booking-content {
  width: 100%;
  height: 300px; /* 360px - 탭60px */
  background: #fff;
  border-radius: 0 15px 15px 15px;
  padding: 30px 45px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 왕복/편도 버튼 */
.trip-type {
  display: flex;
  gap: 10px;
}

.trip-type button {
  width: 100px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  color: #999;
  font-weight: 600;
}

.trip-type button.active {
  border-color: #2b3991;
  color: #2b3991;
}

/* 입력 행(Row) 공통 */
.booking-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.input-item {
  flex: 1;
  border-bottom: 2px solid #555;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.input-item .label {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.swap-icon {
  font-size: 24px;
  color: #2b3991;
  font-weight: bold;
}

/* 프로모션 입력창 */
.promo-box {
  flex: 1;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 50px;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.promo-box input {
  border: none;
  width: 100%;
  outline: none;
}

/* 최종 예매 버튼 */
.btn-main-submit {
  flex: 1;
  height: 55px;
  background: #2b3991;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.quick-menu {
  width: 100%;
  /* 포인트: 예매창이 배너 밑으로 80px 내려와 있으므로, 
     카드 섹션 상단 여백을 줄여서 예매창 바로 아래에 붙입니다. */
  padding-top: 100px;
  padding-bottom: 60px;
  background-color: #fff;
}

.inner-wide {
  width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 카드 4개를 1400px 안에 꽉 채움 */
}

.quick-menu .inner {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 카드 사이 간격 */
}

.quick-card {
  /* 요청하신 정확한 수치 */
  width: 340px;
  height: 315px;

  position: relative;
  border-radius: 20px; /* 피그마의 둥근 모서리 */
  overflow: hidden;
  cursor: pointer;
}

.quick-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 마우스 올리면 이미지 살짝 커짐 */
.quick-card:hover img {
  transform: scale(1.1);
}

/* 글씨가 잘 보이게 어두운 필터 입히기 */
.quick-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 글자가 잘 보이도록 어두운 그라데이션 추가 */
  background: rgba(0, 0, 0, 0.4);
}

.quick-card p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  z-index: 2;
  letter-spacing: -0.5px;
}

.recommend {
  width: 100%;
  padding: 80px 0;
}

.recommend > .inner-wide {
  display: block; /* 제목과 카드가 수직으로 쌓이도록 */
  max-width: 1200px; /* 기존 1400px -> 1200px */
  margin: 0 auto;
}

.inner-wide {
  width: 1400px;
  margin: 0 auto;
}

.sec-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px; /* ← 이게 핵심 */
}

.sec-title span {
  color: #ff6b00; /* '인기'만 주황색 */
}

.recommend .trip-list {
  display: flex;
  gap: 30px; /* 카드 사이 간격 유지 */
}

.trip-card {
  width: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  color: #2b3991;
}

.swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #2b3991;
}

.trip-card {
  flex: 1; /* 3개가 동일한 너비를 가짐 */
  min-width: 0; /* 박스 깨짐 방지 */
}

.trip-card .img-box {
  width: 100%;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.trip-card .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지 비율 유지하며 꽉 채움 */
}

.trip-card .img-box p {
  position: absolute;
  top: 25px;
  left: 25px;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.trip-card .img-box p strong {
  display: block;
  font-size: 20px;
  margin-top: 5px;
}

.trip-card .info-box {
  padding: 15px 5px; /* 박스 안쪽 여백 */
}

.trip-card .info-box .route {
  font-size: 14px;
  color: #666; /* 흐린 회색 */
  display: block;
  margin-bottom: 5px;
}

.trip-card .info-box .price {
  font-size: 20px;
  color: #2b3991; /* 진한 파란색 */
  font-weight: 700; /* 굵게 */
  display: block;
}

/* 이벤트 배너 */
.event-banners {
  padding: 40px 0;
}
.event-banners .inner-wide {
  max-width: 1200px; /* 기존 1400px -> 1200px */
  margin: 0 auto;
  display: flex;
  gap: 20px; /* 배너 사이 간격 유지 */
}
.banner-box {
  flex: 1;
  height: 100px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  cursor: pointer;

  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center; /* 세로 중앙 */
}
.banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-box span {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

/* 이용안내 & 공지사항 */
.info-notice {
  padding: 60px 0;
  background: #f9f9f9;
}
.info-notice .inner-wide {
  display: flex;
  gap: 30px;
}
.info-box-white,
.notice-box-white {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #eee;
  height: 250px;
}
.info-notice h3 {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 30px;
}
.info-notice h3 a {
  font-size: 14px;
  color: #999;
}
.info-icons {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.info-icons img {
  width: 50px;
  margin-bottom: 10px;
}

.notice-box-white ul li {
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f1;
  font-size: 15px;
}

/* 푸터 */
footer {
  padding: 60px 0;
  border-top: 1px solid #eee;
  background: #fff;
}
.footer-top {
  display: flex;
  justify-content: flex-start;
  gap: 100px;
  margin-bottom: 40px;
}
.f-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.f-menu strong {
  font-size: 16px;
  margin-bottom: 5px;
}
.f-menu a {
  font-size: 14px;
  color: #666;
}
.f-contact strong {
  font-size: 32px;
  color: #2b3991;
  display: block;
  margin: 5px 0;
}
.f-contact button {
  background: #7a82b8;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 5px;
}
.footer-bottom {
  border-top: 1px solid #eee;
  padding-top: 20px;
  font-size: 13px;
  color: #999;
}

/* 추천 여행지 텍스트 정렬 수정 */
.trip-card .info-box {
  padding: 15px 5px;
}
.trip-card .info-box .route {
  font-size: 14px;
  color: #666;
}
.trip-card .info-box .price {
  display: block;
  font-size: 20px;
  color: #2b3991;
  margin-top: 5px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  width: 100%;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown li {
  padding: 10px;
  cursor: pointer;
}

.dropdown li:hover {
  background-color: #f0f0f0;
}

.dropdown.show {
  display: block;
}

/* 드롭다운 최소 스타일 */
.input-item {
  position: relative; /* 드롭다운 기준 */
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  display: none;
  z-index: 100;
  padding: 5px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
}

.dropdown li {
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown li:hover {
  background: #eee;
}

/* 드롭다운 최소 스타일 */
.dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.dropdown li {
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown li:hover {
  background-color: #eee;
}

/* 추천 여행지 디자인 수정 (기존 코드 유지하며 덮어쓰기) */
.trip-card .info-box {
  padding: 20px !important; /* 여백을 조금 더 시원하게 */
}

.trip-card .info-box .route {
  display: block !important;
  font-size: 14px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}

.trip-card .info-box .price {
  display: block !important;
  font-size: 22px !important;
  color: #2b3991 !important; /* KOBUS 메인 블루 */
  font-weight: 800 !important;
}

/* 드롭다운 메뉴 스타일 (기존에 없던 기능 추가) */
.input-item {
  position: relative !important;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.dropdown.show {
  display: block !important;
}

.dropdown li:hover {
  background-color: #f4f6f9;
  color: #2b3991;
}

/* 목록 초기 상태 숨김 */
.input-item .dropdown {
  display: none;
}
/* 클래스가 추가되면 표시 */
.input-item .dropdown.show {
  display: block !important;
}

/* 1. 상위 메뉴(li)에 기준점 설정 */
.header-bottom .menu > ul > li {
  position: relative; /* 하위 메뉴의 기준점 */
  display: flex; /* 내부 요소를 정렬하기 위함 */
  justify-content: center; /* 글자를 가로 중앙으로 */
  align-items: center; /* 세로 중앙 */
}

/* 2. 하위 메뉴 초기 상태 (숨김 & 디자인) */
.sub-menu {
  display: none; /* 평소 숨김 */
  position: absolute;
  top: 100%; /* 메인 메뉴 바로 아래 */
  left: 50% !important; /* 무조건 부모 li의 절반 지점부터 시작 */
  transform: translateX(
    -50%
  ) !important; /* 자신의 너비 절반만큼 왼쪽으로 당김 */

  width: auto; /* 너비는 내용에 맞게 */
  min-width: 150px; /* 너무 좁지 않게 설정 */
  background: #fff;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border: 1px solid #eee;
  margin-top: 5px; /* 메인 메뉴와 살짝 띄움 */
}

/* 3. 호버 시 노출 */
.header-bottom .menu > ul > li:hover .sub-menu {
  display: block !important; /* 마우스 올리면 나타남 */
}

/* 4. 하위 메뉴 내부 스타일 */
.sub-menu li a {
  display: block;
  padding: 12px 15px;
  font-size: 15px;
  white-space: nowrap; /* 글자 줄바꿈 방지 */
  color: #444;
}

.sub-menu li a:hover {
  background-color: #f4f6f9;
  color: #2b3991;
}

/* 3. 전체가 한꺼번에 뜨게 만드는 마법 */
.header-bottom:hover .sub-menu {
  display: block !important;
}

/* 4. 하위 메뉴 내부 텍스트 정렬 */
.sub-menu li {
  width: 100%;
  text-align: center; /* 글자 중앙 정렬 */
}

/* 1. 메인 메뉴 전체를 정중앙으로 (세 번째 사진처럼) */
.header-bottom .menu > ul {
  display: flex;
  justify-content: center; /* 메뉴 전체를 화면 중앙으로 */
  align-items: center;
  gap: 80px; /* 메뉴 간격 (적절히 조절하세요) */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2. 각 메뉴 항목(li) 설정 */
.header-bottom .menu > ul > li {
  position: relative; /* 하위 메뉴의 기준점 */
  padding: 20px 0; /* 마우스 올리기 편하게 영역 확보 */
}

/* 3. 하위 메뉴 (초기 상태: 숨김 & 정중앙 정렬) */
.sub-menu {
  display: none; /* [핵심] 마우스 안 올리면 절대 안 보임 */
  position: absolute;
  top: 100%; /* 메인 메뉴 바로 아래 */
  left: 50%; /* 부모 li의 50% 지점으로 이동 */
  transform: translateX(-50%); /* 자신의 너비 절반만큼 왼쪽으로 밀어서 정중앙 */

  background-color: #fff;
  min-width: 160px;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border: 1px solid #eee;
}

/* 4. 마우스 올렸을 때만 하위 메뉴 등장 */
/* 헤더 전체에 올렸을 때 다 뜨게 하고 싶으면 아래 주석을 해제하세요 */
/* .header-bottom:hover .sub-menu { display: block; } */

/* 지금은 마우스 올린 해당 메뉴만 뜨게 설정되어 있습니다 */
.header-bottom .menu > ul > li:hover .sub-menu {
  display: block;
}

/* 5. 하위 메뉴 내부 정렬 */
.sub-menu li {
  width: 100%;
  list-style: none;
}

.sub-menu li a {
  display: block;
  padding: 12px 15px;
  text-align: center;
  font-size: 15px;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
}

.sub-menu li a:hover {
  background-color: #f8f9fa;
  color: #2b3991;
}

/* 1. 메인 메뉴 바 자체를 정중앙으로 (오리지널 위치 복구) */
.header-bottom .menu {
  width: 100%;
  display: flex;
  justify-content: center; /* 메뉴 전체를 화면 가운데로 */
  align-items: center;
}

.header-bottom .menu > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 80px; /* 메뉴 사이 간격 - 사진 보시고 적당히 조절하세요 */
}

/* 2. 각 메뉴 글자(li) 설정 */
.header-bottom .menu > ul > li {
  position: relative; /* 하위 메뉴가 이 글자를 기준으로 따라다님 */
  padding: 20px 0;
}

/* 3. 하위 메뉴 (마우스 올리기 전에는 절대 안 뜸) */
.sub-menu {
  display: none !important; /* [강제 숨김] 미리 뜨는 문제 해결 */
  position: absolute;
  top: 100%; /* 메인 메뉴 바로 아래 */
  left: 50% !important; /* 부모 li의 정확히 절반 지점 */
  transform: translateX(
    -50%
  ) !important; /* 자신의 너비만큼 왼쪽으로 밀어서 정중앙 */

  width: auto; /* 내용물 길이에 맞게 */
  min-width: 150px; /* 너무 좁으면 보기 싫으니 최소 너비 설정 */
  background: #fff;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  z-index: 9999; /* 다른 요소에 가려지지 않게 최상단으로 */
}

/* 4. 마우스 올렸을 때만 나타나게 (전체 노출 버전) */
.header-bottom:hover .sub-menu {
  display: block !important;
}

/* 5. 하위 메뉴 내부 정렬 */
.sub-menu li {
  width: 100%;
  text-align: center;
}

.sub-menu li a {
  display: block;
  padding: 12px 15px;
  font-size: 15px;
  color: #333;
  text-decoration: none;
  white-space: nowrap; /* 글자 줄바꿈 방지 */
}