/* ===============================================
   SH MEDIA2 (VLOG) – SEA HORSE MEDIA
   - 좌측 썸네일 / 우측 텍스트
   - 상단 헤더바(타이틀/검색/글쓰기)
================================================ */

:root{
  --sh-page-max: 1240px;
  --sh-gap: 14px;
  --sh-radius: 16px;
  --sh-border: rgba(0,0,0,.08);
  --sh-border-hover: rgba(0,0,0,.16);
  --sh-text: #111;
  --sh-subtext: #555;
  --sh-muted: #888;
}

/* ✅ 특정 페이지에서만 기본 글쓰기 버튼 숨김(기존 유지) */
.sh-vlog-page .kboard-control,
.sh-vlog-page .kboard-control-left,
.sh-vlog-page .kboard-control-right,
.sh-vlog-page .kboard-default-button,
.sh-vlog-page .kboard-default-button-right,
.sh-vlog-page .kboard-write,
.sh-vlog-page .kboard-write-button,
.sh-vlog-page .kboard-button-write,
.sh-vlog-page a.kboard-write-button{
  display:none !important;
}

/* 래퍼 */
#kboard-sh-media2-list{
  width:100%;
  box-sizing:border-box;
}

/* ✅ 상단 헤더바 */
#kboard-sh-media2-list .kboard-sh-media2-headerbar{
  max-width: var(--sh-page-max);
  margin: 0 auto 18px auto;
  padding: 10px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

#kboard-sh-media2-list .kboard-sh-media2-head-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--sh-text);
}

#kboard-sh-media2-list .kboard-sh-media2-head-desc{
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

#kboard-sh-media2-list .kboard-sh-media2-head-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 검색 UI */
#kboard-sh-media2-list .kboard-sh-media2-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  background:#fff;
}

#kboard-sh-media2-list .kboard-sh-media2-search input{
  width: 220px;
  border:0;
  outline:0;
  font-size: 13px;
  color: var(--sh-text);
  background:transparent;
}

#kboard-sh-media2-list .kboard-sh-media2-search button{
  border:0;
  outline:0;
  cursor:pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  background:#111;
  color:#fff;
}

/* 관리자 글쓰기 버튼 */
#kboard-sh-media2-list .kboard-sh-media2-write{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--sh-border);
  background:#fff;
  color:#111;
  font-weight: 900;
  text-decoration:none;
}
#kboard-sh-media2-list .kboard-sh-media2-write:hover{
  border-color: var(--sh-border-hover);
  background:#fafafa;
}

/* 리스트 묶음(가운데 정렬/폭 제한) */
#kboard-sh-media2-list .kboard-sh-media2-items{
  max-width: var(--sh-page-max);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  flex-direction:column;
  gap: var(--sh-gap);
}

/* 카드 */
#kboard-sh-media2-list .kboard-sh-media2-item{
  display:flex;
  align-items:stretch;
  gap:22px;
  padding:20px 22px;
  border:1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
#kboard-sh-media2-list .kboard-sh-media2-item:hover{
  background:#fafafa;
  border-color: var(--sh-border-hover);
  transform: translateY(-1px);
}

/* 썸네일 (✅ 16:9 고정) */
#kboard-sh-media2-list .kboard-sh-media2-thumb{
  flex:0 0 340px;
  border-radius: 14px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  aspect-ratio: 16 / 9;
}

/* 배지 */
#kboard-sh-media2-list .kboard-sh-media2-badge{
  position:absolute;
  top:12px;
  right:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

/* ▶ 재생 오버레이 */
#kboard-sh-media2-list .kboard-sh-media2-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition: background .18s ease;
}
#kboard-sh-media2-list .kboard-sh-media2-thumb::before{
  content:"▶";
  position:absolute;
  left:16px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  color:#fff;
  background:rgba(0,0,0,0.55);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
  transition: transform .18s ease, background .18s ease;
}
#kboard-sh-media2-list .kboard-sh-media2-item:hover .kboard-sh-media2-thumb::after{
  background:rgba(0,0,0,0.10);
}
#kboard-sh-media2-list .kboard-sh-media2-item:hover .kboard-sh-media2-thumb::before{
  background:rgba(0,0,0,0.62);
  transform: translateY(-1px);
}

/* 본문 */
#kboard-sh-media2-list .kboard-sh-media2-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 2px;
}

/* 상단 정보 */
#kboard-sh-media2-list .kboard-sh-media2-top{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#666;
}

/* 카테고리 */
#kboard-sh-media2-list .kboard-sh-media2-cat{
  padding:5px 10px;
  border-radius:999px;
  background:#f1f3f5;
  font-weight:900;
  color:#333;
}

/* 날짜 */
#kboard-sh-media2-list .kboard-sh-media2-date{
  color:#999;
}

/* 제목 (✅ 2줄 클램프) */
#kboard-sh-media2-list .kboard-sh-media2-title{
  font-size:19px;
  font-weight:900;
  line-height:1.35;
  color: var(--sh-text);
  word-break:keep-all;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 비밀글 아이콘 */
#kboard-sh-media2-list .kboard-sh-media2-lock{
  margin-left:6px;
  font-size:14px;
}

/* 소제목 (✅ 2줄 클램프) */
#kboard-sh-media2-list .kboard-sh-media2-subtitle{
  font-size:14px;
  line-height:1.6;
  color: var(--sh-subtext);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA */
#kboard-sh-media2-list .kboard-sh-media2-cta{
  margin-top:auto;
  font-size:13px;
  font-weight:900;
  color:#111;
  opacity:.78;
}
#kboard-sh-media2-list .kboard-sh-media2-item:hover .kboard-sh-media2-cta{
  opacity:1;
}

/* 비어있을 때 */
#kboard-sh-media2-list .kboard-sh-media2-empty{
  padding:32px;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:14px;
  text-align:center;
  color: var(--sh-muted);
  background:#fff;
}

/* 페이지네이션 */
#kboard-sh-media2-list .kboard-sh-media2-pagination{
  margin:28px auto 0 auto;
  max-width: var(--sh-page-max);
  padding: 0 18px;
}
#kboard-sh-media2-list .kboard-pagination-pages{
  display:flex;
  justify-content:center;
  gap:6px;
}
#kboard-sh-media2-list .kboard-pagination-pages li{
  list-style:none;
}
#kboard-sh-media2-list .kboard-pagination-pages a,
#kboard-sh-media2-list .kboard-pagination-pages span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  border-radius:8px;
  font-size:13px;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 900px){
  #kboard-sh-media2-list .kboard-sh-media2-headerbar{
    align-items:flex-start;
    flex-direction:column;
  }
  #kboard-sh-media2-list .kboard-sh-media2-head-right{
    width:100%;
    justify-content:space-between;
  }
  #kboard-sh-media2-list .kboard-sh-media2-search{
    flex:1;
  }
  #kboard-sh-media2-list .kboard-sh-media2-search input{
    width: 100%;
  }
}

@media (max-width: 768px){
  #kboard-sh-media2-list .kboard-sh-media2-item{
    flex-direction:column;
    padding:18px;
    gap:14px;
  }
  #kboard-sh-media2-list .kboard-sh-media2-thumb{
    flex: 0 0 auto;
    width:100%;
  }
  #kboard-sh-media2-list .kboard-sh-media2-thumb::before{
    left:14px;
    bottom:12px;
  }
  #kboard-sh-media2-list .kboard-sh-media2-title{
    font-size:17px;
  }
}
/* =========================================
   Seahorse Media - document video style
========================================= */

#kboard-document.sh-media-document{
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px 80px;
	box-sizing: border-box;
}

#kboard-document.sh-media-document .sh-media-doc-header{
	margin-bottom: 24px;
}

#kboard-document.sh-media-document .sh-media-doc-title{
	margin: 0 0 14px;
	font-size: 36px;
	line-height: 1.35;
	font-weight: 800;
	color: #111;
}

#kboard-document.sh-media-document .sh-media-doc-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #f7f7f7;
	font-size: 14px;
	color: #555;
}

#kboard-document.sh-media-document .sh-media-doc-meta .item strong{
	margin-right: 6px;
	color: #222;
}

#kboard-document.sh-media-document .sh-media-video-card{
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

#kboard-document.sh-media-document .sh-media-video-wrap{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

#kboard-document.sh-media-document .sh-media-video-wrap iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

#kboard-document.sh-media-document .sh-media-video-desc{
	padding: 24px 26px 28px;
	font-size: 16px;
	line-height: 1.8;
	color: #444;
}

#kboard-document.sh-media-document .sh-media-fallback-content{
	padding: 24px 0;
	font-size: 16px;
	line-height: 1.8;
	color: #444;
}

#kboard-document.sh-media-document .sh-media-doc-bottom{
	margin-top: 28px;
	display: flex;
	justify-content: flex-end;
}

#kboard-document.sh-media-document .sh-media-doc-bottom .left{
	display: flex;
	gap: 10px;
}

#kboard-document.sh-media-document .sh-media-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	transition: all .2s ease;
	box-sizing: border-box;
}

#kboard-document.sh-media-document .sh-media-btn--ghost{
	border: 1px solid #ddd;
	background: #fff;
	color: #222 !important;
}

#kboard-document.sh-media-document .sh-media-btn--ghost:hover{
	border-color: #111;
	color: #111 !important;
}

@media (max-width: 768px){
	#kboard-document.sh-media-document{
		padding: 24px 16px 56px;
	}

	#kboard-document.sh-media-document .sh-media-doc-title{
		font-size: 26px;
	}

	#kboard-document.sh-media-document .sh-media-doc-meta{
		gap: 10px 14px;
		font-size: 13px;
		padding: 12px 14px;
	}

	#kboard-document.sh-media-document .sh-media-video-desc{
		padding: 18px 18px 22px;
		font-size: 15px;
	}
}
/* =========================================
   Seahorse Media - Video Modal
========================================= */

html.sh-media-modal-open,
body.sh-media-modal-open{
	overflow: hidden !important;
}

.sh-media-modal{
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
}

.sh-media-modal.is-open{
	display: block;
}

.sh-media-modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.68);
	backdrop-filter: blur(2px);
}

.sh-media-modal__dialog{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1100px, calc(100vw - 40px));
	background: #111;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.sh-media-modal__close{
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 5;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.sh-media-modal__close:hover{
	background: rgba(255,255,255,.22);
}

.sh-media-modal__player-wrap{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.sh-media-modal__player-wrap iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.sh-media-modal__meta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px 18px;
	background: #171717;
}

.sh-media-modal__title{
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
	word-break: keep-all;
}

.sh-media-modal__link{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	color: #111 !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

@media (max-width: 768px){
	.sh-media-modal__dialog{
		width: calc(100vw - 20px);
	}

	.sh-media-modal__meta{
		flex-direction: column;
		align-items: flex-start;
		padding: 14px 14px 16px;
	}

	.sh-media-modal__title{
		font-size: 16px;
	}

	.sh-media-modal__link{
		height: 36px;
		padding: 0 12px;
		font-size: 12px;
	}
}