@charset "utf-8";
/* =========================================================
 * partner/style.css — 제이에프 파트너 전용
 *
 *  - 접두사 .jp- 안에서만 손댄다. 사이트 공통 CSS 는 건드리지 않는다.
 *  - 색·글꼴·모서리는 회원가입 화면(s_source/member/member.css)을 따른다.
 *      파랑 #2e78d3 · 제목 #174f89 · 테두리 #d8e5f2 · 연한 바탕 #f5f9fe
 * =======================================================*/

.jp-hero,
.jp-panel,
.jp-who,
.jp-apply,
.jp-done,
.jp-flash { box-sizing:border-box; }

.jp-hero *,
.jp-panel *,
.jp-who *,
.jp-apply *,
.jp-done *,
.jp-flash * { box-sizing:border-box; }

.jp-hero h3, .jp-hero h4, .jp-hero p,
.jp-panel h3, .jp-panel h4, .jp-panel p,
.jp-who h3, .jp-who p,
.jp-apply h3, .jp-apply h4, .jp-apply p,
.jp-done h3, .jp-done h4, .jp-done p,
.jp-flash p { margin:0; }

.jp-who ul, .jp-apply ol, .jp-apply dl,
.jp-done ol { margin:0; padding:0; list-style:none; }

/* 눈에는 안 보이지만 화면낭독기는 읽는 글 */
.jp-sr {
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

/* 브라우저가 알아서 칠하는 자리도 이 화면의 색으로 맞춘다 */
.jp-hero ::selection,
.jp-panel ::selection,
.jp-who ::selection,
.jp-apply ::selection { background:#cfe1f7; color:#12395f; }

.jp-hero :focus-visible,
.jp-panel :focus-visible,
.jp-who :focus-visible,
.jp-apply :focus-visible,
.jp-done :focus-visible { outline:2px solid #2e78d3; outline-offset:2px; }

/* ---------------------------------------------------------
 * 안내 띠
 * -------------------------------------------------------*/
.jp-flash {
	margin:0 0 16px;
	padding:18px 22px;
	border:1px solid #d8e5f2;
	border-radius:8px;
	background:#f5f9fe;
	word-break:keep-all;
}
.jp-flash strong { display:block; font-size:17px; color:#174f89; }
.jp-flash p { margin-top:6px; font-size:15px; line-height:1.6; color:#4d6376; }
.jp-flash a { color:#2e78d3; font-weight:700; }
.jp-flash-ok { border-color:#bcdcc4; background:#f3fbf5; }
.jp-flash-ok strong { color:#1f6b3a; }
.jp-flash-wait { border-color:#e7d7ae; background:#fdfaf1; }
.jp-flash-wait strong { color:#8a6420; }
.jp-flash-err { border-color:#e8c4c4; background:#fdf5f5; }
.jp-flash-err strong { color:#a62d2d; }

/* ---------------------------------------------------------
 * 첫 화면 — 왼쪽 선언, 오른쪽 증거
 * -------------------------------------------------------*/
.jp-hero {
	display:grid;
	grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
	column-gap:40px;
	align-items:center;
	padding:48px 44px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
	box-shadow:0 5px 18px rgba(41,81,123,.07);
}

.jp-hero-say { min-width:0; }

.jp-h1 {
	font-size:40px;
	line-height:1.26;
	letter-spacing:-0.035em;
	font-weight:700;
	color:#12395f;
	word-break:keep-all;
}
.jp-lead {
	max-width:30em;
	margin-top:18px !important;
	font-size:17px;
	line-height:1.72;
	color:#4d6376;
	word-break:keep-all;
}
.jp-lead b { color:#174f89; font-weight:700; }

.jp-hero-act { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

.jp-btn {
	display:inline-block;
	border-radius:6px;
	text-align:center;
	text-decoration:none;
	letter-spacing:-0.03em;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.jp-btn-go {
	min-width:190px;
	height:54px;
	padding:0 26px;
	line-height:54px;
	background:#2e78d3;
	border:1px solid #2e78d3;
	color:#fff;
	font-size:18px;
	font-weight:700;
}
.jp-btn-go:link, .jp-btn-go:visited { color:#fff; }
.jp-btn-go:hover, .jp-btn-go:focus { background:#1f5fae; border-color:#1f5fae; color:#fff; }

.jp-btn-tel {
	height:54px;
	padding:7px 22px;
	border:1px solid #cfdced;
	background:#fff;
	color:#174f89;
	line-height:1.25;
}
.jp-btn-tel:link, .jp-btn-tel:visited { color:#174f89; }
.jp-btn-tel span { display:block; font-size:12px; color:#5b6f83; }
.jp-btn-tel b { display:block; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.jp-btn-tel:hover, .jp-btn-tel:focus { border-color:#2e78d3; color:#2e78d3; }
.jp-btn-tel:hover b, .jp-btn-tel:focus b { color:#2e78d3; }

.jp-hero-note { margin-top:16px !important; font-size:15px; color:#5b6f83; }

/* ----- 증거 : 브라우저 창 ----- */
.jp-hero-proof { min-width:0; }

.jp-screen {
	border:1px solid #cfdced;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 14px 34px rgba(24,57,95,.13);
	animation:jp-rise .76s cubic-bezier(.16,1,.3,1) both;
}

/* 이 화면의 단 한 번의 움직임 — 증거 패널이 한 번 떠오른다 */
@keyframes jp-rise {
	from { transform:translateY(18px); box-shadow:0 4px 12px rgba(24,57,95,.05); }
	to   { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
	.jp-screen { animation:none; }
}
.jp-screen-bar {
	display:flex;
	align-items:center;
	gap:6px;
	height:36px;
	padding:0 14px;
	background:#eef3f9;
	border-bottom:1px solid #dde6f0;
}
.jp-screen-bar i { width:9px; height:9px; border-radius:50%; background:#cfd9e4; }
.jp-screen-url {
	flex:1;
	margin-left:8px;
	padding:3px 10px;
	border-radius:20px;
	background:#fff;
	font-size:11px;
	color:#5b6f83;
	letter-spacing:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.jp-screen-body { padding:16px 16px 14px; }

.jp-screen-head {
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	padding-bottom:12px;
	border-bottom:1px solid #edf1f6;
}
.jp-screen-head b { font-size:15px; color:#174f89; letter-spacing:-0.03em; }
.jp-screen-head span { font-size:12px; color:#5b6f83; white-space:nowrap; }

.jp-screen-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	padding:14px 0 0;
}
.jp-screen-card {
	min-width:0;
	padding:8px;
	border:1px solid #e6edf5;
	border-radius:7px;
	background:#fff;
}
.jp-screen-thumb {
	position:relative;
	padding-top:100%;
	border-radius:5px;
	background:#f5f8fc center/contain no-repeat;
}
.jp-screen-name {
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	margin-top:8px !important;
	height:2.7em;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:12px;
	line-height:1.35;
	color:#42566a;
	word-break:keep-all;
}
.jp-screen-price { margin-top:4px !important; }

/*
 * 가려진 금액.
 * 움직이면 "아직 불러오는 중"으로 읽히므로 빗금은 가만히 둔다.
 * 일부러 가려 둔 자리라는 뜻이다.
 */
.jp-mask {
	display:block;
	width:72%;
	height:15px;
	border-radius:3px;
	background-image:repeating-linear-gradient(
		-45deg,
		#c8d6e6 0, #c8d6e6 4px,
		#e7eef6 4px, #e7eef6 8px
	);
}

.jp-screen-card-empty {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:120px;
	color:#b3c1cf;
	font-size:12px;
}

.jp-screen-foot {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:14px;
	padding-top:12px;
	border-top:1px dashed #dde6f0;
}
.jp-screen-cart { font-size:12px; color:#5b6f83; }
.jp-screen-cart b { color:#174f89; }
.jp-screen-quote {
	padding:7px 14px;
	border-radius:5px;
	background:#2e78d3;
	color:#fff;
	font-size:12px;
	font-weight:700;
}

.jp-proof-cap {
	margin-top:14px !important;
	font-size:15px;
	line-height:1.6;
	color:#5b6f83;
	text-align:center;
	word-break:keep-all;
}
.jp-proof-cap b { color:#2b4258; }

/* ---------------------------------------------------------
 * 제목 (본문 구역 공통)
 * -------------------------------------------------------*/
.jp-h2 {
	font-size:24px;
	line-height:1.35;
	letter-spacing:-0.035em;
	font-weight:700;
	color:#174f89;
	word-break:keep-all;
}

/* ---------------------------------------------------------
 * 승인되면 이렇게 씁니다
 * -------------------------------------------------------*/
.jp-panel {
	margin-top:20px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
}
.jp-does { padding:36px 40px 34px; }
.jp-does-list {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;
	margin-top:24px;
}
.jp-does-item { min-width:0; }

/* 실제 화면 조각 (금액은 찍을 때 가려 두었다). 누르면 크게 본다 */
.jp-shot {
	position:relative;
	display:block;
	margin-bottom:15px;
	border:1px solid #dde7f2;
	border-radius:8px;
	overflow:hidden;
	background:#fff;
	cursor:zoom-in;
}
.jp-shot img {
	display:block;
	width:100%;
	height:auto;
	transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.jp-shot:hover img, .jp-shot:focus-visible img { transform:scale(1.03); }
.jp-shot:after {
	content:"";
	position:absolute;
	right:8px; bottom:8px;
	width:28px; height:28px;
	border-radius:6px;
	background:rgba(18,57,95,.62) center/15px 15px no-repeat;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14M5 7h4M7 5v4'/%3E%3C/svg%3E");
	opacity:0;
	transition:opacity .2s ease;
}
.jp-shot:hover:after, .jp-shot:focus-visible:after { opacity:1; }
@media (prefers-reduced-motion: reduce) {
	.jp-shot img { transition:none; }
	.jp-shot:hover img { transform:none; }
}

/* 크게 보기 */
.jp-lb {
	position:fixed;
	left:0; top:0; right:0; bottom:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(14,32,52,.82);
}
.jp-lb-box { max-width:100%; max-height:100%; text-align:center; }
.jp-lb-box img {
	display:block;
	max-width:100%;
	max-height:calc(100vh - 132px);
	margin:0 auto;
	border-radius:8px;
	background:#fff;
	box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.jp-lb-cap {
	max-width:760px;
	margin:14px auto 0;
	font-size:15px;
	line-height:1.6;
	color:#e6eef7;
	word-break:keep-all;
}
.jp-lb-close {
	position:absolute;
	right:16px; top:16px;
	width:44px; height:44px;
	border:1px solid rgba(255,255,255,.4);
	border-radius:8px;
	background:rgba(255,255,255,.08);
	color:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
}
.jp-lb-close:hover, .jp-lb-close:focus { background:rgba(255,255,255,.2); }
.jp-does-item h4 {
	font-size:17px;
	font-weight:700;
	color:#1f3f5e;
	letter-spacing:-0.03em;
	word-break:keep-all;
}
.jp-does-item p {
	margin-top:8px !important;
	font-size:15px;
	line-height:1.7;
	color:#5b6f83;
	word-break:keep-all;
}

/* ---------------------------------------------------------
 * 이런 곳이 씁니다
 * -------------------------------------------------------*/
.jp-who {
	margin-top:20px;
	padding:32px 40px 34px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#f5f9fe;
}
.jp-who-list {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;
	margin-top:22px !important;
}
.jp-who-list li { min-width:0; }
.jp-who-list b {
	display:block;
	font-size:17px;
	font-weight:700;
	color:#174f89;
	letter-spacing:-0.03em;
}
.jp-who-list .desc {
	display:block;
	margin-top:7px;
	font-size:15px;
	line-height:1.6;
	color:#5b6f83;
	word-break:keep-all;
}
.jp-who-note { margin-top:20px !important; font-size:15px; color:#5b6f83; }
.jp-who-note a { color:#2e78d3; font-weight:700; }

/* ---------------------------------------------------------
 * 신청서
 * -------------------------------------------------------*/
.jp-apply { margin-top:20px; }

.jp-form {
	display:grid;
	grid-template-columns:minmax(0,1fr) 330px;
	gap:20px;
	align-items:start;
}

.jp-form-main {
	min-width:0;
	padding:36px 40px 40px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
}
.jp-form-sub { margin-top:8px !important; font-size:15px; color:#5b6f83; }

.jp-field { margin-top:20px; }
.jp-grid2 {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:0 18px;
}
.jp-grid2 .jp-field { min-width:0; }

.jp-label {
	display:block;
	margin-bottom:8px;
	font-size:15px;
	font-weight:700;
	color:#2b4258;
	letter-spacing:-0.03em;
}
.jp-req {
	display:inline-block;
	margin-left:5px;
	padding:2px 6px;
	border-radius:3px;
	background:#eaf2fc;
	color:#2e78d3;
	font-size:11px;
	font-weight:700;
	vertical-align:1px;
}

.jp-apply input[type="text"],
.jp-apply input[type="tel"],
.jp-apply input[type="email"],
.jp-apply select,
.jp-apply textarea {
	width:100%;
	padding:0 13px;
	height:48px;
	border:1px solid #cfdced;
	border-radius:6px;
	background:#fff;
	font-family:inherit;
	font-size:15px;
	color:#1f2d3d;
	letter-spacing:-0.02em;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.jp-apply textarea {
	height:auto;
	padding:12px 13px;
	line-height:1.65;
	resize:vertical;
}
.jp-apply input::placeholder,
.jp-apply textarea::placeholder { color:#6b7f92; }
.jp-apply input:focus,
.jp-apply select:focus,
.jp-apply textarea:focus {
	border-color:#2e78d3;
	box-shadow:0 0 0 3px rgba(46,120,211,.16);
	outline:none;
}
.jp-apply input.is-bad,
.jp-apply select.is-bad,
.jp-apply textarea.is-bad {
	border-color:#d16a6a;
	background:#fdf6f6;
}

.jp-help { margin-top:7px !important; font-size:15px; color:#5b6f83; }

/* 빠진 칸 안내 — 알림창 대신 그 칸 아래에 적는다 */
.jp-err {
	display:flex;
	gap:6px;
	margin-top:7px !important;
	font-size:15px;
	line-height:1.5;
	color:#b23b3b;
	word-break:keep-all;
}
.jp-err:before {
	content:"!";
	flex:0 0 auto;
	width:18px; height:18px;
	margin-top:2px;
	border-radius:50%;
	background:#b23b3b;
	color:#fff;
	font-size:12px;
	font-weight:700;
	line-height:18px;
	text-align:center;
}

/* 어떤 곳인가요 */
.jp-kinds { display:flex; flex-wrap:wrap; gap:8px; }
.jp-kind { display:inline-block; margin:0; cursor:pointer; }
.jp-kind input {
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	border:0;
}
.jp-kind span {
	display:inline-block;
	padding:11px 18px;
	border:1px solid #cfdced;
	border-radius:6px;
	background:#fff;
	font-size:15px;
	color:#4d6376;
	letter-spacing:-0.03em;
	transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.jp-kind:hover span { border-color:#2e78d3; color:#2e78d3; }
.jp-kind input:checked + span {
	background:#2e78d3;
	border-color:#2e78d3;
	color:#fff;
	font-weight:700;
}
.jp-kind input:focus-visible + span { outline:2px solid #2e78d3; outline-offset:2px; }

/* 동의 */
.jp-agree {
	display:flex;
	gap:11px;
	margin-top:26px;
	padding:18px 20px;
	border:1px solid #dce7f3;
	border-radius:8px;
	background:#f7fafd;
}
.jp-agree.is-bad { border-color:#d16a6a; background:#fdf6f6; }
.jp-agree input { width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; }
.jp-agree label { cursor:pointer; }
.jp-agree b {
	display:block;
	font-size:15px;
	font-weight:700;
	color:#2b4258;
	letter-spacing:-0.03em;
}
.jp-agree span {
	display:block;
	margin-top:6px;
	font-size:15px;
	line-height:1.65;
	color:#5b6f83;
	word-break:keep-all;
}

.jp-submit { margin-top:26px; }
.jp-btn-send {
	width:100%;
	max-width:320px;
	height:56px;
	border:1px solid #2e78d3;
	border-radius:6px;
	background:#2e78d3;
	color:#fff;
	font-family:inherit;
	font-size:18px;
	font-weight:700;
	letter-spacing:-0.03em;
	cursor:pointer;
	transition:background-color .18s ease, border-color .18s ease;
}
.jp-btn-send:hover, .jp-btn-send:focus { background:#1f5fae; border-color:#1f5fae; }
.jp-btn-send[disabled] {
	background:#9db8d8;
	border-color:#9db8d8;
	cursor:default;
}
.jp-submit-note { margin-top:12px !important; font-size:15px; color:#5b6f83; }

/* ----- 옆 칸 ----- */
.jp-form-side { min-width:0; display:flex; flex-direction:column; gap:14px; }
.jp-side-box {
	padding:24px 24px 26px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
}
.jp-side-box h4 {
	font-size:16px;
	font-weight:700;
	color:#174f89;
	letter-spacing:-0.03em;
}

.jp-steps { margin-top:16px !important; counter-reset:jpstep; }
.jp-steps li {
	position:relative;
	padding:0 0 16px 30px;
	counter-increment:jpstep;
}
.jp-steps li:before {
	content:counter(jpstep);
	position:absolute;
	left:0; top:1px;
	width:20px; height:20px;
	border-radius:50%;
	background:#eaf2fc;
	color:#2e78d3;
	font-size:12px;
	font-weight:700;
	line-height:20px;
	text-align:center;
}
.jp-steps li:after {
	content:"";
	position:absolute;
	left:9px; top:25px; bottom:4px;
	width:1px;
	background:#e3ebf4;
}
.jp-steps li:last-child { padding-bottom:0; }
.jp-steps li:last-child:after { display:none; }
.jp-steps b { display:block; font-size:15px; color:#2b4258; letter-spacing:-0.03em; }
.jp-steps span { display:block; margin-top:4px; font-size:15px; line-height:1.6; color:#5b6f83; word-break:keep-all; }

.jp-faq { margin-top:16px !important; }
.jp-faq dt {
	font-size:15px;
	font-weight:700;
	color:#2b4258;
	letter-spacing:-0.03em;
}
.jp-faq dd {
	margin:5px 0 15px;
	font-size:15px;
	line-height:1.65;
	color:#5b6f83;
	word-break:keep-all;
}
.jp-faq dd:last-child { margin-bottom:0; }

.jp-side-call { background:#f5f9fe; }
.jp-side-tel {
	display:block;
	margin-top:12px;
	font-size:27px;
	font-weight:700;
	color:#174f89;
	letter-spacing:-0.02em;
	font-variant-numeric:tabular-nums;
	text-decoration:none;
}
.jp-side-tel:link, .jp-side-tel:visited { color:#174f89; }
.jp-side-tel:hover, .jp-side-tel:focus { color:#2e78d3; }
.jp-side-call p { margin-top:8px !important; font-size:15px; line-height:1.6; color:#5b6f83; }
.jp-side-kakao {
	display:block;
	margin-top:16px;
	height:44px;
	border-radius:6px;
	background:#fae100;
	color:#3c1e1e;
	font-size:15px;
	font-weight:700;
	line-height:44px;
	text-align:center;
	text-decoration:none;
	letter-spacing:-0.03em;
}
.jp-side-kakao:link, .jp-side-kakao:visited { color:#3c1e1e; }
.jp-side-kakao:hover, .jp-side-kakao:focus { background:#ecd400; }

/* ---------------------------------------------------------
 * 신청 완료 화면 (done.php)
 * -------------------------------------------------------*/
.jp-done-head {
	padding:44px 40px 40px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
	box-shadow:0 5px 18px rgba(41,81,123,.07);
	text-align:center;
}
.jp-done-mark {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:62px; height:62px;
	margin-bottom:20px;
	border-radius:50%;
	background:#e8f5ec;
	color:#1f6b3a;
}
.jp-done-head .jp-h1 { font-size:32px; }
.jp-done-lead {
	margin-top:16px !important;
	font-size:17px;
	line-height:1.7;
	color:#4d6376;
	word-break:keep-all;
}
.jp-done-lead b { color:#174f89; font-variant-numeric:tabular-nums; }
.jp-done-no {
	display:inline-block;
	margin-top:20px !important;
	padding:9px 18px;
	border:1px solid #d8e5f2;
	border-radius:20px;
	background:#f5f9fe;
	font-size:15px;
	color:#5b6f83;
}
.jp-done-no b { color:#174f89; font-size:17px; letter-spacing:0.02em; }

.jp-done-body {
	display:grid;
	grid-template-columns:minmax(0,1fr) 330px;
	gap:20px;
	align-items:start;
	margin-top:20px;
}
.jp-done-main {
	min-width:0;
	padding:34px 40px 36px;
	border:1px solid #d8e5f2;
	border-radius:10px;
	background:#fff;
}
.jp-done-h {
	font-size:20px;
	font-weight:700;
	color:#174f89;
	letter-spacing:-0.03em;
}
.jp-done-table {
	width:100%;
	margin-top:18px;
	border-collapse:collapse;
	border-top:1px solid #d8e5f2;
}
.jp-done-table th,
.jp-done-table td {
	padding:14px 4px;
	border-bottom:1px solid #e8eef5;
	font-size:16px;
	line-height:1.6;
	text-align:left;
	vertical-align:top;
	word-break:keep-all;
}
.jp-done-table th {
	width:150px;
	color:#5b6f83;
	font-weight:500;
	white-space:nowrap;
}
.jp-done-table td { color:#1f2d3d; font-weight:500; }
.jp-done-memo { white-space:normal; }
.jp-done-fix { margin-top:18px !important; font-size:15px; color:#5b6f83; word-break:keep-all; }
.jp-done-fix a { color:#2e78d3; font-weight:700; font-variant-numeric:tabular-nums; }

.jp-done-act { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.jp-btn-ghost {
	min-width:190px;
	height:54px;
	padding:0 26px;
	line-height:52px;
	border:1px solid #cfdced;
	background:#fff;
	color:#174f89;
	font-size:17px;
	font-weight:700;
}
.jp-btn-ghost:link, .jp-btn-ghost:visited { color:#174f89; }
.jp-btn-ghost:hover, .jp-btn-ghost:focus { border-color:#2e78d3; color:#2e78d3; }

.jp-done-side { min-width:0; display:flex; flex-direction:column; gap:14px; }

/* ---------------------------------------------------------
 * 화면이 좁아질 때
 * -------------------------------------------------------*/
@media all and (max-width:1200px){
	.jp-hero { gap:30px; padding:40px 32px; }
	.jp-h1 { font-size:34px; }
	.jp-form { grid-template-columns:minmax(0,1fr) 300px; }
	.jp-form-main { padding:32px 30px 36px; }
	.jp-does { padding:32px 30px 30px; }
	.jp-does-list { gap:18px; }
	.jp-who { padding:28px 30px 30px; }
}

@media all and (max-width:1024px){
	.jp-hero { grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:30px; }
	.jp-lead { max-width:none; }
	.jp-form { grid-template-columns:minmax(0,1fr); }
	.jp-form-side { flex-direction:row; flex-wrap:wrap; }
	.jp-side-box { flex:1 1 280px; }
	.jp-done-body { grid-template-columns:minmax(0,1fr); }
	.jp-done-side { flex-direction:row; flex-wrap:wrap; }
	.jp-does-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
	.jp-who-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media all and (max-width:760px){
	.jp-flash { padding:16px 18px; }

	/*
	 * 첫 화면에서 증거(가려진 금액이 붙은 상품칸)가 접히는 선 위에 와야 한다.
	 * 그래서 선언 쪽 높이를 줄이고 버튼을 한 줄에 놓는다.
	 */
	.jp-hero { padding:20px 18px 24px; border-radius:8px; row-gap:22px; }
	.jp-h1 { font-size:24px; }
	.jp-lead { margin-top:11px !important; font-size:16px; line-height:1.62; }
	.jp-hero-act { gap:8px; margin-top:16px; flex-wrap:nowrap; }
	.jp-btn-go { flex:1 1 auto; min-width:0; height:50px; padding:0 10px; line-height:50px; font-size:17px; }
	.jp-btn-tel { flex:0 0 auto; height:50px; padding:0 14px; line-height:50px; }
	.jp-btn-tel span { display:none; }
	.jp-btn-tel b { display:inline; font-size:17px; }
	/* 업무시간은 아래 "말로 하는 게 빠르시면" 칸에 그대로 있다. 첫 화면 자리를 증거에 준다 */
	.jp-hero-note { display:none; }

	.jp-screen-body { padding:11px 11px 12px; }
	.jp-screen-head { padding-bottom:9px; }
	.jp-screen-head b { font-size:14px; }
	.jp-screen-head span { font-size:11px; }
	.jp-screen-grid { gap:8px; padding-top:11px; }
	.jp-screen-card { padding:6px; }
	/* 상품 이름이 증거의 알맹이다. 두 줄까지 보이고, 넘치면 말줄임으로 끊는다 */
	.jp-screen-name { height:2.8em; margin-top:6px !important; font-size:11px; line-height:1.4; }

	.jp-h2 { font-size:21px; }
	.jp-panel, .jp-who, .jp-apply { margin-top:14px; }
	.jp-does { padding:26px 20px 26px; }
	.jp-does-list { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:18px; }
	.jp-shot { margin-bottom:12px; }
	.jp-does-note { margin-top:20px !important; padding-top:16px; }

	.jp-who { padding:24px 20px 26px; border-radius:8px; }
	.jp-who-list { grid-template-columns:minmax(0,1fr); gap:24px; }

	.jp-form-main { padding:26px 20px 30px; border-radius:8px; }
	.jp-grid2 { grid-template-columns:minmax(0,1fr); gap:0; }
	.jp-field { margin-top:17px; }
	.jp-kinds { gap:6px; }
	.jp-kind span { padding:10px 14px; font-size:14px; }
	.jp-btn-send { max-width:none; }
	.jp-side-box { flex:1 1 100%; padding:20px 18px 22px; border-radius:8px; }

	.jp-done-head { padding:32px 20px 30px; border-radius:8px; }
	.jp-done-head .jp-h1 { font-size:25px; }
	.jp-done-lead { font-size:16px; }
	.jp-done-no { margin-top:16px !important; padding:8px 14px; font-size:14px; }
	.jp-done-body { margin-top:14px; }
	.jp-done-main { padding:26px 20px 30px; border-radius:8px; }
	.jp-done-h { font-size:19px; }
	.jp-done-table th, .jp-done-table td { display:block; padding:0 0 4px; border-bottom:0; }
	.jp-done-table th { width:auto; padding-top:14px; font-size:14px; }
	.jp-done-table td { padding-bottom:14px; border-bottom:1px solid #e8eef5; }
	.jp-done-act { gap:8px; }
	.jp-btn-ghost { width:100%; min-width:0; height:52px; line-height:50px; font-size:16px; }
}