/* 블록(카드) · 메인팝업 — 파트너센터 「요즘뉴스」(요즘핫플 본사 게시판) 카드를 그린다 (2026-10-07 파트너센터 152nd)
   거제매물도 템플릿 _src/css/theme.css 의 .bn·.np 규칙을 옮김 — 색은 요즘핫플 변수(common.css). 그리기 lib/block.lib.php · 재생 js/blocks.js
   글자 색·크기는 파트너센터가 style 로 함께 적어 둔다(.tc-*·.fs-* 없음 — 요즘핫플 템플릿 적용 때 사이트 색으로) */

/* ── 카드 ── */
.bn .bn-block { margin: 0; padding: 0; }
.bn .bn-block + .bn-block { margin-top: 32px; }   /* 모든 카드 사이 같은 간격 */
.bn .bn-image img,
.bn .bn-card > figure img { display: block; width: auto; max-width: 100%; height: auto; }   /* 사진은 원래 크기(칸보다 크면 칸 폭) — 폰 화면 캡처 같은 작은 사진을 늘려 흐리게 하지 않는다(옛 요즘뉴스와 같게) */
.bn .bn-card > figure { margin: 0; }
.bn .bn-card > * + * { margin-top: 14px; }
.bn h3, .bn h4, .bn h5 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--body-color); word-break: keep-all; }
.bn-html { color: var(--body-cont-color); line-height: 1.7; overflow-wrap: anywhere; }
.bn-html p { margin: 0 0 0.6em; }
.bn-html > :last-child { margin-bottom: 0; }
.bn-html a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }   /* 글 속 링크 */
.bn-html img { max-width: 100%; height: auto; }
.bn-html .ul-10, .bn .ul-10 { margin: 0 0 0.6em; padding-left: 1.2em; list-style: disc; }   /* 점 목록 */
.bn-html .ul-10 li + li { margin-top: 0.2em; }
.bn-html .sub-title1 { margin: 1em 0 0.5em; font-size: 1.1rem; font-weight: 700; color: var(--body-color); }   /* 큰·작은 소제목 */
.bn-html .sub-title2 { margin: 0.8em 0 0.4em; font-size: 1rem; font-weight: 700; color: var(--body-color); }
.bn-html table { width: 100%; }
.bn-html .table-1 { border-collapse: collapse; }
.bn-html .table-1 th, .bn-html .table-1 td { padding: 6px 10px; border: 1px solid var(--border-color); }
.bn-html .table-1 th { background: #f6f7f9; font-weight: 600; }
.bn-html hr { margin: 1em 0; border: 0; border-top: 1px solid var(--border-color); opacity: 1; }

/* 동영상 카드 — 썸네일(칸 비율 = 사진 비율, 유튜브 그림은 16:9) + 가운데 재생 단추 → 누르면 칸을 꽉 채워 재생 */
.bn-vbox { position: relative; overflow: hidden; margin: 0; background: #000; }
.bn-vbox img, .bn .bn-card > figure.bn-vbox img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-crop { position: absolute; inset: 0; display: block; overflow: hidden; }   /* 유튜브 미리보기 그림 — 3% 키워 어두운 가장자리를 칸 밖으로 */
.yt-crop img { transform: scale(1.03); }
.bn-play {
	position: absolute; top: 50%; left: 50%; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 72px; height: 72px; padding: 0 0 0 4px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	color: var(--primary-color); font-size: 34px;
	transform: translate(-50%, -50%); cursor: pointer; transition: transform 0.2s ease-out;
}
.bn-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.bn-more { margin: 12px 0 0; }
.bn-more a { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--primary-color); text-decoration: none; }
.bn-more a:hover { text-decoration: underline; }
/* 재생 중 — 칸을 꽉(mp4 는 cover, 유튜브는 칸보다 크게 키운 16:9 를 가운데 — js/blocks.js fitYt) */
.is-playing { overflow: hidden; }
.is-playing > .v-fill { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; background: #000; transform: scale(1.01); }
.is-playing > .v-yt { position: absolute; top: 50%; left: 50%; z-index: 3; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%) scale(1.01); background: #000; }

/* ── 메인팝업 (p/_main_popup.php) — 한 장 = 흰 둥근 카드 420×475(490:554) · 맨 아래 단추 줄. 사진만이면 사진이 카드 꽉, 글만이면 글 높이만큼 ── */
#popup-wrap {
	position: fixed; top: 0; left: 50%; z-index: 1028;   /* 머리(1030) 아래 — 팝업을 올리면 머리 뒤로 */
	display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: 16px;
	width: max-content; max-width: 90vw; max-height: 100vh; max-height: 100dvh; overflow-y: auto;
	padding: 193px 16px 16px;   /* 위 = 팝업 시작 자리(고정된 검색창 아래 끝 177 + 16 — 스크립트가 열 때 재서 바꾼다, p/_main_popup.php placeWrap) · 옆·아래 16 — 그림자가 잘리지 않게 */
	transform: translateX(-50%);
}
.custom-popup { --np-r: 20px; width: 420px; max-width: 90vw; container-type: inline-size; }
.np-card { display: flex; flex-direction: column; width: 100%; aspect-ratio: 490 / 554; overflow: hidden; border-radius: var(--np-r); background: #fff; box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.14); }
.np-card.np-text-only { aspect-ratio: auto; max-height: calc(100cqw * 554 / 490); }   /* 글만 — 글이 적으면 낮게, 많으면 카드 비율 높이까지(스크롤) */
.np-media { position: relative; flex: none; aspect-ratio: 16 / 9; min-height: 0; background: var(--border-sub-color); }
.np-media a { display: block; height: 100%; }
.np-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-card.np-media-only { position: relative; }
.np-media-only .np-media { position: absolute; inset: 0; aspect-ratio: auto; }
.np-media-only .popup-buttons { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; }
.np-play {   /* 사진 오른쪽 아래 경계에 반쯤 걸친 흰 원 */
	position: absolute; right: 24px; bottom: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; padding: 0 0 0 4px;
	border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	color: var(--primary-color); font-size: 30px;
	transform: translateY(50%); cursor: pointer; transition: transform 0.2s ease-out;
}
.np-play:hover { transform: translateY(50%) scale(1.06); }
.np-media-only .np-play { bottom: 76px; transform: none; }
.np-media-only .np-play:hover { transform: scale(1.06); }
.np-both .np-media { z-index: 1; }
.np-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 30px 8px; }
.np-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--body-color); word-break: keep-all; }
.np-sub { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--body-color); word-break: keep-all; }
.np-sub .bi { flex: none; margin-top: 0.1em; color: var(--trip-color); }
.np-text { font-size: 14px; line-height: 1.7; color: var(--body-cont-color); }
.np-text p { margin: 0 0 0.6em; }
.np-text a { color: var(--primary-color); text-decoration: underline; }
.np-body .bn-more { margin: 8px 0 0; }
.custom-popup .popup-buttons { display: flex; flex: none; gap: 10px; padding: 12px; }
.custom-popup .popup-buttons button { flex: 1; height: 40px; border: 1px solid var(--primary-color); border-radius: var(--np-r); font-size: 14px; cursor: pointer; transition: filter 0.2s ease-out, background-color 0.2s ease-out; }
.custom-popup .btn-popup-reject { background: #fff; color: var(--primary-color); }
.custom-popup .btn-popup-reject:hover { background: #f8f9fa; }
.custom-popup .btn-popup-close { background: var(--primary-color); color: #fff; }
.custom-popup .btn-popup-close:hover { filter: brightness(0.92); }
@media (max-width: 767px) {
	#popup-wrap { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; width: 92%; max-width: 92%; padding-top: 207px; }   /* 휴대폰 — 위에서부터 쌓기(시작 = 검색창 아래 끝 191 + 16, 스크립트가 다시 잼) */
	.custom-popup { width: 100%; max-width: 100%; }
	.np-title { font-size: 16px; }
	.np-sub { font-size: 14px; }
}