/*
 * for supported in all modern browsers
 * Copyright inpleworks, Co.
 * https://xetemplate.com
 */

/* 공통 변수 및 모바일 퀵메뉴 (하단에 밀착되어 가로로 꽉 차는 2단 버튼) */
.xet-layout-quickbutton {
  z-index: 88;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 !important; /* 모바일에서 테두리 여백을 완전히 제거 */
  transform: translateY(100%);
  transition: var(--transition-all);
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
  background: none !important;
  
  /* 중요: 조상 엘리먼트 가림 버그 해결을 위해 가로/세로 제한 및 숨김 강제 해제 */
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}
.xet-layout-quickbutton.is-scroll {
  transform: translateY(0);
}
.xet-layout-quickbutton > ul {
  display: flex;
  gap: 0 !important; /* 모바일 버튼 사이의 간격을 없앰 */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow: visible !important; /* 말풍선이 잘리지 않도록 허용 */
}
.xet-layout-quickbutton > ul > li {
  flex: 1;
  position: relative !important; /* 말풍선의 기준점이 되도록 설정 */
}

/* 모바일에서는 Top 버튼(3번)을 완전히 숨겨서 가득 찬 2단 버튼 구조로 통일 */
@media (max-width: 1023px) {
  .xet-layout-quickbutton > ul > li.quick-btn-top {
    display: none !important;
  }
}

.xet-layout-quickbutton > ul > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column !important; /* 모바일에서 아이콘 아래에 글자가 오도록 세로 배치 적용 */
  gap: 4px !important;
  height: 60px !important; /* 터치가 편리하도록 적절한 높이 설정 */
  min-height: 60px !important;
  padding: 0 !important;
  overflow: visible !important; /* 중요: 말풍선이 버튼 밖으로 튀어나와도 잘리지 않고 노출되도록 보정 */
  border-radius: 0 !important; /* 모서리 둥글기를 없애고 꽉 차게 밀착 */
  text-decoration: none;
}

/* 모바일 개별 테마 색상 (사용자 전달 디자인: 청록색 + 검정색 2단) */
.xet-layout-quickbutton > ul > li.quick-btn-reservation a {
  background-color: var(--theme-color, #004750) !important; /* 방문예약: 기본설정의 포인트 컬러 자동 상속 연동 */
  color: #ffffff !important;
}
.xet-layout-quickbutton > ul > li.quick-btn-tel a {
  background-color: #1f2224 !important; /* 공식 대표번호: 빨간색 대신 고급스러운 다크 차콜/검정색 적용 */
  color: #ffffff !important;
}

.xet-layout-quickbutton > ul > li a > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.xet-layout-quickbutton > ul > li a > span .svg-icon {
  width: 22px;
  height: 22px;
  color: #ffffff;
}
.xet-layout-quickbutton > ul > li a > strong {
  margin: 0 !important;
  font-size: 11px !important; /* 세로 배치에 어울리도록 폰트 크기 최적화 */
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  text-align: center; /* 텍스트 정중앙 정렬 */
  white-space: nowrap;
}

body.color_scheme_dark .xet-layout-quickbutton {
  background-color: #12181a;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.25);
}

/* PC 화면 디자인 (우측 세로형 캡슐 박스 형태) */
@media (min-width: 1024px) {
  .xet-layout-quickbutton {
    top: 50%;
    left: auto;
    bottom: auto;
    right: 20px;
    padding: 0 !important;
    transform: translateY(-50%);
    background: none !important;
    box-shadow: none !important;
    
    /* PC 가로폭/높이 강제 해제 및 노출 허용 */
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
  }
  .xet-layout-quickbutton.sub {
    right: 36px;
  }
  .xet-layout-quickbutton.is-scroll {
    transform: translateY(-50%);
    right: 20px;
  }
  
  /* 캡슐 스타일 */
  .xet-layout-quickbutton > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(3, 51, 59, 0.96) !important; /* 기본 다크 청록색 캡슐 배경 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    padding: 22px 10px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    gap: 16px !important;
    width: 96px;
    min-width: 96px;
    max-width: 120px;
    overflow: visible !important; /* PC에서도 말풍선이 캡슐 밖으로 잘 노출되도록 보정 */
  }
  
  .xet-layout-quickbutton > ul > li {
    display: block !important;
    width: 100%;
    flex: none;
    position: relative !important;
  }
  .xet-layout-quickbutton > ul > li + li {
    margin-top: 0;
  }
  
  /* PC에서는 전체 a태그 사각형 배경을 완전히 투명화 */
  .xet-layout-quickbutton > ul > li a {
    position: relative;
    display: flex;
    flex-direction: column !important; /* PC는 세로 배치 */
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
  }
  .xet-layout-quickbutton > ul > li.quick-btn-reservation a,
  .xet-layout-quickbutton > ul > li.quick-btn-tel a,
  .xet-layout-quickbutton > ul > li.quick-btn-top a {
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* 아이콘을 감싸는 원형 span 영역 (PC 캡슐 스타일) */
  .xet-layout-quickbutton > ul > li a > span {
    flex-shrink: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.08) !important; /* 오렌지색 배경 대신 은은하고 세련된 투명 원으로 통일 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* PC Top 버튼 노출 */
  .xet-layout-quickbutton > ul > li.quick-btn-top {
    display: block !important;
  }

  .xet-layout-quickbutton > ul > li a > span .svg-icon {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    transition: all 0.25s ease;
  }
  
  /* 텍스트 영역: 캡슐 밖으로 넘치지 않게 정돈 */
  .xet-layout-quickbutton > ul > li a > strong {
    position: static;
    margin-top: 6px !important;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.35;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    text-align: center;
    word-break: keep-all;
    white-space: normal;
  }
  
  /* 호버 시 PC 원형 아이콘 효과 */
  .xet-layout-quickbutton > ul > li:hover > a > span {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    transform: scale(1.1);
  }
  .xet-layout-quickbutton > ul > li:hover > a > span .svg-icon {
    color: #03333b !important;
  }
  .xet-layout-quickbutton > ul > li:hover > a > strong {
    color: #ffffff !important;
  }
}

@media (min-width: 1200px) {
  .xet-layout-quickbutton {
    right: 24px;
  }
  .xet-layout-quickbutton.sub {
    right: 40px;
  }
  .xet-layout-quickbutton.is-scroll {
    right: 24px;
  }
}
@media (min-width: 1440px) {
  .xet-layout-quickbutton {
    right: 30px;
  }
  .xet-layout-quickbutton.sub {
    right: 46px;
  }
  .xet-layout-quickbutton.is-scroll {
    right: 30px;
  }
}

/* 예약 완료자 수 말풍선 스타일 */
.reservation-bubble {
  position: absolute;
  background: #ffffff;
  color: #333333;
  padding: 8px 14px 8px 12px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  z-index: 100;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.reservation-bubble .count-num {
  color: #ff3b30;
  font-weight: 800;
  margin: 0 3px;
  font-size: 12px;
}
.reservation-bubble .bubble-close-btn {
  background: none;
  border: none;
  font-size: 15px;
  color: #bbbbbb;
  cursor: pointer;
  margin-left: 6px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.2s;
}
.reservation-bubble .bubble-close-btn:hover {
  color: #333333;
}

/* 말풍선 공중 부양 애니메이션 (모바일은 transform 대신 bottom 활용해 충돌 방지) */
@keyframes floatBubble {
  0% { bottom: 100%; }
  50% { bottom: calc(100% + 5px); }
  100% { bottom: 100%; }
}

@keyframes floatBubblePC {
  0% { transform: translate(0px, -50%); }
  50% { transform: translate(-4px, -50%); }
  100% { transform: translate(0px, -50%); }
}

/* 모바일용 말풍선 위치 (가로 좁은 화면에서의 쏠림/잘림 해결) */
@media (max-width: 1023px) {
  .quick-btn-reservation .reservation-bubble {
    bottom: 100%;
    left: 10px !important; /* 정중앙 대신 모바일 왼쪽 여백에 10px로 안착 */
    transform: none !important;
    margin-bottom: 14px;
    animation: floatBubble 2.5s infinite ease-in-out;
  }
  .quick-btn-reservation .reservation-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 65px !important; /* 정중앙이 아닌 왼쪽 방문예약 버튼 아이콘 위치를 정밀하게 가리킴 */
    transform: translateX(-50%) !important;
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
  }
}

/* PC용 말풍선 위치 (세로 메뉴 왼쪽) */
@media (min-width: 1024px) {
  .quick-btn-reservation .reservation-bubble {
    right: 100%;
    top: 50%;
    margin-right: 16px;
    animation: floatBubblePC 2.5s infinite ease-in-out;
  }
  .quick-btn-reservation .reservation-bubble::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
  }
}

/* 사람 아이콘 작아졌다 커졌다 하는 애니메이션 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.quick-btn-reservation .icon-pulse {
  animation: pulse 1.6s infinite ease-in-out;
}