@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;color:#111827;line-height:1.6;background:#fff;}
.container{width:90%;max-width:1200px;margin:0 auto;}

/* 상단 메뉴 */
header{background:#0b1220;color:#fff;padding:14px 0;}
header .container{display:flex;justify-content:space-between;align-items:center;}
header nav a{color:#dbeafe;margin-left:16px;text-decoration:none;}
header nav a:hover{color:#facc15;}
header .brand{font-weight:700;font-size:1.2rem;}

/* Hero */
.hero{position:relative;background:url('images/seoul_night.jpg') center/cover no-repeat;height:45vh;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);}
.hero h1{position:relative;font-size:3rem;margin:0;}
.hero p{position:relative;font-size:1.2rem;margin-top:.6rem;}

/* About Content */
section{padding:60px 0;}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;}
.about-grid img{width:100%;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.15);}
ul{margin-left:1.3rem;}
ul li{margin-bottom:8px;}
.btn{display:inline-block;margin-top:1rem;padding:12px 18px;background:#0ea5e9;color:#fff;border-radius:10px;text-decoration:none;font-weight:600;}
.btn:hover{background:#0284c7;}

/* Footer */
footer{background:#0b1220;color:#cbd5e1;padding:30px 0;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
footer h3,footer h4{color:#fff;}
footer p{margin:.2rem 0;}
.copyright{text-align:center;margin-top:20px;font-size:.9rem;color:#94a3b8;}

/* ===== ABOUT PAGE HERO ===== */
.about-hero{
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  min-height: 55vh;              /* 조금 더 키움 */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;

  background: url('images/yellowtaxi.jpg') center / cover no-repeat;
  background-color:#000;         /* ← 이미지 아래가 비치면 검정으로 채워짐 */
  overflow:hidden;               /* ← 내부 요소가 삐져나와 회색이 보이는 걸 차단 */
}



.about-hero__overlay{
  position:absolute; inset:0;    /* top/right/bottom/left = 0 */
  min-height:inherit;            /* 부모 높이를 최소 상속 */
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}


.about-hero__inner{
  position: relative; z-index: 1;
  padding: 40px 18px;
}

.about-hero__inner h1{
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0 0 .4rem;
}

.about-hero__inner p{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  opacity: .95;
  margin: 0;
}

/* 반응형(모바일 높이 살짝 낮추기) */
@media (max-width: 600px){
  .about-hero{ min-height: 42vh; }
}

.about-hero + section{ margin-top:0!important; }
.about-hero__inner h1{ margin:0 0 .6rem; }  /* 제목 위쪽 마진 제거 */


/* ===== HOME PAGE HERO ===== */
.home-hero{
  position:relative;
  width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  min-height:62vh;
  display:flex; align-items:center;
  color:#fff; text-align:left;
  background:url('images/seoul_castle_night.jpg') center/cover no-repeat;
  background-color:#000;
  overflow:hidden;
}
.home-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.60));
}
.hero-inner{ position:relative; z-index:1; padding:56px 18px; }

.home-hero + section{ margin-top:0; }  /* 회색띠 방지 */
body{ margin:0; }                      /* 기본 여백 제거 */


.hero-inner{ position: relative; z-index: 1; padding: 56px 18px; }
.hero-inner h1{ font-size: clamp(2rem, 6vw, 3.4rem); margin: .3rem 0 .6rem; }
.hero-inner p{ font-size: clamp(1rem, 2.2vw, 1.25rem); opacity:.95; }

.badge{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background: rgba(255,255,255,.14); margin-bottom:10px;
  font-size:.9rem;
}

.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:14px; }
.btn{ padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; }
.btn.y{ background:#facc15; color:#111827; }
.btn.b{ background:#0ea5e9; color:#fff; }
.btn.g{ background:#10b981; color:#fff; }
.btn.d{ background:#1f2937; color:#fff; }

@media (max-width: 640px){ .home-hero{ min-height: 50vh; } }
.home-hero + section{ margin-top:0; }

/* ===== Sub hero (작은 상단띠) ===== */
.sub-hero{ background:#0b1220; color:#fff; padding:40px 0; }
.sub-hero h1{ margin:0 0 .4rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.sub-hero p{ margin:0; opacity:.9; }

/* ===== Cards grid ===== */
.section{ padding: 40px 0; }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 18px; }

.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.card{
  background:#fff;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.10); }

.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.card-body h3{ margin:0; font-size:1.15rem; }
.card-body p{ margin:0; color:#4b5563; line-height:1.45; }

.btn-outline{
  margin-top:8px; align-self:flex-start;
  padding:10px 14px; border-radius:10px;
  border:1.8px solid #d1d5db; color:#111827; text-decoration:none; font-weight:700;
}
.btn-outline:hover{ border-color:#111827; background:#111827; color:#fff; }

/* 상단 네비(간단 샘플) */
.header{ background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:1000;}
.header .container{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
.brand{ font-weight:800; }
.nav a{ margin-left:14px; text-decoration:none; color:#111827; }
.nav a.active{ color:#f59e0b; }


/* ====== AIRPORT SERVICE PAGE HERO ====== */
.airport-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/incheon-airport-inside.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.airport-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.airport-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.airport-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.airport-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}


/* ====== HOSPITAL SERVICE PAGE HERO ====== */
.hospital-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/hospital-1.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.hospital-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.hospital-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.hospital-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.hospital-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}


/* ====== BANK SERVICE PAGE HERO ====== */
.bank-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/bank.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.bank-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.bank-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.bank-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.bank-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}

/* ====== MOVING SERVICE PAGE HERO ====== */
.moving-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/moving.jpeg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.moving-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.moving-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.moving-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.moving-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}

/* ====== TOUR SERVICE PAGE HERO ====== */
.tour-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/tour-3.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.tour-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.tour-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.tour-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.tour-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}

/* ====== EMBASSY SERVICE PAGE HERO ====== */
.embassy-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/embassy-1.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.embassy-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.embassy-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.embassy-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.embassy-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}


/* ====== DEPARTURE SERVICE PAGE HERO ====== */
.departure-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/departure-2.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.departure-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.departure-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.departure-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.departure-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}

/* ====== FINDROOM SERVICE PAGE HERO ====== */
.findroom-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/room-1.webp') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

/* 🔹 오버레이: 배경 위 반투명 효과 */
.findroom-hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 🔹 텍스트 영역 */
.findroom-hero .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}

.findroom-hero .hero-inner h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.findroom-hero .hero-inner p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  opacity: 0.9;
}


 

/* 📱 모바일에서는 위(텍스트) / 아래(이미지)로 세로 정렬 */
@media (max-width: 768px) {
  .about-grid {
    flex-direction: column;
  }

  .about-section {
    padding: 24px 12px;
  }
}

/* ========== About / Airport / 모든 상세페이지 공통 레이아웃 ========== */
.about-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr;  /* 왼쪽 텍스트 넓게, 오른쪽 이미지 */
  gap: 32px;
  align-items: flex-start;
}

.about-text {
  font-size: 1rem;
  line-height: 1.6;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* 모바일에서는 위/아래로 정렬 */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* 본문하단 연락버튼 */
.contact-buttons {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  }

.contact-buttons .btn {
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* 색깔은 기존이랑 맞춰서 */
.contact-buttons .phone { background: #ff9800; }
.contact-buttons .line { background: #11c808; }
.contact-buttons .kakao { background: #ffe812; color: #111; }
.contact-buttons .facebook { background: #321d89; }


/* 상단 메뉴 드롭다운 기본 설정 */
.menu li {
  position: relative;
}

.menu li.has-submenu > a {
  position: relative;
}

/* 숨겨진 서브메뉴 */
.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #000122;          /* 네 상단색이랑 비슷하게 맞춰줘도 됨 */
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  z-index: 2000;
}

.submenu li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.submenu li a:hover {
  background: rgba(255,255,255,0.1);
}

/* PC 화면에서: 마우스를 올리면 열리기 */
.menu li.has-submenu:hover > .submenu {
  display: block;
}


@media (max-width: 900px) {
    /* 모바일에서 서브메뉴 */
    .submenu {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 220px;
        margin: 0;
        padding: 0.5rem 0;
        list-style: none;

        /* ★ 투명도 적용 (배경을 반투명하게) ★ */
        background: rgba(0, 1, 34, 0.85); /* 0.85 = 85% 불투명 */

        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        z-index: 2000;
    }

    .submenu li a {
        padding: 0.35rem 1.5rem;
        font-size: 1.2rem;
    }
}
media (max-width: 900px) {
  /* 모바일에서 서브메뉴 */
  .submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #000122;          /* 네 상단색이랑 비슷하게 맞춰줘도 됨 */
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  z-index: 2000;
}

  .submenu li a {
    padding: 0.35rem 1.5rem;
    font-size: 1.2rem;
  }
}


/* 모바일 상단 메뉴 여백 복원 */
@media (max-width: 900px) {
    header,
    .nav {
        padding-top: 12px;   /* 원하는 만큼 여백 주기 */
    }
}

/* 모바일 메뉴 줄 전체를 클릭 영역으로 */
@media (max-width: 900px) {
  .menu > li > a {
    display: block;
    padding: 0.75rem 1rem;
  }
}


/* ===== Services 서브메뉴 - 모바일 전용 동작 ===== */
@media (max-width: 900px) {

  /* 기본: 숨김 */
  .services-item .services-submenu {
    display: none;
  }

  /* .submenu-open 클래스가 붙었을 때만 보여줌 */
  .services-item.submenu-open .services-submenu {
    display: block;
  }

  /* 펼쳐진 상태 표시(선택사항) */
  .services-item.submenu-open .services-caret {
    transform: rotate(180deg);
  }
}


/* 기본값 — PC에서는 여백 없음 */
body {
    padding-top: 0;
}

/* 모바일 환경에서만 적용되는 상단 여백 */
@media screen and (max-width: 768px) {
    body {
        padding-top: 50px;  /* 필요하면 40~50px로 늘려도 됨 */
    }
}

/* 화면이 768px 이하(대략 모바일)일 때만 적용 */
@media (max-width: 768px) {
  .services-dropdown {
    background-color: rgba(2, 4, 33, 0.5);
  }
}

/* 드롭다운 전체 박스 */
nav ul li ul {
    background-color: rgba(0, 0, 0, 0.85) !important; /* 85% 불투명 = 15% 투명 */
    backdrop-filter: blur(4px); /* 옵션: 부드러운 유리효과 */
    -webkit-backdrop-filter: blur(4px);
}
nav ul li ul li {
    background: transparent !important;
    color: #ffffff;  /* 글씨 흰색 */
}