@charset "utf-8";

/* ========================================
   Newsletter Gallery - Modern Card Style
   ======================================== */

/* ----------------------------------------
   카드 컴포넌트
   ---------------------------------------- */
.nl-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-card:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.nl-card-link {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
}

/* 체크박스 */
.nl-checkbox {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 6px;
	padding: 4px 6px;
}
.nl-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: #2563eb;
}

/* ----------------------------------------
   썸네일
   ---------------------------------------- */
.nl-thumb {
	position: relative;
	overflow: hidden;
	background: #f1f5f9;
}

.nl-thumb-ratio {
	position: relative;
	width: 100%;
	height: 0;
}

.nl-thumb-ratio img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-thumb-auto img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-card:hover .nl-thumb img {
	transform: scale(1.05);
}

/* 오버레이 */
.nl-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
	pointer-events: none;
}

.nl-card:hover .nl-overlay {
	background: rgba(0, 0, 0, 0.25);
}

.nl-overlay-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #1e293b;
	opacity: 0;
	transform: scale(0.7);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nl-card:hover .nl-overlay-icon {
	opacity: 1;
	transform: scale(1);
}

.nl-overlay-icon svg {
	width: 22px;
	height: 22px;
}

/* ----------------------------------------
   관리자 수정 버튼
   ---------------------------------------- */
.nl-edit-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #475569;
	font-size: 14px;
	text-decoration: none !important;
	opacity: 0;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nl-card:hover .nl-edit-btn {
	opacity: 1;
}

.nl-edit-btn:hover {
	background: #2563eb;
	color: #fff !important;
	transform: scale(1.1);
}

/* ----------------------------------------
   정보 영역
   ---------------------------------------- */
.nl-info {
	padding: 14px 16px 16px;
	text-align: center;
}

.nl-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.nl-card:hover .nl-title {
	color: #2563eb;
}

/* ----------------------------------------
   빈 목록
   ---------------------------------------- */
.nl-empty {
	text-align: center;
	padding: 80px 20px;
	color: #94a3b8;
}

.nl-empty svg {
	margin-bottom: 16px;
	color: #cbd5e1;
}

.nl-empty p {
	font-size: 15px;
	margin: 0;
	color: #94a3b8;
}

/* ----------------------------------------
   Masonry 호환 (기존 float 레이아웃)
   ---------------------------------------- */
.list-item .tack-check { right: 10px; bottom: 10px; z-index: 1; position: absolute; font-weight: normal; }
.list-item .tack-check-left { left: 10px; bottom: 10px; z-index: 1; position: absolute; font-weight: normal; }
.list-item h2 { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; margin: 12px 5px; text-align: center; color: #1e293b; }
.list-item h2 a { color: #1e293b; text-decoration: none; transition: color 0.2s ease; }
.list-item h2 a:hover { color: #2563eb; }
.list-item .list-img { position: relative; overflow: hidden; border-radius: 12px; }
.list-item .list-img img { width: 100%; height: auto; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.list-item:hover .list-img img { transform: scale(1.05); }
.list-item .list-date { position: absolute; bottom: 10px; padding: 0px 10px; font-size: 12px; line-height: 23px; }
.list-item .list-date.left { left: 0px; }
.list-item .list-date.right { right: 0px; }
.list-item .list-details { padding: 0 3%; }
.list-item .list-details .member, .list-item .list-details .guest { color: #787878 !important; }
.list-row.clearfix { float: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important }

/* Masonry Responsive */
@media all and (max-width:767px) {
	.responsive .list-row { width: 50% !important }
}
@media all and (max-width:420px) {
	.responsive .list-row { width: 100% !important }
}

/* ----------------------------------------
   기존 위젯 호환 (wz_*)
   ---------------------------------------- */
ol, ul { list-style: none; margin: 0px; padding: 0px; }
.wz_wrap { position: relative; min-height: 305px; margin: 0 0 75px; padding-right: 268px; box-sizing: border-box; }
.wz_sel { position: relative; }
.wz_img { max-width: 240px; }
.wz_link { overflow: hidden; position: relative; max-width: 100%; display: block; height: 61px; padding-right: 60px; font-size: 32px; line-height: 54px; font-weight: bold; border-bottom: 1px solid #adadad; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.wz_link.is_select:after { background-position: 0 -16px; }
.wz_link:after { overflow: hidden; display: block; clear: both; content: ''; position: absolute; top: 50%; right: 14px; width: 22px; height: 13px; margin-top: -6px; background: url(/welfare21c/img/wz_link_arrow.gif) left top no-repeat; }

.wz_dropdown_wrap { display: none; overflow-x: hidden; overflow-y: auto; position: absolute; top: 60px; left: 0; z-index: 3; width: 100%; max-height: 192px; border: 1px solid #f0f0f0; background-color: #fcfcfc; box-sizing: border-box; }
.wz_drop_link { overflow: hidden; display: block; max-width: 100%; padding: 10px 20px; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
@media all and (max-width:767px) {
	.wz_wrap { padding-right: 0; }
}