@charset "utf-8";

/* modal */
/* .ws-modal-open,
.ws-modal-open body { overflow: hidden; } */

.ws-modal-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,.7); opacity: 0; transition: opacity 0.25s ease;}
.ws-modal-wrap.ws-modal-visible { opacity: 1; }
.ws-modal-wrap.ws-modal-leave { opacity: 0; }

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; padding:20px; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner { position: relative; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; overflow: hidden; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; padding: 20px; padding-bottom: 30px; }
.ws-modal-wrap.ws-modal-visible .ws-modal-inner { opacity: 1; transform: scale(1); }
.ws-modal-wrap.ws-modal-leave .ws-modal-inner { opacity: 0; transform: scale(0.85); transition-delay: 0s; }
.ws-modal-close { display: inline-block; position: absolute; right: 50px; top: 50px; background: url(../images/sub/modal-close.png) center no-repeat; background-size: contain; width: 32px; height: 32px; border: none; }

/* 포트폴리오 상세 */
#pfDetail .ws-modal-outer { padding: 40px 20px; }
#pfDetail .ws-modal-inner.pf-detail { max-width: 1440px; padding: 80px; border-radius: 32px; box-sizing: border-box; }
#pfDetail .pf-detail-head { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #d9d9d9; }
#pfDetail .pf-detail-head h2 { margin: 0 0 16px; max-width: 644px; font-family: var(--suit); font-size: 40px; font-weight: 700; line-height: 1.4em; letter-spacing: -.02em; color: #1d1d1d; }
#pfDetail .pf-detail-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-family: var(--suit); font-weight: 400; line-height: 1.625em; letter-spacing: -.02em; color: #454545; }
#pfDetail .pf-detail-head .meta span { text-transform: uppercase; }
#pfDetail .pf-detail-head .meta i { font-style: normal; }
#pfDetail .pf-detail-body { display: flex; gap: 60px; align-items: flex-start; }
#pfDetail .pf-detail-body .thumb { width: 45%; }
#pfDetail .pf-detail-body .thumb>div { padding-bottom: 120%; display: block; position: relative; overflow: hidden; border-radius: 32px; }
#pfDetail .pf-detail-body .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
#pfDetail .pf-detail-body .info { width: 55%; }
#pfDetail .pf-detail-body .info dl { display: flex; flex-direction: column; margin: 0 0 40px; padding: 0; }
#pfDetail .pf-detail-body .info dl > div { display: flex; gap: 80px; align-items: center; }
#pfDetail .pf-detail-body .info dt { flex: 0 0 auto; min-width: 4.5em; margin: 0; font-family: var(--suit); font-size: var(--font-size18); font-weight: 700; line-height: 2.555em; letter-spacing: -.02em; color: var(--color-primary); }
#pfDetail .pf-detail-body .info dd { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 2.555em; letter-spacing: -.02em; color: #454545; }
/* 영문 상세(lang=en): 라벨이 국문(4글자)보다 길어 값 세로 정렬이 깨진다 → dt 최소폭만 넓힌다 (국문 화면 영향 없음) */
#pfDetail.lang-en .pf-detail-body .info dt { min-width: 9em; }
#pfDetail .pf-detail-body .desc strong { display: block; margin-bottom: 6px; font-family: var(--suit); font-size: var(--font-size18); font-weight: 700; line-height: 2.555em; letter-spacing: -.02em; color: #505050; }
#pfDetail .pf-detail-body .desc p { margin: 0; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 1.777em; letter-spacing: -.02em; color: #454545; }

/* 반응형 */
@media (max-width: 1024px) {
    .ws-modal-close { width: 26px; height: 26px; top: 10px; right: 10px; }
	#pfDetail .pf-detail-head .meta { gap: 5px; }
	#pfDetail .ws-modal-inner.pf-detail { padding: 30px 18px; border-radius: 20px; padding-top: 50px; }
	#pfDetail .pf-detail > .ws-modal-close { top: 15px; right: 15px; width: 20px; height: 20px; }
	#pfDetail .pf-detail-head h2 { font-size: 28px; line-height: 1.4em; }
	#pfDetail .pf-detail-body { flex-direction: column; gap: 30px; }
	#pfDetail .pf-detail-body .thumb { width: 100%; }
	#pfDetail .pf-detail-body .thumb>div { border-radius: 10px; }
	#pfDetail .pf-detail-body .info { width: 100%; }
	#pfDetail .pf-detail-body .info dl > div { gap: 24px; margin-bottom: 13px; }
	#pfDetail .pf-detail-body .info dl { margin-bottom: 20px; }
}
@media (max-width: 640px) {
	#pfDetail .pf-detail-head { margin-bottom: 24px; padding-bottom: 24px; }
	#pfDetail .pf-detail-head h2 { font-size: 22px; }
	#pfDetail .pf-detail-body .info dl > div { flex-direction: column; align-items: flex-start; gap: 0; }
	#pfDetail .pf-detail-body .info dt,
	#pfDetail .pf-detail-body .info dd { flex: none; width: auto; line-height: 1.6em; }
}
@media (max-width: 420px) {
    .ws-process .col { width: 100%;}
}