@media all and (max-width: 359px) {
	.list-default h4{
		font-size: .92rem !important
	}
	.list-default .con-info p{
		height: 2rem;
    font-size: .8rem;
	}
	.list-default .btn-sm{
		padding: 0.2rem .6rem;
    font-size: .74rem;
	}
	.list-default i{
		margin-right: 0 !important
	}
}


/* 2025-11-14*/
/* 드래그 중 커서 힌트 */
#shortsHScroll.is-grabbing { cursor: grabbing; cursor: -webkit-grabbing; }
#shortsHScroll { cursor: grab; cursor: -webkit-grab; }

/* 공통 스타일 */
.latest-activity {
  position: relative;
  top: -50px;
  width: 98%;
  background: rgb(255 255 255 / 85%);;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  z-index: 20;
  border: 1px solid #ffffffb8;
}

.latest-activity h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.profile-img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.info-box {
  flex: 1;
}

.nickname {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 3px;
}

.desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  word-break: break-word;
}

.actions {
  display: flex;
  gap: 6px;
}

.follow-btn,
.more-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

.follow-btn {
  background-color: #00b050;
  color: #fff;
}

.more-btn {
  background-color: #f0f0f0;
  color: #333;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .latest-activity {
    position: absolute;
	top: 90px;
    width: 100%;
    box-shadow: none;
    padding: 12px;
	background: rgb(255 255 255 / 93%);
	/*box-shadow: 0 2px 6px rgb(0 0 0 / 15%);*/
  }

  .activity-item {
    margin-bottom: 12px;
  }

  .desc {
    font-size: 12px;
  }

  .follow-btn,
  .more-btn {
    font-size: 11px;
    padding: 3px 7px;
  }
}

.video-scroll-wrapper {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.video-card {
    flex: 0 0 auto;         /* 줄바꿈 방지 */
    width: 278px;           /* 카드 가로 크기 */
    scroll-snap-align: start;
}

.video-scroll-wrapper::-webkit-scrollbar {
    display: none; /* 모바일에서 스크롤바 숨김 */
}

/* 컨테이너: 컬럼 기반 메이슨리 */
.masonry-products{
  column-count: 2;          /* 모바일 2열 */
  column-gap: 15px;         /* 좌우 간격 */
}

/* 카드: 컬럼 내부에서 쪼개지지 않게 */
.product-card{
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;         /* 아래쪽 간격 */
  break-inside: avoid;      /* ✅ 핵심: 줄바꿈 시 분할 금지 */
}

/* 이미지: 가변 높이(고정 높이 제거) */
.post-thumb img{
  width: 100%;
  height: auto;             /* ✅ 고정 높이 금지 */
  object-fit: cover;        /* 필요 시 유지 */
  border-radius: 3px;       /* 보기 좋게 */
}

/* PC에서 4열로 */
@media (min-width: 992px){
  .masonry-products{ column-count: 4; column-gap: 30px; }
}


/* artist 영역 */
/* 공통 */
.h-scroll-artist{
  --gap: 14px;      /* 카드 간격 */
  --peek: 65px;     /* 마지막 살짝 보이기 폭 */
  --items: 4;       /* 한 화면에 보이는 '완전 카드' 개수 (모바일 기본) */

  padding: 0px 0px;
  margin: 0;
  list-style: none;

  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* 스크롤바 모바일 숨김 */
  scrollbar-width: none;
}
.h-scroll-artist::-webkit-scrollbar{ display:none; }

/* 카드 폭: (전체 - 간격*(N-1) - peek) / N */
.h-scroll-artist .artist-card{
  flex: 0 0 calc((100% - (var(--gap) * (var(--items) - 1)) - var(--peek)) / var(--items));
  scroll-snap-align: start;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 rgba(0,0,0,0.06);
  overflow: hidden;
}

.h-scroll-artist .artist-card .thumb{ position: relative; }
.h-scroll-artist .artist-card .card-img{
  display:block; width:100%; height:auto; border-radius: 50px;
  aspect-ratio: 1 / 1; object-fit: cover;
}
.h-scroll-artist .artist-card .con-info{ padding: 5px 0; }

/* 태블릿: 필요시 5개 */
@media (min-width: 768px){
  .h-scroll-artist{ --gap: 14px; --peek: 60px; --items: 5; padding: 12px 16px; }
}

/* PC: 10개 꽉 + 11번째 살짝 */
@media (min-width: 1200px){
  .h-scroll-artist{
    --gap: 20px;
    --peek: 60px;   /* 11번째가 보이는 폭 */
    --items: 10;    /* ← 한 화면에 10개 보이도록 */
    padding: 12px 30px;

    /* 스크롤바 보이게(사용자에게 가로 스크롤 힌트)
    scrollbar-width: auto; */
  }
  .h-scroll-artist::-webkit-scrollbar{ display:block; height:10px; }
}

@media (max-width: 480px){
  #frmSearch input.form-control { font-size:13px; }
  #frmSearch button { min-width:38px; height:36px; }
}


/* ========== Shorts Modal ========== */
.shorts-modal{
  display:none;                    /* 초기에는 숨김 */
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  z-index:99999;                   /* 이미 inline에도 있지만 안전하게 */
  align-items:center; justify-content:center;
}

.shorts-container{
  position:relative;
  width:100%; height:100%;       /* Shorts 비율 */
  background:#000;                 /* 로딩 중 배경 */
  border-radius:8px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.shorts-container iframe{
  display:block; width:100%; height:100%; border:0;
}

/* 닫기 버튼 */
.shorts-modal .close{
  background: #fff; position: absolute; top: 55px; right: 12px; font-size: 30px; color: #000000; cursor: pointer; z-index: 99; line-height: 45px; height: 45px; width: 45px; text-align: center; border-radius: 50px; box-shadow: 0 3px 8px rgb(0 0 0 / 70%);
}

/* 좌우 내비게이션 */
.shorts-modal .prev,
.shorts-modal .next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.15); color:#fff;
  border:0; width:44px; height:44px; border-radius:50%;
  cursor:pointer; font-size:18px;
}
.shorts-modal .prev{ left:24px; }
.shorts-modal .next{ right:24px; }

/* 등록자 메타 (영상 위 오버랩) */
.shorts-meta{
  position:absolute; left:16px; bottom:16px;
  display:flex; align-items:center;
  gap:10px; color:#fff;
}
.shorts-meta-thumb{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.5);
}
.shorts-meta-name{ margin:0; font-weight:700; line-height:1.1; }
.shorts-meta-id{ margin:0; opacity:.85; font-size:12px; }

/* 마우스로 드래그 시 커서 힌트 (가로 리스트용) */
#shortsHScroll{ cursor:grab; }
#shortsHScroll.is-grabbing{ cursor:grabbing; }

/* 좌우 스와이프 존(투명) - 영상 조작을 방해하지 않도록 '가장자리'만 덮음 */
.shorts-modal .swipe-zone{
  position:absolute; top:0; height:100%;
  width:24%;                 /* 가장자리 24%만 활성 영역 */
  z-index:3;                 /* 버튼(prev/next) 아래면 값 키워주세요 */
  /* background: rgba(255,0,0,.05);  디버그용 가이드 */
  cursor: ew-resize;
  touch-action: pan-y;       /* 수직 스크롤은 통과, 가로 제스처는 우리가 처리 */
}
.shorts-modal .swipe-left  { left:0;  }
.shorts-modal .swipe-right { right:0; }

.shorts-hscroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0;
  scroll-snap-type:x mandatory;
}
.shorts-hscroll::-webkit-scrollbar{ display:none; }
.shorts-card{ scroll-snap-align:start; }

.lazyfade{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s;}
.lazyfade.is-loaded{opacity:1;transform:none;}

/* Mobile 1-up override (최소 수정) */
@media (max-width: 576px){
  /* masonry가 CSS columns 방식일 때 */
  .masonry-products{
    column-count: 1 !important;
    column-gap: 16px;           /* 간격 유지 */
  }
  .masonry-products .product-card{
    break-inside: avoid;        /* 컬럼 깨짐 방지 */
    -webkit-column-break-inside: avoid;
    margin-bottom: 16px;
  }

  /* masonry가 CSS grid 방식일 때도 안전하게 덮어쓰기 */
  .masonry-products{
    display: grid;
    grid-template-columns: 1fr !important;
    grid-gap: 16px;
  }
}

/* 유튜브 전환 페이드 */
.yt-reel{position:relative;background:#000;overflow:hidden;}
.yt-reel .yt-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:opacity .18s ease;
}
.yt-reel .yt-slot{position:absolute;inset:0;}    /* API가 들어갈 자리 */
.yt-reel.is-ready .yt-thumb{opacity:0;}          /* 재생 시작되면 썸네일 페이드아웃 */