@charset "utf-8";
/* ==========================================================================
   sp_modal.css  —  사이트 공통 모달 (spModalOpen)
   · 619px 이하 : 화면 아래에서 올라오는 하단 시트 (아래로 끌어서 닫기)
   · 620px 이상 : 화면 가운데 다이얼로그. 내용이 길면 모달이 내용만큼 길어지고
                  어두운 배경째로 스크롤됨 (닫기 버튼 줄은 위에 붙어 따라옴)
   · 모달 안에서 다시 열면 그 위에 겹쳐 뜸 (.spm 이 하나씩 추가됨)
   · sp_modal.js 와 함께 사용 (권장 위치: /_styles/sp_modal.css)
   · 사이트 공통 CSS가 *{font-size; color} 를 지정하므로 모든 요소에 직접 값을 줌
   ========================================================================== */

/* 뒤 페이지 스크롤 막기는 sp_modal.js 가 처리 (스크롤 위치·폭은 그대로 두므로 메뉴 등 고정 요소에 영향 없음) */

.spm{
	position:fixed; top:0; right:0; bottom:0; left:0;
	z-index:2147483647;          /* 가장 큰 값. 겹쳐 뜨는 모달은 나중에 연 것이 위 */
	display:none;
	align-items:flex-end; justify-content:center;
	-webkit-tap-highlight-color:transparent;
}
.spm.is-mounted{display:flex;}

.spm-backdrop{
	position:absolute; top:0; right:0; bottom:0; left:0;
	background:rgba(0, 0, 0, 0.5);
	opacity:0;
	transition:opacity .28s ease;
}
.spm.is-open .spm-backdrop{opacity:1;}
/* 모달 위에 겹쳐 뜬 모달 : 배경이 이미 어두우므로 한 겹은 조금 옅게 */
.spm.is-stacked .spm-backdrop{background:rgba(0,0,0,.3);}

/* ---------- 시트 (모바일 기본) ---------- */
.spm-sheet{
	position:relative;
	display:flex; flex-direction:column;
	width:100%;
	max-height:92vh;
	max-height:92dvh;
	background:#fff;
	border-radius:20px 20px 0 0;
	box-shadow:0 -8px 40px rgba(9,17,35,.22);
	transform:translateY(100%);
	transition:transform .34s cubic-bezier(.32,.72,0,1);
	will-change:transform;
	outline:0;
	margin:0; padding:0;
	box-sizing:border-box;
}
.spm.is-open .spm-sheet{transform:translateY(0);}
.spm-sheet.is-dragging{transition:none;}

.spm-head{
	position:relative;
	flex:none;
	height:52px;
	touch-action:none;          /* 머리 부분을 잡고 끌어내릴 수 있게 */
	-webkit-user-select:none; user-select:none;
}
.spm-handle{
	position:absolute; top:9px; left:50%;
	width:40px; height:4px; margin-left:-20px;
	border-radius:4px;
	background:#d3d8e2;
}
.spm-close{
	position:absolute; top:6px; right:10px;
	width:44px; height:44px;     /* 터치 영역 44px 확보 */
	display:flex; align-items:center; justify-content:center;
	margin:0; padding:0;
	border:0; border-radius:50%;
	background:transparent;
	cursor:pointer;
	-webkit-appearance:none; appearance:none;
}
.spm-close span{
	display:flex; align-items:center; justify-content:center;
	width:34px; height:34px;
	border-radius:50%;
	background:#eef1f6;
	transition:background .15s ease;
}
.spm-close svg{display:block; width:16px; height:16px;}
.spm-close svg path{stroke:#1b2a4a; stroke-width:2; stroke-linecap:round; fill:none;}
.spm-close:hover span,
.spm-close:active span{background:#dfe4ee;}
.spm-close:focus-visible{outline:2px solid #204c92; outline-offset:-4px;}

.spm-body{
	flex:1 1 auto;
	min-height:120px;
	overflow-x:hidden; overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	padding:4px 20px 28px;
	padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
	box-sizing:border-box;
}

/* 로딩 / 오류 */
.spm-msg{padding:44px 0 56px; text-align:center; font-size:15px; line-height:1.6; color:#667085;}
.spm-spinner{
	display:block; width:28px; height:28px; margin:48px auto 60px;
	border:3px solid #e3e7ef; border-top-color:#204c92; border-radius:50%;
	animation:spm-spin .7s linear infinite;
	box-sizing:border-box;
}
@keyframes spm-spin{to{transform:rotate(360deg);}}

/* ---------- 기존 팝업 조각(pop1.html 등)을 수정 없이 넣어도 맞도록 보정 ---------- */
.spm-body #custom-content{max-width:none !important; margin:0 !important; background:transparent !important;}
.spm-body .modal_wrap{padding:0;}
.spm-body #custom-content > .clearfix:last-child{display:none;}
.spm-body img{max-width:100%; height:auto;}

/* 공통 CSS의 초기화(*{margin:0;padding:0})가 적용되지 않는 화면 폭에서도 같은 모양이 되도록 직접 초기화 */
.spm-body #lay2_7 ul,
.spm-body #lay2_7 ul li{margin:0; padding:0; list-style:none;}
/* 사이트 CSS의 #lay2_7 ul li.l2:last-child{width:57%} 보다 항상 우선하도록 .spm 을 한 번 더 붙임(불러오는 순서와 무관) */
.spm .spm-body #lay2_7 ul li.l2{float:none; width:auto; margin:0;}
.spm-body #lay2_7 ul li.l2 img{
	display:block; width:132px; max-width:42%; margin:0 0 16px;
	border-radius:12px; background:#f0f0f0;
}
.spm-body .pop_sp_name{line-height:1.35; word-break:keep-all;}
.spm-body .pop_sp_dept{line-height:1.45; word-break:keep-all; padding-bottom:18px;}
.spm-body .pop_sp_txt{line-height:1.7; word-break:keep-all; overflow-wrap:anywhere;}

/* 연사 프로필 구조(사진 li + 이름/소속/소개 li)일 때 : 사진 옆에 이름·소속, 아래에 소개글 */
.spm-body #lay2_7 ul.spm-profile{
	display:grid;
	grid-template-columns:104px minmax(0,1fr);
	column-gap:16px;
	align-items:start;
}
.spm-body #lay2_7 ul.spm-profile > li:first-child{grid-column:1; grid-row:1 / span 2;}
.spm-body #lay2_7 ul.spm-profile > li:first-child img{width:100%; max-width:none; margin:0;}
.spm-body #lay2_7 ul.spm-profile > li:last-child{display:contents;}
.spm-body #lay2_7 ul.spm-profile .pop_sp_name{grid-column:2; grid-row:1; align-self:end;}
.spm-body #lay2_7 ul.spm-profile .pop_sp_dept{grid-column:2; grid-row:2; align-self:start; padding:4px 0 0;}
.spm-body #lay2_7 ul.spm-profile .pop_sp_txt{
	grid-column:1 / -1; grid-row:3;
	margin-top:20px; padding-top:20px;
	border-top:1px solid #e6e9ef;
}

/* ---------- 620px 이상 : 가운데 다이얼로그 ---------- */
@media (min-width:620px){
	/* 스크롤은 모달 안이 아니라 바깥(.spm)에서 : 모달은 내용 길이만큼 길어짐 */
	.spm{
		flex-direction:column; align-items:center; justify-content:flex-start;
		padding:0 24px; box-sizing:border-box;
		overflow-x:hidden; overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior:contain;
	}
	/* 위아래 여백(최소 24px). 내용이 짧으면 똑같이 늘어나 모달을 화면 가운데에 둠.
	   (.spm 에 위아래 padding 을 주면 닫기 버튼 줄이 그만큼 떠서 붙으므로 이 방식 사용) */
	.spm::before, .spm::after{content:""; display:block; flex:1 0 24px;}
	.spm-backdrop{position:fixed;}
	.spm-sheet{
		width:100%; max-width:var(--spm-width, 800px);   /* 폭: spModalOpen(url,{width:600}) 또는 조각의 max-width */
		flex:none;
		max-height:none;
		will-change:auto;
		border-radius:18px;
		box-shadow:0 24px 70px rgba(9,17,35,.35);
		opacity:0;
		transform:translateY(18px) scale(.985);
		transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
	}
	.spm.is-open .spm-sheet{opacity:1; transform:none;}
	/* 닫기 버튼 줄 : 스크롤해도 화면 위에 붙어 따라옴 */
	.spm-head{
		position:-webkit-sticky; position:sticky; top:0; z-index:2;
		height:56px; touch-action:auto;
		background:#fff;
		border-radius:18px 18px 0 0;
	}
	.spm-handle{display:none;}
	.spm-close{top:8px; right:10px;}
	.spm-body{flex:none; min-height:0; overflow:visible; padding:0 32px 36px;}

	.spm-body #lay2_7 ul.spm-profile{
		grid-template-columns:minmax(0,34%) minmax(0,1fr);
		column-gap:32px;
	}
	.spm-body #lay2_7 ul.spm-profile > li:first-child{grid-row:1;}
	.spm-body #lay2_7 ul.spm-profile > li:first-child img{border-radius:14px;}
	.spm-body #lay2_7 ul.spm-profile > li:last-child{display:block; grid-column:2; grid-row:1;}
	.spm-body #lay2_7 ul.spm-profile .pop_sp_dept{padding:4px 0 22px;}
	.spm-body #lay2_7 ul.spm-profile .pop_sp_txt{margin-top:0; padding-top:0; border-top:0;}
}
@media (min-width:1201px){
	.spm-body{padding:0 44px 44px;}
	.spm-body #lay2_7 ul.spm-profile{column-gap:40px;}
}

@media (prefers-reduced-motion:reduce){
	.spm-backdrop, .spm-sheet{transition-duration:.01s;}
	.spm-spinner{animation-duration:1.6s;}
}