@media (min-width: 1441px){



}

@media all and (max-width: 812px) and (orientation:portrait){

#hover-slide-preview {
    display: none !important;
}

.homepage #masonry-grid {
    display: none;
}

.detailpage main.main {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

.m-sns {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    float: right;
}

    .about .m-sns {
        color: #fff !important;
    }

    main.main {
        display: block;
        position: relative;
        width: calc(100% - 20px);
        padding: 0 10px;
        overflow: hidden;
    }

nav.site-menu {
    font-size: 12px;
    line-height: 1;
    display: block;
    width: calc(100% - 20px);
    position: fixed;
    z-index: 999999;
    padding: 15px 0 15px 0 !important;
}

body.about, body.homepage {
    overflow: hidden;
}

.menu-right {
    display: none;
}

    .footer {
        width: calc(100% - 20px);
        padding: 10px;
        font-size: 12px;
        position: relative;
        bottom: 0;
        height: auto;
        z-index: 99999;
    }

    .homepage .footer {
        width: calc(100% - 20px);
        padding: 10px;
        font-size: 12px;
        position: fixed;
        bottom: 0;
        height: auto;
        z-index: 99999;
    }

    .detailpage .footer {
        display: block;
        position: fixed;
        width: calc(100% - 20px);
        height: auto;
        padding: 10px;
        font-size: 12px;
        line-height: 1;
        color: #e2e2e2;
        bottom: 0;
        z-index: 999;
    }

    #pg-m {
        display: flex;
        position: fixed;
        bottom: unset;
        color: #fff;
        background: #000;
        z-index: 999;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        line-height: 12px;
        padding: 3px 4px 2px 3px;
        top: calc(39px - 4px + 27px);
        min-width: 23px;
        min-height: 17px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

.filter-type, .filter-view {
    line-height: 1;
    font-size: 12px;
}

.type-filters {
    position: fixed;
    left: 10px;
    transform: unset;
    padding: 0;
    z-index: 999999;
    top: 39px;
}

.view-filters {
    position: fixed;
    left: unset;
    transform: unset;
    padding: 0;
    z-index: 999999;
    right: 10px;
    top: 39px;
}

.w-4 {
    width: calc((100% - 0px) / 1);
}

.w-6 {
    width: calc((100% - 10px) / 2);
}

.w-12 {
    width: calc((100% - 20px) / 3);
}

.about-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.1;
}

.about-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    top: 40px;
}

.about .footer {
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 12px;
    line-height: 1;
}

.about-image img {
    max-width: 35vw;
}

.about-image {
    position: fixed;
    bottom: 35px;
    left: 10px;
}


  .mySwiper .swiper-slide {
    height: auto;
    background-image: none !important; /* 배경 비활성 */
        margin: 0 !important;
  }
  .mySwiper .slide-img { display: block; }

#detail-page .slide-img {
    width: 265px;
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    padding: 0 5px;
}

#detail-page {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    /* padding-top: 62px; */
    overflow-x: hidden;
}

.detailpage nav.site-menu {
    font-size: 12px;
    line-height: 1;
    width: calc(100% - 20px);
    position: fixed;
    z-index: 9999;
    padding: 15px 10px !important;
}

.detail-caption {
    text-align: center;
    margin-top: revert-layer;
    font-size: 12px;
    line-height: 12px;
    top: 39px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

/* 상세페이지 전용: 기본 폭/간격 고정 */
#detail-page .main-slider .swiper-slide {
  width: 265px !important;   /* 네가 쓰는 카드 폭 */
  margin: 0 5px;             /* 좌우 5px → 간격 10px */
}
#detail-page .main-slider .swiper-slide .slide-img {
  width: 100%;
  height: auto;
  display: block;
  padding: 0;
}


/* 흰 딤 (#fff 90%) */
#zoom-dim{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  opacity: 0;
  visibility: hidden;
  z-index: 99999;
}
#zoom-dim.show{
  opacity: 1;
  visibility: visible;
}

.caption {
    position: absolute;
    top: 10px !important;
    left: 10px !important;
    padding: 0 !important;
    font-size: 12px !important;
    transition: opacity 0.3s;
    cursor: pointer;
    width: calc(100% - 20px) !important;
}

.swiper-slide .slide-caption {
    position: absolute;
    top: 10px !important;
    left: 10px !important;
    font-size: 14px;
    color: #fff;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
    pointer-events: none;
}

.caption-text {
    color: #fff;
    font-size: 12px;
    line-height: 12px;
}

.homepage .mySwiper {
    display: block;
    position: relative;
    top: 42px;
    width: 100%;
    height: calc(100vh - 42px - 42px);
    overflow: hidden;
    margin-bottom: 42px;

}

    section#detail-page{
        display: none; 
    }

    #detail-page-mobile {
        display: flex;
        position: relative;
        width: 100%;
  min-height: 100svh; /* 주소창 펼쳐진 초기 상태에 맞춤 */
  height: 100dvh;     /* 주소창 접힘/펼침 변화에 동적으로 적응 */
        overflow: hidden;
        align-items: center;
        align-content: center;
        flex-direction: column;
    }

#detail-page-mobile .pagination,
#m-zoom .m-zoom-inner {
  padding-bottom: env(safe-area-inset-bottom);
}

  .detailpage{
    min-height: 100dvh;           /* 주소창 변동 고려: 100svh/100dvh 중 취향 */
    display: flex;
    align-items: center;           /* 세로 중앙 */
    justify-content: center;       /* 가로 중앙(원하면) */
    overflow: hidden;
  }


/*  detailpage slide*/

  #detail-page-mobile,
  #detail-page-mobile .mobile-slider { padding: 0 !important; }
  #detail-page-mobile .mobile-slider .swiper-wrapper { margin: 0; }

  /* 실제 슬라이드: 카드 폭 265px 고정 */
  #detail-page-mobile .mobile-slider .swiper-slide{
    flex: 0 0 auto;
    width: 265px !important;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  #detail-page-mobile .mobile-slider .swiper-slide img{
    width:265px; height:auto; object-fit:contain; display:block;
  }

  /* 스페이서: JS에서 폭(px) 지정 */
  #detail-page-mobile .mobile-slider .swiper-slide.edge-spacer{
    width: 0 !important;
    pointer-events: none; /* 클릭 방지 */
  }


/* 줌 오버레이: 전체 딤은 90% 흰색 */
#m-zoom{
  position: fixed; inset: 0;        z-index: 9999999;
  background: rgba(255,255,255,.9);  /* ← 딤 */
  display: none;
  /* iOS에선 가끔 밴딩/틈 생기니 아래 두 줄로 고정 */
  left: 0; right: 0; top: 0; bottom: 0;
}
#m-zoom.show{ display:block; }

/* 내부 박스는 '완전 흰색 + 10px 패딩' → 가장자리에서 이웃 슬라이드 완전 차단 */
    #m-zoom .m-zoom-inner {
        position: relative;
        inset: 0;
/*        background: #fff;*/
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
    }
/* 이미지는 패딩을 제외한 영역에 맞춤 */
#m-zoom img, #m-zoom picture, #m-zoom video{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 줌 상태일 땐 원본 모바일 슬라이더를 아예 숨겨 '비침' 자체를 차단 */
body.zoom-open #detail-page-mobile .mobile-slider{
  visibility: hidden; /* overlay 밑에서 재렌더/틱 보이는 현상 차단 */
}





}