/* ==========================================================================
   [응답 링크 전송] 다른 기기에서 이어서 응답하기
   응답 화면은 프로젝트마다 스킨·테마색이 달라서, 이 팝업은 어느 스킨 위에서도
   같은 얼굴이 되도록 중립 회색조로 두고 강조는 한 곳(보내기 버튼)에만 쓴다.
   글꼴은 응답 화면 설정을 그대로 물려받고 크기·굵기·자간으로만 위계를 만든다.
   ========================================================================== */
#sendLink,
button.sl-trigger {
	--sl-ink:#16202b;      /* 제목 */
	--sl-body:#5b6b7c;     /* 본문·라벨 */
	--sl-mute:#8a97a4;     /* 보조 설명 */
	--sl-line:#e3e8ee;     /* 경계선 */
	--sl-field:#cfd8e2;    /* 입력칸 테두리 */
	--sl-surface:#f7f9fb;  /* 옅은 바닥 */
	--sl-accent:#2b7cd3;   /* 강조 — 보내기 */
	--sl-ok:#1c8b62;       /* 보냈습니다 */
	--sl-err:#c0392b;
}

/* ----- 상단 버튼 ----- */
button.sl-trigger {
	display:inline-flex;
	align-items:center;
	gap:6px;
	height:32px;
	padding:0 12px;
	border:1px solid var(--sl-field);
	border-radius:16px;
	background:#fff;
	color:var(--sl-ink);
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	letter-spacing:-.01em;
	line-height:1;
	cursor:pointer;
	transition:border-color .15s, box-shadow .15s, background-color .15s;
}
button.sl-trigger:hover {
	border-color:var(--sl-accent);
	background:#f4f9ff;
}
button.sl-trigger:focus-visible {
	outline:2px solid var(--sl-accent);
	outline-offset:2px;
}
button.sl-trigger svg {
	width:15px;
	height:15px;
	fill:none;
	stroke:var(--sl-accent);
	stroke-width:1.6;
	stroke-linecap:round;
	stroke-linejoin:round;
}
/* 눌린 요소 자체로 핸들러를 찾으므로(Survey.on) 버튼 속 아이콘·글자는 클릭을 받지 않는다 */
button.sl-trigger > * { pointer-events:none; }

/* ----- 팝업 ----- */
#sendLink.modal {
	box-sizing:border-box;
	width:92%;
	max-width:380px;
	padding:22px 22px 18px;
	border-radius:14px;
	background:#fff;
	color:var(--sl-body);
	font-size:13px;
	line-height:1.6;
}
#sendLink .sl-head { margin-bottom:16px; }
#sendLink .sl-title {
	color:var(--sl-ink);
	font-size:17px;
	font-weight:700;
	letter-spacing:-.02em;
	line-height:1.35;
}
#sendLink .sl-desc {
	margin-top:5px;
	color:var(--sl-body);
	font-size:12.5px;
	white-space:pre-line;
}

/* ----- QR — 이 팝업에서 가장 빠른 길이라 유일하게 크게 둔다 ----- */
#sendLink .sl-qr { text-align:center; }
#sendLink .sl-qr-frame {
	position:relative;
	display:inline-block;
	padding:14px;
}
/* 카메라 뷰파인더처럼 네 귀퉁이만 — 코드를 가리지 않고 "찍는 것"임을 알린다 */
#sendLink .sl-corner {
	position:absolute;
	width:14px;
	height:14px;
	border:2px solid var(--sl-accent);
	border-radius:2px;
}
#sendLink .sl-corner.tl { top:0; left:0; border-right:0; border-bottom:0; }
#sendLink .sl-corner.tr { top:0; right:0; border-left:0; border-bottom:0; }
#sendLink .sl-corner.bl { bottom:0; left:0; border-right:0; border-top:0; }
#sendLink .sl-corner.br { bottom:0; right:0; border-left:0; border-top:0; }
#sendLink .sl-qr-box {
	display:flex;
	align-items:center;
	justify-content:center;
	width:168px;
	height:168px;
	background:#fff;
}
#sendLink .sl-qr-box img,
#sendLink .sl-qr-box canvas { display:block; width:168px; height:168px; }
/* 코드가 그려지기 전 자리 — 화면이 덜컥거리지 않게 같은 크기로 비워둔다 */
#sendLink .sl-qr-box:empty {
	border-radius:6px;
	background:var(--sl-surface);
}
#sendLink .sl-qr-hint {
	margin-top:2px;
	color:var(--sl-mute);
	font-size:12px;
}

/* ----- 구분 ----- */
#sendLink .sl-or {
	display:flex;
	align-items:center;
	gap:10px;
	margin:16px 0 14px;
	color:var(--sl-mute);
	font-size:11.5px;
	letter-spacing:.02em;
}
#sendLink .sl-or:before,
#sendLink .sl-or:after {
	content:"";
	flex:1 1 auto;
	height:1px;
	background:var(--sl-line);
}

/* ----- 이메일·문자 한 줄 ----- */
#sendLink .sl-row + .sl-row { margin-top:12px; }
#sendLink .sl-row-label {
	display:flex;
	align-items:center;
	gap:5px;
	margin-bottom:5px;
	color:var(--sl-body);
	font-size:12px;
	font-weight:600;
}
#sendLink .sl-row-label svg {
	width:14px;
	height:14px;
	fill:none;
	stroke:var(--sl-mute);
	stroke-width:1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
}
#sendLink .sl-row-field { display:flex; gap:6px; }
#sendLink input.sl-input {
	box-sizing:border-box;
	flex:1 1 auto;
	min-width:0;
	height:42px;
	padding:0 12px;
	border:1px solid var(--sl-field);
	border-radius:8px;
	background:#fff;
	color:var(--sl-ink);
	font-family:inherit;
	font-size:16px;      /* 16px 아래로 내려가면 iOS 가 입력할 때 화면을 확대한다 */
	line-height:normal;
	transition:border-color .15s, box-shadow .15s;
}
#sendLink input.sl-input::placeholder { color:#a9b4c0; }
#sendLink input.sl-input:focus {
	outline:none;
	border-color:var(--sl-accent);
	box-shadow:0 0 0 3px rgba(43,124,211,.14);
}
#sendLink button.sl-send {
	flex:0 0 auto;
	min-width:64px;
	height:42px;
	padding:0 14px;
	border:0;
	border-radius:8px;
	background:var(--sl-accent);
	color:#fff;
	font-family:inherit;
	font-size:13.5px;
	font-weight:600;
	letter-spacing:-.01em;
	cursor:pointer;
	transition:background-color .15s, opacity .15s;
}
#sendLink button.sl-send:hover { background:#2569b4; }
#sendLink button.sl-send:focus-visible { outline:2px solid var(--sl-ink); outline-offset:2px; }
#sendLink button.sl-send[disabled] { opacity:.45; cursor:default; }
/* 보낸 뒤 — 버튼 자리에서 바로 결과를 알린다(토스트를 찾아 눈을 옮기지 않게) */
#sendLink button.sl-send.is-sent {
	background:var(--sl-surface);
	color:var(--sl-ok);
	box-shadow:inset 0 0 0 1px var(--sl-line);
}
#sendLink .sl-row-msg {
	margin-top:4px;
	min-height:0;
	font-size:11.5px;
	line-height:1.5;
}
#sendLink .sl-row-msg.is-err { color:var(--sl-err); }
#sendLink .sl-row-msg.is-ok { color:var(--sl-ok); }

/* ----- 아래 버튼들 ----- */
#sendLink .sl-foot {
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:18px;
	padding-top:14px;
	border-top:1px solid var(--sl-line);
}
#sendLink button.sl-close {
	flex:0 0 auto;
	height:38px;
	padding:0 14px;
	border:1px solid var(--sl-field);
	border-radius:8px;
	background:#fff;
	color:var(--sl-body);
	font-family:inherit;
	font-size:13px;
	cursor:pointer;
}
#sendLink button.sl-close:hover { background:var(--sl-surface); }
#sendLink button.sl-lock {
	flex:1 1 auto;
	height:38px;
	padding:0 12px;
	border:1px solid var(--sl-field);
	border-radius:8px;
	background:#fff;
	color:var(--sl-ink);
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	transition:border-color .15s, background-color .15s;
}
#sendLink button.sl-lock:hover { border-color:var(--sl-ink); background:var(--sl-surface); }
/* 링크를 실제로 보낸 뒤에는 이 버튼이 다음 할 일이 된다 */
#sendLink button.sl-lock.is-ready {
	border-color:var(--sl-ink);
	background:var(--sl-ink);
	color:#fff;
}
#sendLink button.sl-lock.is-ready:hover { background:#0d1720; }

/* jquery.modal 의 기본 닫기(×) — 팝업 안에 [닫기] 가 따로 있어 겹쳐 보인다 */
#sendLink a.close-modal { display:none; }

/* 링크를 보낸 뒤 이 기기를 덮는 안내 (blockUI) */
.send-link-lock-msg {
	font-size:15px;
	font-weight:600;
	line-height:1.6;
	text-align:center;
	letter-spacing:-.01em;
}

@media (max-width:430px) {
	#sendLink.modal { padding:18px 16px 14px; }
	#sendLink .sl-qr-box,
	#sendLink .sl-qr-box img,
	#sendLink .sl-qr-box canvas { width:150px; height:150px; }
}
/* 움직임을 줄여달라는 설정을 존중한다 */
@media (prefers-reduced-motion:reduce) {
	button.sl-trigger,
	#sendLink input.sl-input,
	#sendLink button.sl-send,
	#sendLink button.sl-lock { transition:none; }
}