/* ───────────────────────────────
   앞잔치 안내 모달 (Compact 모바일 최적화)
   ─────────────────────────────── */

/* 컨테이너 & 백드롭 */
.fe-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2147483600;
  font-family: 'SUIT','Pretendard','Noto Sans KR',sans-serif;
  transition: opacity .35s ease;
  overscroll-behavior: contain; /* 뒤 스크롤 체인 방지 */
}
.fe-modal[aria-hidden="true"]{ display:none; }

.fe-modal__backdrop{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(to bottom, rgba(122,78,160,.45), rgba(122,78,160,.55)), var(--fe-bg);
  background-size:cover; background-position:50% 40%;
  backdrop-filter: blur(6px);
}

/* 패널(중앙 박스) — 더 컴팩트하게 */
.fe-modal__panel{
  position: relative; z-index:1;
  width: min(400px, 90vw);        /* 460→420→400 */
  max-height: 80vh;               /* 88vh→82vh */
  overflow-y: auto;
  background:#fffdfa;
  border-radius: 20px;            /* 22→20 */
  box-shadow: 0 18px 52px rgba(191,162,219,.25);
  padding: 22px 18px 18px;        /* 36/30/26 → 22/18/18 */
  color:#222;
  animation: feModalPop .4s cubic-bezier(.16,1,.3,1);
  font-size: .86rem;              /* 전체 폰트 8% 축소 */
}
@keyframes feModalPop{
  from{opacity:0; transform:translateY(26px) scale(.98)}
  to  {opacity:1; transform:translateY(0)   scale(1)}
}

/* 닫기 버튼 */
.fe-modal__close{
  position:absolute; top:10px; right:12px;
  font-size:24px; color:#777; background:none; border:0; cursor:pointer; transition:color .2s ease;
}
.fe-modal__close:hover{ color:#000; }

/* 제목 */
.fe-modal__title{
  font-size:18px;                 /* 22→20 */
  font-weight:700;
  color:#2d3142;
  text-align:center;
  margin-bottom:12px;             /* 20→14 */
  letter-spacing:-.3px;
}

/* 설명문 */
.fe-modal__desc{
  font-size:12px;                 /* 15→14 */
  color:#444; text-align:center; line-height:1.55;
  margin-bottom:14px;             /* 26→18 */
  max-width: 340px;               /* 380→340 */
}

/* 리스트(아이콘+텍스트) */
.fe-list{
  list-style:none; margin:0 auto 18px; padding:0;
  display:grid; gap:10px;         /* 14→10 */
  max-width:340px;                /* 360→340 */
}
.fe-list li{
  display:flex; align-items:flex-start; gap:8px;  /* 12→10 */
  font-size:13px;                 /* 15→14 */
  color:#333; line-height:1.5;
}
.fe-list .fe-ico{
  width:18px; height:18px;        /* 22→20 */
  color:#bfa2db; flex-shrink:0;
}
.fe-list strong{ font-weight:700; color:#2d3142; }

/* 지도 */
.fe-map{
  width:100%;
  height: 140px;                  /* 260→160 */
  border-radius:12px;             /* 14→12 */
  border:1px solid #eee;
  margin-bottom:12px;             /* 22→16 */
}
/* 카카오맵이 id로 들어오는 경우도 함께 처리 */
#frontEventMap{ height:160px !important; border-radius:12px; }

/* 지도 위 길찾기 버튼 (우하단 고정) */
.fe-map-wrap { position: relative; }  /* 위치 기준점 */

.fe-kakao-dir{
  position: absolute;
  right: 10px;
  bottom: 10px;                /* ↘ 고정 */
  z-index: 20;                 /* 지도 라벨 위로 */
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e6e2e8;
}
.fe-kakao-dir:hover{ background:#f4f4ff; }

/* 작은 화면 보정 */
@media (max-width: 480px){
  .fe-kakao-dir{
    right: 10px;
    bottom: 10px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
}

/* 버튼 그룹 */
.fe-actions{
  display:flex; flex-wrap:wrap; gap:8px;           /* 10→8 */
  justify-content:center; margin-bottom:16px;      /* 20→16 */
}
.fe-btn{
  padding:6px 10px;               /* 10x16 → 8x12 */
  border-radius:10px;
  border:1px solid #dcdcdc;
  font-size:12px;                 /* 14→13 */
  color:#333; background:#fff; cursor:pointer;
  transition:all .22s ease; min-width:80px; text-align:center;
}
.fe-btn:hover{ border-color:#bfa2db; color:#bfa2db; }
.fe-btn--primary{ background:#bfa2db; border-color:#bfa2db; color:#fffdfa; }
.fe-btn--ghost{ background:#fff; border:1px solid #dcdcdc; }

/* 주소 박스 + 복사 버튼 줄이기 */
.fe-address{
  display:flex; gap:6px; align-items:center; justify-content:space-between;
  padding:6px 8px;               /* 10x12 → 8x10 */
  border:1px solid #e6e2e8; border-radius:10px; background:#fff; margin-bottom:14px;
  font-size:12px; color:#2d3142;  /* 14→13 */
}

/* 풋터(오늘 하루 보지 않기 + 닫기) */
.fe-modal__footer{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px;                 /* 13→12 */
  color:#666; margin-top:4px;
}
.fe-dontshow{ display:flex; align-items:center; gap:6px; }
.fe-dontshow input{ width:15px; height:15px; cursor:pointer; }

/* 스크롤바 */
.fe-modal__panel::-webkit-scrollbar{ width:6px; }
.fe-modal__panel::-webkit-scrollbar-thumb{ background:#ccc; border-radius:3px; }
.fe-modal__panel::-webkit-scrollbar-track{ background:transparent; }

/* 복사 완료 토스트 */
.fe-toast{
  position:fixed; left:50%; bottom:18px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30,30,35,.92); color:#fff;
  padding:9px 12px; border-radius:10px; font-size:12px;  /* 13→12 */
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  opacity:0; transition:all .22s ease; z-index:2147483800;
}
.fe-toast.on{ transform:translateX(-50%) translateY(0); opacity:1; }

/* 장소명 + 카카오맵 버튼 한 줄 정렬 */
.fe-venue-row{ display:flex; align-items:center; gap:8px; }

.fe-venue-info{
  display:flex; align-items:center;
  width:100%;
}

.fe-venue-name{ white-space:nowrap; font-weight:600; color:#2d3142; font-size:13px; }

/* 가운데를 채우는 얇은 라인 */
.fe-venue-fill{
  flex:1 1 auto;
  height:0;                       /* 높이를 0으로 두고 border만 */
  border-bottom:1px dashed #E3DFF0; /* 실선: solid #e8e4f2 (원하면 바꿔도 OK) */
  margin:0 8px;                   /* 이름과 버튼 사이 간격 */
  transform: translateY(-1px);    /* 텍스트 baseline과 살짝 맞춤 (옵션) */
}

/* 작은 버튼 */
.fe-btn--sm{ padding:4px 8px; font-size:11.5px; min-width:auto; border-radius:8px; }

/* ───────────────────────────────
   모바일 초과 사이즈(≥481px)에서는 살짝 키움
   ─────────────────────────────── */
@media (min-width: 481px){
  .fe-modal__panel{ width:min(440px, 92vw); max-height: 84vh; }
  .fe-map, #frontEventMap{ height:180px !important; }
}

/* 데스크톱에서 모달 본문을 가운데 정렬 */
@media (min-width: 768px) {
  /* 제목/설명은 중앙 정렬 + 가운데 배치 */
  .fe-modal__title,
  .fe-modal__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* 리스트(아이콘+텍스트) 래퍼를 중앙에 놓고 폭을 키움 */
  .fe-list {
    max-width: 420px;          /* 기존 340~360에서 넉넉하게 */
    margin-left: auto;
    margin-right: auto;
  }

  /* 주소 박스와 버튼/지도 간 간격 */
  .fe-address { margin-bottom: 10px; }

  /* 버튼을 한 줄 꽉 차게 */
  .fe-btn--block { display: block; width: 100%; text-align: center; }

  /* 큰 버튼 크기 */
  .fe-btn--lg { padding: 10px 14px; font-size: 14px; border-radius: 12px; }

  /* 지도는 버튼 아래 여백 후 표시 */
  .fe-map { margin-top: 10px; }

  /* 장소 라인의 채움선은 제거(이름만 보여줌) */
  .fe-venue-fill { display: none; }
}

/* ───────────────────────────────
   ✅ 카카오지도 길찾기 버튼 깨짐 방지 보정
   ─────────────────────────────── */
#btnKakaoMap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 12px;
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #btnKakaoMap {
    font-size: 13px;
    padding: 9px 12px;
    max-width: 100%;
  }
}

/* 카카오지도 길찾기 버튼 : 링크 상태(visited 포함) 색 고정 */
#btnKakaoMap,
#btnKakaoMap:link,
#btnKakaoMap:visited,
#btnKakaoMap:hover,
#btnKakaoMap:active,
#btnKakaoMap:focus {
  color: #fffdfa !important;   /* 항상 흰색 유지 */
  text-decoration: none !important;
}

/* 아이콘도 글자색을 따르게 */
#btnKakaoMap i { color: inherit !important; }

/* (선택) 탭 하이라이트 제거 + 포커스 접근성 */
#btnKakaoMap { -webkit-tap-highlight-color: transparent; }
#btnKakaoMap:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}