/* =========================================
전체 퀵메뉴
========================================= */

.summer-quick {

  position: fixed;

  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  width: 125px;

  z-index: 999999;

  overflow: hidden;

  border-radius: 16px 16px 5px 5px;

  box-shadow:
    0 7px 24px rgba(0,0,0,.17);

  font-family:
    Pretendard,
    "Noto Sans KR",
    "Malgun Gothic",
    Arial,
    sans-serif;

}


/* =========================================
공통 메뉴
========================================= */

.summer-quick-item {

  width: 100%;
  height: 95px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 7px 3px;

  text-align: center;

  text-decoration: none !important;

  transition:
    background .2s ease,
    filter .2s ease;

}


.summer-quick-item:hover {

  filter: brightness(.96);

  text-decoration: none !important;

}


/* =========================================
공통 아이콘
========================================= */

.summer-quick-icon {

  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

}


.summer-quick-icon svg {

  display: block;

  width: 30px;
  height: 30px;

  fill: currentColor;

}


/* =========================================
공통 메뉴 글씨
========================================= */

.summer-quick-label {

  display: block;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.1;

  white-space: nowrap;

  letter-spacing: -0.5px;

  color: inherit;

}


/* =========================================
1. 홈페이지
========================================= */

.summer-home {

  background: #FFFFFF;

  color: #315D70 !important;

  border-bottom: 1px solid #DDE7EC;

}


.summer-home:hover {

  background: #F4F8F9;

}


/* =========================================
2. 카카오톡
========================================= */

.summer-kakao {

  background: #FEE500;

  color: #191919 !important;

  border-bottom: 1px solid #E5CF00;

}


.summer-kakao-icon svg {

  width: 36px;
  height: 36px;

}


.summer-kakao:hover {

  background: #F5DC00;

}


/* =========================================
3. 전화문의
========================================= */

.summer-phone {

  height: 105px;

  background: #49778E;

  color: #FFFFFF !important;

  border-bottom:
    1px solid rgba(255,255,255,.18);

}


.summer-quick-number {

  display: block;

  margin-top: 1px;

  color: #FFFFFF;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  letter-spacing: -0.3px;

}


/* =========================================
4. 네이버예약
========================================= */

.summer-naver {

  background: #03C75A;

  color: #FFFFFF !important;

}


.summer-naver:hover {

  background: #02B653;

}


.summer-naver-icon {

  width: 34px;
  height: 34px;

  box-sizing: border-box;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: #FFFFFF;

  color: #03C75A;

  font-family: Arial, sans-serif;

  font-size: 22px;
  font-weight: 900;

  line-height: 1;

}


/* =========================================
TOP
========================================= */

.summer-quick-top {

  width: 100%;
  height: 42px;

  box-sizing: border-box;

  padding: 0;
  margin: 0;

  border: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  background: #203F53;

  color: #FFFFFF;

  font-family:
    Pretendard,
    "Noto Sans KR",
    "Malgun Gothic",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

}


.summer-quick-top:hover {

  background: #173141;

}


.summer-top-arrow {

  font-size: 8px;

}


/* =========================================
모바일
========================================= */

@media screen and (max-width: 768px) {

  body {

    padding-bottom: 76px !important;

  }


  .summer-quick {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    transform: none;

    width: 100%;
    height: 76px;

    display: flex;

    border-radius: 0;

    overflow: visible;

    box-shadow:
      0 -4px 16px rgba(0,0,0,.12);

  }


  /* 모바일 4개 메뉴 */

  .summer-quick-item {

    flex: 1 1 0;

    width: auto;
    height: 76px;

    min-width: 0;
    min-height: 76px;

    padding: 0 1px;

    gap: 2px;

    border-bottom: 0;

  }


  .summer-phone {

    height: 76px;

  }


  /* =====================================
  모바일 아이콘
  ====================================== */

  .summer-quick-icon {

    width: 27px;
    height: 27px;

  }


  .summer-quick-icon svg {

    width: 24px;
    height: 24px;

  }


  .summer-kakao-icon svg {

    width: 27px;
    height: 27px;

  }


  .summer-naver-icon {

    width: 27px;
    height: 27px;

    border-radius: 5px;

    font-size: 17px;

  }


  /* =====================================
  모바일 글씨
  ====================================== */

  .summer-quick-label {

    font-size: 10px;

    line-height: 1.05;

    letter-spacing: -0.6px;

  }


  /* 전화번호 */

  .summer-quick-number {

    font-size: 8px;

    line-height: 1;

  }


  /* =====================================
  TOP
  ====================================== */

  .summer-quick-top {

    flex: 0 0 46px;

    width: 46px;
    height: 76px;

    flex-direction: column;

    gap: 2px;

    font-size: 8px;

  }

}


/* =========================================
작은 모바일
========================================= */

@media screen and (max-width: 380px) {

  .summer-quick-label {

    font-size: 9px;

  }


  .summer-quick-number {

    font-size: 7.5px;

  }


  .summer-naver-icon {

    width: 25px;
    height: 25px;

    font-size: 16px;

  }


  .summer-quick-top {

    flex-basis: 40px;

    width: 40px;

  }

}