/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/slick-carousel/slick/slick.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/slick-carousel/slick/slick-theme.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(/_next/static/media/ajax-loader.0b80f665.gif) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/_next/static/media/slick.25572f22.eot);
    src: url(/_next/static/media/slick.25572f22.eot?#iefix) format('embedded-opentype'), url(/_next/static/media/slick.653a4cbb.woff) format('woff'), url(/_next/static/media/slick.6aa1ee46.ttf) format('truetype'), url(/_next/static/media/slick.db61df16.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/skeletonUI/main/Contents/Contents.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Contents_container__o5o3O {
  display: flex !important;
  width: 100% !important;
  height: 175px;
  border-radius: 12px;
  overflow: hidden;
}

.Contents_imageArea__EK3Da {
  width: 140px !important;
  height: 175px;
  flex-shrink: 0;
  display: block !important;
  border-radius: 12px;
}

.Contents_square__DQKxe {
  display: flex !important;
  width: 140px;
  height: 175px;
  background: linear-gradient(101.13deg, #363333 -86.12%, #1e1e1e 79.44%);
  border-radius: 12px;
}

.Contents_infoArea__WSmta {
  flex: 1 1;
  padding: 16px;
  display: flex !important;
  width: 100% !important;
  flex-direction: column;
  justify-content: space-between;
}

.Contents_buttonArea__Hzv5D {
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px;
}

.Contents_reserveButton__4NowY {
  display: flex !important;
  width: 80px !important;
  height: 24px;
  background: #363333;
  border-radius: 4px;
  margin-right: auto !important;
}

.Contents_statsArea__fGo3W {
  display: flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 12px;
  margin-left: auto !important;
}

.Contents_viewCount__zObTB {
  width: 40px !important;
  height: 16px;
  background: #363333;
  border-radius: 4px;
}

.Contents_likeButton__amxV5 {
  width: 24px !important;
  height: 24px;
  background: #363333;
  border-radius: 50%;
}

.Contents_storeInfo__Jb8Z0 {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.Contents_title__SlRz6 {
  width: 90% !important;
  height: 20px;
  background: #363333;
  border-radius: 4px;
}

.Contents_location__AjYBW {
  width: 30% !important;
  height: 16px;
  background: #363333;
  border-radius: 4px;
}

.Contents_date__mflt6 {
  width: 40% !important;
  height: 16px;
  background: #363333;
  border-radius: 4px;
}

.Contents_central__TG5Ge {
  display: flex !important;
  flex: 1 1 !important;
  flex-direction: column;
  gap: 8px;
}
.Contents_central__TG5Ge div {
  border-radius: 4px;
}

.Contents_textLine__jvZSs {
  width: 160px;
  height: 15px;
  background: #1d1d1d;
}
@media (max-width: 768px) {
  .Contents_textLine__jvZSs {
    width: 100px;
  }
}

.Contents_right__cr3tF {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: space-between;
}

.Contents_smallBoxes__YP5XL {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.Contents_smallBoxes__YP5XL div {
  border-radius: 4px;
}

.Contents_smallBoxes__YP5XL div:first-child {
  width: 66px;
  height: 26px;
}

.Contents_smallBoxes__YP5XL div:nth-child(2) {
  width: 114px;
  height: 16px;
}

.Contents_circle__42h0I {
  width: 24px;
  height: 24px;
  background: #1d1d1d;
  border-radius: 50%;
  position: relative;
  right: 5px;
  top: 3px;
}

.Contents_smallBox__1_rz_ {
  background: #1d1d1d;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/skeletonUI/main/MiddelBannerSlide/MiddleBannerSlide.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.MiddleBannerSlide_skeleton__MS6B2 {
  width: 260px;
  height: 325px;
  border-radius: 10px;
  background: linear-gradient(101.13deg, #363333 -86.12%, #1e1e1e 79.44%);
  background-size: 200% 100%;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/skeletonUI/main/TopBannerSlide/TopBannerSlide.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.TopBannerSlide_skeleton__dT3Nu {
  width: 960px;
  height: 480px;
  background: linear-gradient(101.13deg, #363333 -86.12%, #1E1E1E 79.44%);
  border-radius: 10px;
}
@media (max-width: 768px) {
  .TopBannerSlide_skeleton__dT3Nu {
    width: 100%;
    height: 430px;
    border-radius: 0;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/skeletonUI/myply/NavigationSkeleton.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.NavigationSkeleton_navigation-skeleton__LKlAZ {
  width: 450px;
  height: 700px;
  border-radius: 8px;
  background: linear-gradient(40.22deg, #0f0e0e -24.78%, #242424 17.3%, #1d1d1d 58.42%);
}
@media (max-width: 960px) {
  .NavigationSkeleton_navigation-skeleton__LKlAZ {
    width: 100%;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/skeletonUI/skeletonWithImage/SkeletonWithImage.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.SkeletonWithImage_skeleton-with-image-container__rfUNy {
  position: relative;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
}

.SkeletonWithImage_image__Inc0J {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/swiper/swiper.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/swiper/modules/effect-cards.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/swiper/modules/pagination.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          -moz-appearance: none;
       appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/common/bannerV2.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.top-banner-swiper-container .banner-slide {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: scale(0.9);
}

/* 가운데 슬라이드 */
.top-banner-swiper-container .swiper-slide-active.banner-slide {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

@media (max-width: 768px) {
  .top-banner-swiper-container .stack-swiper {
    overflow: visible;
  }

  .top-banner-swiper-container .stack-swiper .swiper-slide {
    transition:
      transform 0.35s ease,
      opacity 0.35s ease;
    transform: rotate(0deg);
  }

  /* 가운데 */
  .top-banner-swiper-container .stack-swiper .swiper-slide-active {
    transform: rotate(0deg);
    z-index: 3;
  }

  /* 왼쪽 */
  .top-banner-swiper-container .stack-swiper .swiper-slide-prev {
    transform: translateY(15px) translateX(-24px) rotate(-5deg);
    z-index: 2;
  }

  /* 오른쪽 */
  .top-banner-swiper-container .stack-swiper .swiper-slide-next {
    transform: translateY(15px) translateX(24px) rotate(5deg);
    z-index: 2;
  }

  .top-banner-swiper-container .banner-slide {
    transform-origin: center center;
  }

  .top-banner-swiper-container .top-popupbanner-list {
    overflow: hidden;
    border-radius: 24px;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/common/MainReviewCard.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.review-contents-wrap {
  background: #121212;
  padding: 8px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  max-width: 360px;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
}

.main-review-card-slider {
  width: 100%;
}
.main-review-card-slider .slick-list {
  overflow: visible;
}
.main-review-card-slider .slick-track {
  display: flex;
  gap: 16px;
}
.main-review-card-slider .slick-slide {
  height: auto;
}
.main-review-card-slider .slick-slide > div {
  height: 100%;
}
.main-review-card-slider__slide {
  width: 540px;
}
.main-review-card-slider .slick-dots {
  position: static;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
}
.main-review-card-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.main-review-card-slider .slick-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #ccc;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.main-review-card-slider .slick-dots button::before {
  display: none;
}
.main-review-card-slider .slick-dots .slick-active button {
  width: 20px;
  background: #fff;
}
@media (max-width: 768px) {
  .main-review-card-slider__slide {
    width: 320px;
  }
  .main-review-card-slider .slick-dots {
    margin-top: 16px;
  }
}

.review-contents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 상단 프로필 */
.review-list-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 0;
}
.review-list-profile .profile-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.review-list-profile .profile-wrap .profile-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-list-profile .profile-wrap .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.review-list-profile .profile-wrap img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.review-list-profile .profile-wrap .name {
  font-size: 14px;
  font-weight: 600;
}

/* 메인 이미지 */
.review-main-image {
  width: 100%;
  height: 328px;
  overflow: hidden;
}
.review-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 스토어 카드 */
.review-store-card {
  display: flex;
  gap: 12px;
  background: #1a1a1a;
  border-radius: 8px;
  padding: 10px;
  align-items: center;
  margin: 0 4px;
  border: 1px solid #2c2c2c;
}
.review-store-card .thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
}
.review-store-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-store-card .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-store-card .info .title {
  font-size: 14px;
  font-weight: 600;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 230px;
}
.review-store-card .info .date,
.review-store-card .info .location {
  font-size: 12px;
  color: #9a9a9a;
}
.review-store-card .info .location {
  display: flex;
  align-items: center;
  gap: 2px;
}
.review-store-card .info .location img {
  width: 12px;
  height: 12px;
}

/* 리뷰 텍스트 */
.review-list-data-comment {
  font-size: 14px;
  line-height: 1.4;
  color: #e5e5e5;
}

.comment-inline {
  display: inline;
}

.more-inline {
  display: inline;
  color: #767676;
  cursor: pointer;
  font-size: 13px;
  margin-left: 4px;
}

/* 하단 영역 */
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-footer .date {
  font-size: 13px;
  color: #888;
}

@media (max-width: 480px) {
  .profile-name {
    font-size: 14px;
  }
  .review-store-card .info .title {
    font-size: 13px;
  }
  .review-store-card .info .date,
  .review-store-card .info .location {
    font-size: 10px;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/common/modal/modal.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 98;
}
.background-layer.hide {
  display: none;
}

.modal-popup {
  display: block;
  width: 480px;
  height: max-content;
  min-height: 334px;
  position: fixed;
  left: 50%;
  bottom: 65px;
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-popup.closing {
  transform: translateY(100px);
  opacity: 0;
}
.modal-popup.bg-white {
  background: #fff;
  color: #121212;
  height: auto;
  border-radius: 12px;
}
.modal-popup.hide {
  display: none;
}
.modal-popup-pagination {
  position: absolute;
  bottom: 65px !important;
  left: 88% !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  width: fit-content;
  padding: 4px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}
.modal-popup .zoom-btn {
  position: absolute;
  z-index: 10;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-popup .main-img {
  width: 100%;
  height: 480px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}
.modal-popup .main-img img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.modal-popup .modal-header {
  max-width: 95%;
  margin: 0 auto 20px;
  padding: 20px 30px;
  text-align: center;
  border-bottom: 1px solid #e9e9e9;
}
.modal-popup .modal-header p {
  font-weight: 700;
  padding: 8px;
  border-radius: 4px;
}
.modal-popup .modal-content {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 16px;
}
.modal-popup .modal-content label {
  width: 100%;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  box-sizing: border-box;
  font-size: 14px;
}
.modal-popup .modal-content input {
  border: 1px solid #000;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  color: #121212;
}
.modal-popup .modal-content input:hover {
  background: #fff;
}
.modal-popup .modal-content .full-btn {
  border: 0;
  background: #f0002e;
  border-radius: 8px;
  margin-top: 15px;
}
.modal-popup .modal-close {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.modal-popup .modal-close p {
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  color: #121212;
  line-height: 20px;
}
.modal-popup .modal-close p.light-btn {
  background: #fff;
}

.zoomed-layer {
  width: 180px;
  height: 80px;
  min-height: auto;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: max(16px, (100vw - 960px) / 2);
  bottom: 80px;
  z-index: 101;
}
.zoomed-layer .modal-popup-pagination {
  display: none;
}
.zoomed-layer .main-img {
  height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 8px;
}
.zoomed-layer .main-img img.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zoomed-layer .zoom-btn {
  position: absolute;
  z-index: 10;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media all and (max-width: 980px) {
  .modal-popup {
    width: 100%;
    height: 50vh;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .modal-popup .main-img {
    height: auto;
  }
  .modal-popup .modal-close p {
    font-size: 14px;
  }
  .zoomed-layer {
    width: 120px;
    height: 48px;
    left: 10%;
    transform: translateX(-10%);
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/common/modal/modalInstagram.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.instagram-modal.modal-popup {
  display: block;
  width: max-content;
  height: calc(max-content + 200px);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #000;
  z-index: 999;
}
.instagram-modal.modal-popup.bg-white {
  background: #fff;
  color: #121212;
  height: auto;
  border-radius: 12px;
}
.instagram-modal.modal-popup.hide {
  display: none;
}
.instagram-modal.modal-popup .modal-close {
  position: relative;
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.instagram-modal.modal-popup .modal-close p {
  padding: 10px;
  font-size: 12px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  background: #212121;
  color: #999;
}
.instagram-modal.modal-popup .modal-close p.light-btn {
  background: #2c2c2c;
  border-right: 1px solid #2c2c2c;
}

@media all and (min-width: 980px) {
  .modal-popup {
    width: 480px;
    height: max-content;
    min-height: 523px;
    background: #fff;
  }
  .modal-popup .modal-close p {
    font-size: 14px;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/popup/PopupBattle.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.popup-battle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.popup-battle-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -1px;
}
.popup-battle-description {
  font-size: 16px;
  line-height: 24px;
  color: #767676;
  white-space: pre;
}
.popup-battle-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.popup-battle-vote {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.popup-battle-vote p {
  text-align: center;
}
.popup-battle-vote-images {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;
}
.popup-battle-vote-image {
  position: relative;
  width: 345px;
  height: 430px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.popup-battle-vote-image:hover {
  border: 1px solid #f0002e;
  transition: ease-in-out 0.2s;
}
.popup-battle-vote-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.popup-battle-vote-image.is-selected {
  border: 2px solid #f0002e;
  box-shadow: 0 0 0 4px rgba(240, 0, 46, 0.18), 0 12px 28px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.popup-battle-vote-image.is-selected::after {
  content: "내가 투표한 팝업";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0002e;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.popup-battle-vote-image.is-not-selected {
  opacity: 0.45;
}
.popup-battle-vote-image:disabled {
  cursor: default;
}
.popup-battle-vote-image-label-container {
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  padding: 16px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}
.popup-battle-vote-image-label-container .label {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}
.popup-battle-vote-image-label-container .date {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.popup-battle-msg {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
.popup-battle-rate {
  width: 74%;
  margin: 0 auto;
  max-width: 960px;
}
.popup-battle-rate-bar {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #212121;
  min-height: 52px;
  justify-content: space-between;
}
.popup-battle-rate-bar.is-multi {
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border-radius: 0;
  min-height: auto;
  overflow: visible;
}
.popup-battle-rate-bar-item {
  height: 52px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: width 0.3s ease;
  min-width: 72px;
  background: #212121;
}
.popup-battle-rate-bar-item.is-left {
  justify-content: flex-start;
  background: #fa0;
}
.popup-battle-rate-bar-item.is-right {
  justify-content: flex-end;
  background: #f6510a;
}
.popup-battle-rate-bar-item.is-left.is-voted {
  background: #fa0;
}
.popup-battle-rate-bar-item.is-right.is-voted {
  background: #f6510a;
}
.popup-battle-rate-bar-item.is-full {
  width: 100% !important;
  justify-content: space-between;
  border-radius: 8px;
}
.popup-battle-rate-bar-item.is-voted {
  opacity: 1;
  background: #f6510a;
}
.popup-battle-rate-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
.popup-battle-rate-bar-count {
  flex-shrink: 0;
}
.popup-battle-rate-bar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.popup-battle-rate-bar.is-guest .popup-battle-rate-bar-item {
  background: #444 !important;
  color: #bbb;
}

@media (max-width: 768px) {
  .popup-battle {
    padding: 0 16px;
  }
  .popup-battle-rate {
    width: 100%;
  }
  .popup-battle-vote-images {
    gap: 8px;
  }
  .popup-battle-vote-image {
    height: 200px;
  }
  .popup-battle-vote-image-label-container {
    padding: 12px 10px;
  }
  .popup-battle-vote-image-label-container .label {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
  }
  .popup-battle-vote-image-label-container .date {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/common/MyCalendar.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.my-calendar-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.my-calendar-wrap__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-calendar-wrap__top .moreview {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}

.my-calendar {
  width: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(0deg, #1a181b 0%, #1a181b 100%), #18181b;
  color: #fff;
}
.my-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.my-calendar__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.2px;
}
.my-calendar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-calendar__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.my-calendar__nav-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.my-calendar__nav-button svg {
  font-size: 20px;
}
.my-calendar__week {
  display: flex;
  justify-content: space-between;
}
.my-calendar__day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  width: 40px;
}
.my-calendar__weekday {
  margin-bottom: 8px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.my-calendar__date-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.my-calendar__date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.my-calendar__date.is-today {
  background: #ff1744;
  color: #fff;
}
.my-calendar__date.is-selected:not(.is-today) {
  color: #ff1744;
}
.my-calendar__dot {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 9999px;
  background: transparent;
}
.my-calendar__dot.is-active {
  background: #ff1744;
}
.my-calendar__day {
  position: relative;
}
.my-calendar__sticker {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-calendar__sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.my-calendar__content {
  width: 100%;
  height: 100%;
  margin-top: 48px;
  border: 1px solid transparent;
  border-radius: 12px;
}
.my-calendar__content-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d1d1d1;
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
}
.my-calendar__content-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.my-calendar__content-item + .my-calendar__content-item {
  margin-top: 20px;
}
.my-calendar__content-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1;
}
.my-calendar__content-item-bar {
  width: 3px;
  min-width: 3px;
  height: 49px;
  border-radius: 9999px;
  margin-top: 2px;
  background: #b388ff;
}
.my-calendar__content-item-bar.bar-reservation {
  background: rgba(144, 166, 245, 0.5);
}
.my-calendar__content-item-bar.bar-my {
  background: rgba(190, 147, 248, 0.5);
}
.my-calendar__content-item-bar.bar-favor-start {
  background: rgba(226, 202, 117, 0.5);
}
.my-calendar__content-item-bar.bar-favor-end {
  background: rgba(118, 200, 141, 0.5);
}
.my-calendar__content-item-bar.bar-favor-category {
  background: rgba(194, 121, 198, 0.5);
}
.my-calendar__content-item-bar.bar-visit {
  background: rgba(230, 114, 114, 0.5);
}
.my-calendar__content-item-info {
  min-width: 0;
  flex: 1 1;
}
.my-calendar__content-item-title h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}
.my-calendar__content-item-date {
  margin-top: 4px;
}
.my-calendar__content-item-date p {
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.my-calendar__content-item-description {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.my-calendar__content-item-description img {
  width: 12px;
  height: 12px;
}
.my-calendar__content-item-description p {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}
.my-calendar__content-item-thumbnail {
  width: 65px;
  min-width: 65px;
  height: 65px;
  overflow: hidden;
  border-radius: 8px;
}
.my-calendar__content-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.my-calendar__content-item-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .my-calendar-wrap {
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  .my-calendar {
    padding: 16px;
  }
  .my-calendar__title {
    font-size: 16px;
  }
  .my-calendar__weekday {
    font-size: 13px;
  }
  .my-calendar__date {
    font-size: 15px;
    width: 28px;
    height: 28px;
  }
  .my-calendar__content {
    margin-top: 40px;
  }
  .my-calendar__content-item-title h3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
  }
  .my-calendar__content-item-date p {
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
  }
  .my-calendar__content-item-description {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
  }
  .my-calendar__content-item-description p {
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
  }
  .my-calendar__content-empty {
    font-size: 16px;
  }
  .my-calendar__content-item-thumbnail {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[7].use[5]!./src/components/common/Map.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Map_myPin__VTo71 {
  width: 42px;
  height: 42px;
  position: relative;
}

.Map_centerPin__DUGXW {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  right: initial !important;
  transform: translate(-50%, -50%);
  z-index: 2 !important;
}

.Map_outsidePin__6tUQA {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  right: initial !important;
  z-index: 1 !important;
  animation: Map_zoomInOut__5ktgI 2s infinite alternate linear;
}

@keyframes Map_zoomInOut__5ktgI {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/popup/PopupRstaurant.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.popup-restaurant {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.popup-restaurant-title {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.24px;
}
.popup-restaurant-description {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #999;
}
.popup-restaurant-item {
  width: 260px;
  height: 100%;
  padding-right: 16px;
}
.popup-restaurant-item .popup-restaurant-thumbnail {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.popup-restaurant-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  background-color: #363636;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  min-height: 110px;
  gap: 4px;
}
.popup-restaurant-content .popup-restaurant-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.popup-restaurant-content .restaurant-info-distance {
  justify-content: space-between;
}
.popup-restaurant-content .restaurant-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.16px;
  margin-top: 2px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-restaurant-content .restaurant-text {
  color: #bababa;
  font-size: 12px;
  font-weight: 500;
}
.popup-restaurant .restaurant-map {
  border: 1px solid #bababa;
  border-radius: 4px;
  padding: 4px;
}

.restaurant-slider {
  width: 100%;
}

.restaurant-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0%;
  right: 0%;
  z-index: 1001;
  width: 100%;
  max-width: 960px;
  background: #121212;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: none;
}
.restaurant-bottom-sheet-buttons {
  padding: 20px;
}
.restaurant-bottom-sheet-buttons p {
  margin-top: 4px;
  color: #a1a1a1;
}

@media (max-width: 768px) {
  .popup-restaurant {
    padding: 0 20px;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/components/common/instagramReview.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.instagram-review-slider {
  width: 100%;
}
.instagram-review-slider .slick-list {
  overflow: visible;
}
.instagram-review-slider .slick-track {
  display: flex;
  gap: 16px;
}
.instagram-review-slider .slick-slide {
  height: auto;
}
.instagram-review-slider .slick-slide > div {
  height: 100%;
}
.instagram-review-slider__slide {
  width: 540px;
}
.instagram-review-slider .slick-dots {
  position: static;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
}
.instagram-review-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.instagram-review-slider .slick-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #ccc;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.instagram-review-slider .slick-dots button::before {
  display: none;
}
.instagram-review-slider .slick-dots .slick-active button {
  width: 20px;
  background: #fff;
}
@media (max-width: 768px) {
  .instagram-review-slider__slide {
    width: 320px;
  }
  .instagram-review-slider .slick-dots {
    margin-top: 16px;
  }
}

.instagram-review-card {
  width: 100%;
  max-width: 328px;
  overflow: hidden;
  background: transparent;
  color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  border: 1px solid #212121;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #212121;
}
.instagram-review-card__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.instagram-review-card__avatar {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 9999px;
  background: #262626;
  flex-shrink: 0;
}
.instagram-review-card__avatar-image {
  object-fit: cover;
}
.instagram-review-card__avatar-fallback {
  width: 100%;
  height: 100%;
  background: #ff1744;
}
.instagram-review-card__username-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.instagram-review-card__username {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.instagram-review-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #38bdf8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.instagram-review-card__media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.instagram-review-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #171717;
}
.instagram-review-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instagram-review-card__media-image {
  object-fit: cover;
}
.instagram-review-card__popup-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: #212121;
  border-radius: 8px;
}
.instagram-review-card__popup-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #404040;
}
.instagram-review-card__popup-thumb-image {
  object-fit: cover;
}
.instagram-review-card__popup-content {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.instagram-review-card__popup-title {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.instagram-review-card__date {
  color: #999;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}
.instagram-review-card__location {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #999;
  font-size: 10px;
  line-height: 14px;
}
.instagram-review-card__location-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.instagram-review-card__location-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.instagram-review-card__body {
  min-height: 60px;
  padding: 8px;
}
.instagram-review-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.instagram-review-card__actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.instagram-review-card__action-button, .instagram-review-card__save-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.instagram-review-card__action-count {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.instagram-review-card__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.instagram-review-card__review-text {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  word-break: keep-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
  .instagram-review-card {
    border-radius: 20px;
  }
  .instagram-review-card__body {
    padding: 14px 14px 18px;
  }
  .instagram-review-card__popup-overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    gap: 10px;
  }
  .instagram-review-card__popup-thumb {
    width: 44px;
    height: 44px;
  }
  .instagram-review-card__popup-title {
    font-size: 16px;
  }
  .instagram-review-card__date, .instagram-review-card__location {
    font-size: 12px;
  }
  .instagram-review-card__actions-left {
    gap: 16px;
  }
  .instagram-review-card__icon {
    width: 24px;
    height: 24px;
  }
  .instagram-review-card__action-count {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .instagram-review-card__review-text {
    font-size: 15px;
    line-height: 1.7;
  }
}