@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; }

/* ====== TAXI SERVICE PAGE HERO ====== */
.taxi-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background: url('images/female-chauffeur-waits-business-people-260nw-2406647075.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

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

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

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

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


/* ====== 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;  /* 글씨 흰색 */
}

/* ===== MENU button attention (auto) ===== */
/* 'MENU' 글자가 들어간 버튼/링크를 자동으로 잡아줌 */
a:has(> :is(span, strong, em):not(:empty)),
button,
a {
  /* nothing here - just to keep selector list valid in older tools */
}

/* MENU 텍스트가 포함된 버튼/링크에 효과 (최대한 안전하게) */
button:has(> span),
a:has(> span) {
  /* 기본값 유지 */
}

/* 1) "MENU"가 들어간 요소를 최대한 넓게 잡는 방식 */
button[aria-label*="MENU" i],
a[aria-label*="MENU" i],
button:has(*:is(span,strong,em):where(:not(:empty)):is(:not(script))) {
  /* aria-label이 없으면 아래 JS 버전(3번)을 추천 */
}

/* 2) 너처럼 버튼 안에 'MENU' 텍스트가 보이는 경우가 많아서,
      아래 JS(3번)가 제일 확실하지만, CSS만으로도 가능한 범위를 제공 */
.menu-attention {
  position: relative;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  animation: menuPulse 1.8s ease-in-out infinite;
}

/* 반짝이는 하이라이트(쉬머) */
.menu-attention::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 30%, transparent 60%);
  transform: translateX(-120%);
  animation: menuShimmer 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* ===== MENU Button Highlight (Soft Pulse) ===== */
.menu-btn{
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  transform: translateZ(0);
  animation: menuPulse 2.2s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.menu-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 12%,
    rgba(0,0,0,0) 22%,
    rgba(255,255,255,.25) 34%,
    rgba(0,0,0,0) 48%,
    rgba(255,255,255,.22) 62%,
    rgba(0,0,0,0) 100%
  );
  opacity: .55;
  filter: blur(2px);
  animation: menuRing 4.5s linear infinite;
  pointer-events: none;
}

.menu-btn::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-60%;
  width:60%;
  height:260%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,0) 100%
  );
  opacity: .0;
  animation: menuShine 3.8s ease-in-out infinite;
  pointer-events:none;
}

.menu-btn:hover{
  animation-duration: 1.6s;
}

@keyframes menuRing{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

@keyframes menuShine{
  0%,65%{ opacity:0; transform: translateX(0) rotate(18deg); }
  75%{ opacity:.55; }
  88%{ opacity:0; transform: translateX(220%) rotate(18deg); }
  100%{ opacity:0; }
}

/* 접근성: 움직임 싫어하는 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .menu-btn, .menu-btn::before, .menu-btn::after{ animation: none !important; }
}
/* 메뉴가 열리면 반짝임/펄스 멈춤 */
#mainNav.open .menu-btn,
#mainNav.open .menu-btn::before,
#mainNav.open .menu-btn::after{
  animation: none !important;
  opacity: 1;
  filter: none;
}