/* ==========================================================================
   dot-popup — 이미지 위 도트(클릭) + 설명 팝업. 동작은 js/custom/dot-popup-1.0.0.inpiad.js
   좌표·연결선·카드 위치 값은 페이지별 CSS(_sub-s2.css · _sub-s3a.css)가 변수로 넘긴다.
   변수(모두 1920 폭 기준 px 를 뜻하는 단위 없는 숫자)
     --x --y        도트 중심(이미지 대비 %)
     --cdx --cdy    도트 중심 → 카드 좌상단 거리
     --cw           카드 폭(기본 450)
     --lx --ly      도트 중심 → 연결선 중심 거리 · --len 연결선 길이 · --rot 연결선 각도(deg)
   1401px 이상은 이미지 폭에 비례해 축소(--u), 1400px 이하는 카드를 이미지 아래 흐름 안에 둔다.
   ========================================================================== */
.dp{
	--c-dotpop:#e98fa7;
	--uv:calc(min(100vw, 1920px) / 1920);   /* 1920 기준 1px 이 현재 폭에서 갖는 길이 */
	--u:var(--uv);
	--ud:max(var(--uv), .4px);              /* 도트는 너무 작아지지 않게 하한을 둔다 */
	position:relative;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
}
.dp picture,
.dp picture img{display:block;width:100%;height:auto;}
.dp__visual{
	position:relative;
}

.dp__visual picture,
.dp__visual picture img{
	display:block;
	width:100%;
	height:auto;
}


/* 도트 — 26px 원(흰색 30%) 안에 14px 흰 원. 눌린 상태는 34px #e98fa7 (시안 04_section_popup 도트) */
.dp__dot{
	position:absolute;
	left:var(--x);
	top:var(--y);
	z-index:2;
	width:calc(34 * var(--ud));
	height:calc(34 * var(--ud));
	margin:calc(-17 * var(--ud)) 0 0 calc(-17 * var(--ud));
	padding:0;
	border:0;
	border-radius:50%;
	background:none;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
.dp__dot::before{
	content:"";
	position:absolute;
	inset:calc(4 * var(--ud));
	border-radius:50%;
	background:rgba(255,255,255,.3);
	transition:background-color .3s ease;
	animation:dp-pulse 1.5s ease-in-out infinite;
}
.dp__dot::after{
	content:"";
	position:absolute;
	inset:calc(10 * var(--ud));
	border-radius:50%;
	background:#fff;
}
.dp__dot[aria-expanded="true"]::before{
	background:var(--c-dotpop);
	transform:scale(1.3077);
	animation:none;
}
.dp__dot:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@keyframes dp-pulse{
	0%,100%{transform:scale(1);}
	50%{transform:scale(1.3077);}   /* 26px → 34px */
}

/* 팝업 — 도트 중심을 원점으로 카드·연결선을 놓는다 */
.dp__pops{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.dp__pop{display:none;position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:1;}
.dp__pop.is-open{display:block;animation:dp-in .35s ease-out both;}
@keyframes dp-in{
	from{opacity:0;transform:translateY(14px);}
	to{opacity:1;transform:translateY(0);}
}
.dp__pop::before{
	content:"";
	position:absolute;
	left:calc((var(--lx) - var(--len) / 2) * var(--u));
	top:calc(var(--ly) * var(--u) - 1px);
	width:calc(var(--len) * var(--u));
	height:1px;
	background:url(../images/sub/ico_dotpop_line.svg) 0 0 / 100% 100% no-repeat;
	transform:rotate(calc(var(--rot) * 1deg));
	transform-origin:50% 100%;
}
.dp__card{
	position:absolute;
	left:calc(var(--cdx) * var(--u));
	top:calc(var(--cdy) * var(--u));
	box-sizing:border-box;
	width:calc(var(--cw, 450) * var(--u));
	display:flex;
	flex-direction:column;
	gap:calc(25 * var(--u));
	padding:calc(30 * var(--u));
	border:1px solid var(--c-dotpop);
	border-radius:calc(20 * var(--u));
	background:rgba(255,255,255,.6);
	text-align:left;
}
.dp__ttl{
	display:flex;
	align-items:center;
	gap:calc(10 * var(--u));
	margin:0;
	padding:0 calc(10 * var(--u));
	font-size:calc(22 * var(--u));
	font-weight:600;
	line-height:1.5;
	letter-spacing:-.02em;
	color:var(--c-text-alt,#1e1e1e);
}
.dp__ttl::before{
	content:"";
	flex:0 0 auto;
	width:calc(29 * var(--u));
	height:calc(29 * var(--u));
	background:url(../images/sub/ico_dotpop_star.svg) 0 0 / 100% 100% no-repeat;
}
.dp__txt{
	margin:0;
	padding:0;
	list-style:disc outside;
	font-size:calc(18 * var(--u));
	font-weight:400;
	line-height:1.7;
	letter-spacing:-.02em;
	color:var(--c-text-sub,#666);
}
.dp__txt li{margin-left:calc(27 * var(--u));}

/* 좁은 화면 목록 — 1400px 이하에서는 이미지 위 도트가 24px 미만이라(중심 간격 34.8px → 9.3px)
   도트는 표시만 하고 사진 아래 버튼 목록이 조작을 맡는다. 시안에 없는 구간의 재배치. */
.dp__list{display:none;}
@media (max-width:1400px){
	.dp__dot[data-dot-popup-dot]{
		pointer-events:none;
	}

	.dp__mobile{
		display:flex;
		flex-direction:column;
	}

	.dp__list{
		order:1;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:8px;
		margin:0;
		padding:20px 15px 0;
		list-style:none;
	}

	.dp__item{
		min-width:44px;
		min-height:44px;
		padding:0 20px;
		border:1px solid var(--c-dotpop);
		border-radius:22px;
		background:#fff;
		font-size:16px;
		font-weight:500;
		line-height:1.5;
		letter-spacing:-.02em;
		color:var(--c-text-alt,#1e1e1e);
		cursor:pointer;
	}

	.dp__item[aria-expanded="true"]{
		background:var(--c-dotpop);
		color:#fff;
	}

	.dp__item:focus-visible{
		outline:2px solid var(--c-dotpop);
		outline-offset:2px;
	}

	.dp__pops{
		order:2;
		position:relative;
		width:auto;
		height:auto;
		padding:16px 15px;
		pointer-events:auto;
	}

	.dp__pop{
		position:static;
		width:auto;
		height:auto;
	}

	.dp__pop.is-open{
		display:block;
	}

	.dp__pop::before{
		display:none;
	}

	.dp__card{
		position:static;
		width:auto;
		max-width:450px;
		margin:0 auto;
	}

	.dp__card br{
		display:none;
	}
}
@media (max-width:768px){
	.dp{--u:.85px;}
}
@media (prefers-reduced-motion:reduce){
	.dp__dot::before{animation:none;}
	.dp__pop.is-open{animation:none;}
}


.s3_2 .dp__dot {width: calc(38 * var(--ud)); height: calc(38 * var(--ud))}
.s3_2 .dp__dot::before {inset:calc(2 * var(--ud))}