/* =========================================================
   GILDONG MEMORY GALLERY + REELS V2
========================================================= */


/* =========================================================
   MAIN GALLERY
========================================================= */

[data-farm-grid].memory-gallery-grid{
  width:
    min(1080px, 100%) !important;

  display:grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap:10px !important;

  margin:
    0 auto !important;

  align-items:start !important;
}


.memory-gallery-tile{
  position:relative;

  width:100%;

  display:block;

  margin:0;
  padding:0;

  overflow:hidden;

  border:0;
  border-radius:10px;

  background:#eceeea;

  cursor:pointer;

  box-shadow:
    0 4px 14px rgba(30,43,34,.06);
}


.memory-gallery-thumb{
  position:relative;

  width:100%;

  aspect-ratio:
    4 / 5;

  overflow:hidden;

  background:#111;
}


.memory-gallery-thumb > img,
.memory-gallery-thumb > video{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  object-position:center;
}


.memory-gallery-tile:hover
.memory-gallery-thumb > img,
.memory-gallery-tile:hover
.memory-gallery-thumb > video{
  transform:
    scale(1.025);
}


.memory-gallery-thumb > img,
.memory-gallery-thumb > video{
  transition:
    transform 180ms ease;
}


.memory-gallery-type{
  position:absolute;

  top:7px;
  right:7px;

  z-index:3;

  min-width:27px;
  height:22px;

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

  box-sizing:border-box;

  padding:0 6px;

  border-radius:6px;

  background:
    rgba(0,0,0,.54);

  color:#fff;

  font:
    800 8px/1 Arial,
    sans-serif;

  backdrop-filter:
    blur(5px);
}


.memory-gallery-video{
  width:26px;
  padding:3px;
}


.memory-gallery-video
.memory-v2-icon{
  width:14px;
  height:14px;
}


.memory-gallery-stats{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:2;

  height:44px;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  gap:16px;

  box-sizing:border-box;

  padding:
    0 8px 8px;

  color:#fff;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.48)
    );

  opacity:0;

  transition:
    opacity 150ms ease;
}


.memory-gallery-tile:hover
.memory-gallery-stats{
  opacity:1;
}


.memory-gallery-stats span{
  display:inline-flex;
  align-items:center;

  gap:4px;

  font:
    800 9px/1 Arial,
    sans-serif;
}


.memory-gallery-stats
.memory-v2-icon{
  width:15px;
  height:15px;
}


.memory-gallery-stats
.memory-v2-icon svg{
  stroke:#fff;
}


.memory-gallery-empty{
  grid-column:
    1 / -1;

  min-height:300px;

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

  border:
    1px dashed rgba(59,83,66,.18);

  border-radius:14px;

  color:#9aa19c;

  font:
    500 11px/1.6
    Arial,
    "Noto Sans KR",
    sans-serif;
}


/* =========================================================
   COMMON ICON
========================================================= */

.memory-v2-icon{
  width:24px;
  height:24px;

  display:block;
}


.memory-v2-icon svg{
  width:100%;
  height:100%;

  display:block;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   REELS VIEWER
========================================================= */

.memory-reels-overlay[hidden]{
  display:none !important;
}


.memory-reels-overlay{
  position:fixed;
  inset:0;

  z-index:200000;

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

  background:
    rgba(11,14,12,.88);

  backdrop-filter:
    blur(9px);
}


.memory-reels-shell{
  position:relative;

  width:
    min(920px, calc(100vw - 50px));

  height:
    min(760px, calc(100vh - 36px));

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

  gap:18px;
}


.memory-reels-stage{
  position:relative;

  height:100%;

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

  gap:15px;
}


.memory-reels-media-frame{
  position:relative;

  width:350px;

  max-width:
    calc(100vw - 180px);

  aspect-ratio:
    9 / 16;

  max-height:
    calc(100vh - 52px);

  overflow:hidden;

  border-radius:18px;

  background:#090a09;

  box-shadow:
    0 26px 70px rgba(0,0,0,.35);
}


.memory-reels-media-host{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;
}


.memory-reels-media-host img,
.memory-reels-media-host video{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;

  background:#090a09;
}


.memory-reels-info{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:4;

  box-sizing:border-box;

  padding:
    62px 14px 14px;

  color:#fff;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.76)
    );

  pointer-events:none;
}


.memory-reels-author{
  display:flex;
  align-items:center;

  gap:8px;
}


.memory-reels-author > img,
.memory-reels-avatar-fallback{
  width:31px;
  height:31px;

  flex:
    0 0 31px;

  border-radius:50%;
}


.memory-reels-author > img{
  display:block;

  object-fit:cover;
}


.memory-reels-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#50735a;

  color:#fff;

  font:
    900 10px Arial;
}


.memory-reels-author > div{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}


.memory-reels-author strong{
  overflow:hidden;

  font:
    800 11px/1.25
    Arial,
    "Noto Sans KR",
    sans-serif;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.memory-reels-author small{
  color:
    rgba(255,255,255,.70);

  font:
    500 8px/1
    Arial,
    sans-serif;
}


.memory-reels-caption{
  margin:
    9px 0 0;

  color:
    rgba(255,255,255,.92);

  font:
    500 10px/1.55
    Arial,
    "Noto Sans KR",
    sans-serif;

  word-break:break-word;
}


/* =========================================================
   ACTION RAIL
========================================================= */

.memory-reels-actions{
  width:58px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:16px;

  align-self:flex-end;

  padding-bottom:18px;
}


.memory-reels-action{
  width:48px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:4px;

  margin:0;
  padding:0;

  border:0;

  background:transparent;

  color:#fff;

  font:
    800 9px/1
    Arial,
    sans-serif;
}


button.memory-reels-action{
  cursor:pointer;
}


.memory-reels-action
.memory-v2-icon{
  width:29px;
  height:29px;
}


.memory-reels-like[
  aria-pressed="true"
]{
  color:#ff5b69;
}


.memory-reels-like[
  aria-pressed="true"
]
.memory-v2-icon svg{
  fill:currentColor;
}


.memory-reels-view{
  opacity:.82;
}


.memory-reels-delete{
  margin-top:5px;

  padding:6px 8px;

  border:
    1px solid rgba(255,255,255,.20);

  border-radius:7px;

  background:
    rgba(0,0,0,.18);

  color:
    rgba(255,255,255,.70);

  font:
    700 8px
    Arial,
    "Noto Sans KR",
    sans-serif;

  cursor:pointer;
}


/* =========================================================
   VIEWER NAV
========================================================= */

.memory-reels-close{
  position:absolute;

  top:4px;
  right:5px;

  z-index:10;

  width:42px;
  height:42px;

  border:0;

  background:transparent;

  color:#fff;

  font:
    300 36px/1
    Arial;

  cursor:pointer;
}


.memory-reels-nav{
  position:absolute;

  right:2px;

  z-index:9;

  width:40px;
  height:40px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:50%;

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font:
    400 19px/1
    Arial;

  cursor:pointer;

  backdrop-filter:
    blur(7px);
}


.memory-reels-nav:disabled{
  opacity:.18;

  cursor:default;
}


.memory-reels-prev{
  top:
    calc(50% - 52px);
}


.memory-reels-next{
  top:
    calc(50% + 8px);
}


/* =========================================================
   COMMENTS DRAWER
========================================================= */

.memory-reels-comments[hidden]{
  display:none !important;
}


.memory-reels-comments{
  width:330px;
  height:
    min(650px, calc(100vh - 70px));

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:18px;

  background:#fffdf9;

  box-shadow:
    0 24px 70px rgba(0,0,0,.28);
}


.memory-reels-comments-head{
  height:54px;

  flex:
    0 0 54px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  box-sizing:border-box;

  padding:0 15px;

  border-bottom:
    1px solid rgba(48,67,54,.10);
}


.memory-reels-comments-head strong{
  color:#304539;

  font:
    900 12px/1
    Arial,
    "Noto Sans KR",
    sans-serif;
}


.memory-reels-comments-close{
  width:30px;
  height:30px;

  border:0;

  background:transparent;

  color:#66746b;

  font:
    300 26px/1
    Arial;

  cursor:pointer;
}


.memory-reels-comments-list{
  min-height:0;

  flex:
    1 1 auto;

  overflow-y:auto;

  padding:7px 15px;
}


.memory-reels-comment{
  padding:11px 0;

  border-bottom:
    1px solid rgba(48,67,54,.07);
}


.memory-reels-comment-head{
  display:flex;
  align-items:center;

  gap:7px;

  margin-bottom:5px;
}


.memory-reels-comment-head strong{
  color:#33483b;

  font:
    800 9px/1.25
    Arial,
    "Noto Sans KR",
    sans-serif;
}


.memory-reels-comment-head small{
  color:#aaa;

  font:
    500 7px Arial;
}


.memory-reels-comment-head button{
  margin-left:auto;

  padding:2px 3px;

  border:0;

  background:transparent;

  color:#a09791;

  font:
    700 7px
    Arial,
    "Noto Sans KR",
    sans-serif;

  cursor:pointer;
}


.memory-reels-comment p{
  margin:0;

  color:#536058;

  font:
    500 10px/1.5
    Arial,
    "Noto Sans KR",
    sans-serif;

  word-break:break-word;
}


.memory-reels-comments-empty{
  min-height:220px;

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

  color:#a0a7a2;

  font:
    500 9px
    Arial,
    "Noto Sans KR",
    sans-serif;
}


.memory-reels-comments-form{
  height:58px;

  flex:
    0 0 58px;

  display:flex;
  align-items:center;

  gap:7px;

  box-sizing:border-box;

  padding:9px 11px;

  border-top:
    1px solid rgba(48,67,54,.10);
}


.memory-reels-comments-form input{
  min-width:0;
  height:37px;

  flex:1 1 auto;

  box-sizing:border-box;

  padding:0 11px;

  border:
    1px solid #dde2dd;

  border-radius:20px;

  outline:none;

  background:#fafbf9;

  color:#34483b;

  font:
    500 10px
    Arial,
    "Noto Sans KR",
    sans-serif;
}


.memory-reels-comments-form button{
  border:0;

  background:transparent;

  color:#466951;

  font:
    900 9px
    Arial,
    "Noto Sans KR",
    sans-serif;

  cursor:pointer;
}


body.memory-reels-open{
  overflow:hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media(
  min-width:701px
)
and
(
  max-width:1100px
){

  [data-farm-grid].memory-gallery-grid{
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap:8px !important;
  }


  .memory-reels-media-frame{
    width:310px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  [data-farm-grid].memory-gallery-grid{
    width:100% !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:3px !important;
  }


  .memory-gallery-tile{
    border-radius:3px;
  }


  .memory-gallery-stats{
    display:none;
  }


  .memory-gallery-type{
    top:5px;
    right:5px;

    height:19px;

    min-width:23px;

    padding:0 5px;

    font-size:7px;
  }


  .memory-reels-overlay{
    background:#000;

    backdrop-filter:none;
  }


  .memory-reels-shell{
    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    gap:0;
  }


  .memory-reels-stage{
    width:100%;
    height:100%;

    gap:0;
  }


  .memory-reels-media-frame{
    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    aspect-ratio:auto;

    border-radius:0;
  }


  .memory-reels-media-host img,
  .memory-reels-media-host video{
    object-fit:contain;
  }


  .memory-reels-info{
    padding:
      80px 66px 24px 14px;
  }


  .memory-reels-actions{
    position:absolute;

    right:8px;
    bottom:23px;

    z-index:8;

    width:48px;

    gap:14px;

    padding:0;
  }


  .memory-reels-action{
    width:44px;
  }


  .memory-reels-action
  .memory-v2-icon{
    width:28px;
    height:28px;
  }


  .memory-reels-nav{
    display:none;
  }


  .memory-reels-close{
    top:8px;
    right:8px;
  }


  .memory-reels-comments{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:20;

    width:100%;
    height:65vh;

    border-radius:
      20px 20px 0 0;
  }

}


/* /GILDONG MEMORY GALLERY + REELS V2 */


/* =========================================================
   MEMORY FREEZE STABILITY FIX V2
========================================================= */


/*
 * GIF Canvas thumbnail
 */

.memory-gallery-gif-poster{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  background:#111;
}


/*
 * 추억관은 GIF/영상 렌더링이 있으므로
 * 전체 화면 실시간 blur 합성을 사용하지 않는다.
 */

.memory-reels-overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  background:
    rgba(11,14,12,.94) !important;
}


.memory-gallery-type,
.memory-reels-nav{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/*
 * 썸네일 전체를 별도 GPU layer로 계속 유지할 이유 없음.
 */

.memory-gallery-thumb > img,
.memory-gallery-thumb > video,
.memory-gallery-gif-poster{
  will-change:auto !important;
}


/* /MEMORY FREEZE STABILITY FIX V2 */


/* =========================================================
   GIF LIVE GRID + VIEWER CLICK SAFETY V3
========================================================= */


/*
 * Canvas poster 위에 실제 GIF가 올라간다.
 */

.memory-gallery-gif-live{
  position:absolute;

  inset:0;

  z-index:1;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  pointer-events:none;

  user-select:none;

  -webkit-user-select:none;
  -webkit-user-drag:none;
}


.memory-gallery-gif-live[hidden]{
  display:none !important;
}


/*
 * GIF 라벨 / 통계는 animated layer보다 위.
 */

.memory-gallery-type{
  z-index:4;
}


.memory-gallery-stats{
  z-index:3;
}


/*
 * 큰 릴스의 사진/GIF 자체는
 * 별도 클릭 기능이 없으므로 hit-test 대상에서 제외.
 *
 * 하트 / 댓글 / 삭제 / 이동 버튼은 정상 작동한다.
 */

.memory-reels-media-host img{
  pointer-events:none !important;

  user-select:none !important;

  -webkit-user-select:none !important;

  -webkit-user-drag:none !important;

  cursor:default !important;
}


.memory-reels-media-frame{
  user-select:none;

  -webkit-user-select:none;
}


/* /GIF LIVE GRID + VIEWER CLICK SAFETY V3 */


/* =========================================================
   LIVE GIF VISIBILITY FIX V4
========================================================= */

/*
 * IntersectionObserver가 위치를 추적할 수 있도록
 * display:none / hidden을 사용하지 않는다.
 */

.memory-gallery-gif-live{
  display:block !important;

  opacity:0;

  visibility:visible;

  transition:
    opacity 80ms linear;
}


.memory-gallery-gif-live.is-live{
  opacity:1;
}


/*
 * 이전 패치의 hidden 규칙 무력화.
 */

.memory-gallery-gif-live[hidden]{
  display:block !important;

  opacity:0 !important;
}


/* /LIVE GIF VISIBILITY FIX V4 */


/* =========================================================
   REELS SMOOTH TRANSITION V1
========================================================= */

/*
 * 릴스에서 실제 움직이는 것은
 * 현재 media frame 1개뿐.
 * 전체 페이지를 GPU layer로 만들지 않는다.
 */

.memory-reels-media-frame{
  transform:
    translate3d(0,0,0);

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


.memory-reels-actions{
  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


/*
 * 모바일에서 위/아래 swipe가 브라우저 자체 스크롤로
 * 끊기지 않도록 viewer 내부 세로 제스처만 JS에서 처리.
 */

.memory-reels-overlay{
  overscroll-behavior:
    contain;
}


.memory-reels-stage{
  overscroll-behavior:
    contain;
}


/* /REELS SMOOTH TRANSITION V1 */