@charset "utf-8";
/*
  LNP 포트폴리오 목록/상세 CSS (현재: 목록)
  - 카드는 lnp-home.css 의 .lnp-project-* 를 서브용으로 복사·수정한 것 (박스·뱃지·화살표 없음).
  - 클래스 접두어 lnp-plist-
*/

/* ===== 필터바: 연도탭 + 정렬 ===== */
.lnp-plist-bar{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-bottom:24px;
}
.lnp-plist-tabs{
	display:flex;
	gap:6px;
	margin:0; padding:0;
	list-style:none;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	/* 모바일: 연도가 많으면 가로 스크롤, 오른쪽 끝 페이드로 이어짐을 암시 */
	padding-right:28px;
	-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.lnp-plist-tabs li{ flex:none; }
.lnp-plist-tabs::-webkit-scrollbar{ display:none; }
.lnp-plist-tabs a{
	display:flex;
	align-items:center;
	justify-content:center;
	height:38px;
	padding:0 16px;
	border:1px solid var(--lnp-border);
	border-radius:2px;
	background:#fff;
	font-size:14px;
	font-weight:600;
	color:var(--lnp-text-sub);
	text-decoration:none;
	white-space:nowrap;
	box-sizing:border-box;
	transition:all .2s ease;
}
.lnp-plist-tabs a:hover{ border-color:var(--lnp-navy); color:var(--lnp-navy); }
.lnp-plist-tabs a.is-on{
	background:var(--lnp-navy);
	border-color:var(--lnp-navy);
	color:#fff;
}

/* 정렬 드롭다운 (임시: 최신순만) */
.lnp-plist-sort{ position:relative; align-self:flex-end; }
.lnp-plist-sort select{
	appearance:none;
	-webkit-appearance:none;
	height:38px;
	min-width:120px;
	padding:0 34px 0 14px;
	border:1px solid var(--lnp-border);
	border-radius:2px;
	background:#fff;
	font-size:14px;
	color:var(--lnp-text);
	cursor:pointer;
	box-sizing:border-box;
}
.lnp-plist-sort i{
	position:absolute;
	right:10px; top:50%;
	transform:translateY(-50%);
	font-size:14px;
	color:var(--lnp-text-sub);
	pointer-events:none;
}

/* ===== 카드 그리드 ===== */
.lnp-plist-grid{
	display:grid;
	grid-template-columns:repeat(1, minmax(0, 1fr));
	gap:32px 0;
	margin:0; padding:0;
	list-style:none;
}
.lnp-plist-card{
	display:block;
	min-width:0; /* grid item: ellipsis 작동 필수 */
	color:inherit;
	text-decoration:none;
}
.lnp-plist-thumb{
	position:relative;
	width:100%;
	padding-top:66.6%; /* 3:2, 원본 권장 900×600 */
	background:#dde3ec; /* 이미지 없을 때 회색 플레이스홀더 */
	border-radius:4px;
	overflow:hidden;
}
.lnp-plist-thumb img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}
.lnp-plist-card:hover .lnp-plist-thumb img{ transform:scale(1.04); }
.lnp-plist-body{ padding:14px 2px 0; min-width:0; }
.lnp-plist-title-kr{
	display:block;
	margin-bottom:4px;
	font-size:16px;
	font-weight:700;
	line-height:1.4;
	color:var(--lnp-text);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	min-width:0;
}
.lnp-plist-card:hover .lnp-plist-title-kr{ color:var(--lnp-navy); }
.lnp-plist-title-en{
	display:block;
	margin-bottom:8px;
	font-size:13px;
	line-height:1.4;
	color:var(--lnp-text-sub);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	min-width:0;
}
.lnp-plist-date{
	display:block;
	font-size:13px;
	color:#8b929c;
}

/* ===== 페이징 (그누보드 .pg_* 연동은 프로그램 단계에서 조정) ===== */
.lnp-plist-paging{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin-top:48px;
}
.lnp-plist-paging a,
.lnp-plist-paging span{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:34px;
	height:34px;
	padding:0 6px;
	border-radius:2px;
	font-size:14px;
	font-weight:600;
	color:var(--lnp-text-sub);
	text-decoration:none;
	box-sizing:border-box;
}
.lnp-plist-paging a:hover{ color:var(--lnp-navy); }
.lnp-plist-paging .is-on{ background:var(--lnp-navy); color:#fff; }
.lnp-plist-paging .is-off{ color:#c5cad2; }
.lnp-plist-paging i{ font-size:16px; }

/* ===== 빈 목록 ===== */
.lnp-plist-empty{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:64px 16px;
	background:var(--lnp-bg-soft);
	border:1px dashed var(--lnp-border);
	border-radius:4px;
	text-align:center;
}
.lnp-plist-empty i{
	font-size:40px;
	line-height:1;
	color:#c5cad2;
}
.lnp-plist-empty p{
	margin:0;
	font-size:15px;
	font-weight:600;
	color:var(--lnp-text-sub);
}

/* detail */
/* =====================================================================
   ▼ 상세 (lnp-pdetail-) — 기존 lnp-portfolio.css 맨 아래에 그대로 추가
   - 상단 슬림 띠(.lnp-sub-top--slim)도 여기서 처리 (lnp-sub.css 미수정, 로드 순서상 portfolio가 뒤라 덮어씀)
   ===================================================================== */

/* ===== 상단 슬림 띠: 브레드크럼만 ===== */
.lnp-sub-top.lnp-sub-top--slim{ padding:14px 0; }
.lnp-sub-top--slim .lnp-sub-crumb{ margin:0; flex-wrap:nowrap; }
.lnp-sub-top--slim .lnp-sub-crumb li{ flex:none; }
.lnp-sub-top--slim .lnp-sub-crumb li:last-child{
	flex:1 1 auto;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	display:block; /* ellipsis 적용 위해 flex 해제 */
}
.lnp-sub-top--slim .lnp-sub-crumb li:last-child span,
.lnp-sub-top--slim .lnp-sub-crumb li:last-child a{ min-width:0; }

/* ===== 상세 헤드: H1(국문) + 영문명 ===== */
.lnp-pdetail-head{ margin:0 0 24px; }
.lnp-pdetail-title{
	margin:0;
	font-size:24px;
	font-weight:800;
	line-height:1.4;
	letter-spacing:-0.5px;
	color:var(--lnp-navy);
	word-break:keep-all;
	overflow-wrap:anywhere;
}
.lnp-pdetail-title-en{
	margin:8px 0 0;
	font-size:15px;
	line-height:1.5;
	color:var(--lnp-text-sub);
	word-break:break-word;
}

/* ===== 본문: 갤러리 + 정보표 ===== */
.lnp-pdetail-main{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	gap:28px;
}
.lnp-pdetail-gallery{ min-width:0; }

/* 메인 슬라이드 (3:2) */
.lnp-pdetail-main-swiper{
	position:relative;
	overflow:hidden;
	border-radius:4px;
	background:#dde3ec;
}
.lnp-pdetail-slide{
	position:relative;
	width:100%;
	padding-top:66.6%;
	background:#dde3ec;
}
.lnp-pdetail-slide img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}

/* 썸네일 스트립 */
.lnp-pdetail-thumbwrap{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:10px;
}
.lnp-pdetail-thumbs{
	flex:1 1 auto;
	min-width:0;
	position:relative;
	overflow:hidden;
}
.lnp-pdetail-thumbs .swiper-slide{ cursor:pointer; }
.lnp-pdetail-thumb{
	position:relative;
	width:100%;
	padding-top:66.6%;
	background:#dde3ec;
	border-radius:2px;
	overflow:hidden;
	opacity:.6;
	transition:opacity .2s ease;
}
.lnp-pdetail-thumb img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}
.lnp-pdetail-thumb::after{
	content:"";
	position:absolute; inset:0;
	border:2px solid transparent;
	border-radius:2px;
	box-sizing:border-box;
	transition:border-color .2s ease;
}
.lnp-pdetail-thumbs .swiper-slide-thumb-active .lnp-pdetail-thumb{ opacity:1; }
.lnp-pdetail-thumbs .swiper-slide-thumb-active .lnp-pdetail-thumb::after{ border-color:var(--lnp-navy); }
.lnp-pdetail-thumb-btn{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px; height:28px;
	padding:0;
	background:none;
	border:1px solid var(--lnp-border);
	border-radius:50%;
	font-size:14px;
	color:var(--lnp-text-sub);
	cursor:pointer;
	transition:all .2s ease;
}
.lnp-pdetail-thumb-btn:hover{ border-color:var(--lnp-navy); color:var(--lnp-navy); }

/* 정보표: 행 카드형. 연한 배경 + 둥근 모서리 바, 라벨은 네이비 알약 뱃지 + 값 한 줄 */
.lnp-pdetail-info{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
	padding:0;
	min-width:0;
}
.lnp-pdetail-row{
	display:flex;
	align-items:flex-start;
	gap:16px;
	min-width:0;
	padding:14px 16px;
	background:var(--lnp-bg-soft);
	border-radius:10px;
}
.lnp-pdetail-row dt{
	flex:none;
	width:84px;
	margin:0;
	padding:4px 0;
	box-sizing:border-box;
	text-align:center;
	border-radius:999px;
	background:var(--lnp-navy);
	font-size:13px;
	font-weight:700;
	line-height:1.5;
	letter-spacing:.02em;
	color:#fff;
}
.lnp-pdetail-row dd{
	flex:1 1 auto;
	min-width:0;
	margin:0;
	font-size:16px;
	font-weight:600;
	line-height:1.6;
	color:var(--lnp-text);
	word-break:keep-all;
	overflow-wrap:anywhere;
}
/* 긴 문장(수행용역 등) */
.lnp-pdetail-row--long dd{
	font-size:15px;
	font-weight:400;
	line-height:1.7;
	color:#444;
}

/* 이전 / 목록 / 다음 */
.lnp-pdetail-nav{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:8px;
	margin-top:48px;
}
.lnp-pdetail-nav a{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	height:46px;
	border:1px solid var(--lnp-border);
	border-radius:2px;
	background:#fff;
	font-size:13px;
	font-weight:600;
	color:var(--lnp-text-sub);
	text-decoration:none;
	box-sizing:border-box;
	transition:all .2s ease;
}
.lnp-pdetail-nav a:hover{ border-color:var(--lnp-navy); color:var(--lnp-navy); }
.lnp-pdetail-nav i{ font-size:14px; }
/* 가운데 목록 버튼: 아이콘 + 텍스트, 폭은 내용에 맞춤 (양옆 이전/다음은 1fr로 같은 폭 유지) */
.lnp-pdetail-nav .lnp-pdetail-nav-list{
	padding:0 18px;
	gap:6px;
	color:#fff;
	background:var(--lnp-navy);
	border-color:var(--lnp-navy);
	white-space:nowrap;
}
.lnp-pdetail-nav .lnp-pdetail-nav-list i{ font-size:16px; }
.lnp-pdetail-nav .lnp-pdetail-nav-list:hover{
	background:var(--lnp-navy-dark);
	border-color:var(--lnp-navy-dark);
	color:#fff;
}
.lnp-pdetail-nav .lnp-pdetail-nav-prev{ justify-self:stretch; }
.lnp-pdetail-nav .lnp-pdetail-nav-next{ justify-self:stretch; }
.lnp-pdetail-nav a.is-off{
	color:#c5cad2;
	background:var(--lnp-bg-soft);
	pointer-events:none;
}


@media screen and (min-width:1024px){
	.lnp-plist-bar{
		flex-direction:row;
		align-items:flex-start;
		justify-content:space-between;
		margin-bottom:32px;
	}
	/* PC: 연도가 많으면 줄바꿈 (스크롤/페이드 해제) */
	.lnp-plist-tabs{
		flex:1 1 auto;
		min-width:0;
		flex-wrap:wrap;
		overflow:visible;
		padding-right:0;
		-webkit-mask-image:none;
		mask-image:none;
	}
	.lnp-plist-tabs a{ padding:0 20px; }
	.lnp-plist-sort{ align-self:auto; flex:none; margin-left:16px; }
	.lnp-plist-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px 28px; }
	.lnp-plist-title-kr{ font-size:17px; }
	.lnp-plist-paging{ margin-top:72px; }

	.lnp-plist-empty{ padding:96px 16px; }
	.lnp-plist-empty i{ font-size:48px; }
	.lnp-plist-empty p{ font-size:16px; }

	/* detail */
	.lnp-sub-top.lnp-sub-top--slim{ padding:18px 0; }

	.lnp-pdetail-head{ margin-bottom:36px; }
	.lnp-pdetail-title{ font-size:36px; }
	.lnp-pdetail-title-en{ margin-top:10px; font-size:20px; }

	.lnp-pdetail-main{
		grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
		gap:48px;
		align-items:start;
	}
	.lnp-pdetail-row{ gap:20px; padding:16px 20px; }
	.lnp-pdetail-row dt{ width:96px; font-size:14px; }
	.lnp-pdetail-row dd{ font-size:17px; }
	.lnp-pdetail-row--long dd{ font-size:16px; }

	.lnp-pdetail-nav{
		grid-template-columns:200px auto 200px;
		justify-content:space-between;
		margin-top:72px;
	}
	.lnp-pdetail-nav a{ font-size:15px; }
}