/* =========================================================
   VITALINK 테스터 모집 - 사용자 페이지 공통 스타일
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
	--blue:#1f6bf1;
	--blue-deep:#0d4fd7;
	--blue-dark:#173fae;
	--navy:#1b2c4f;
	--yellow:#ffe14d;
	--ink:#1a1c22;
	--gray:#5d6472;
	--line:#d9dee8;
	--bg:#f2f4f9;
}

html,body{ height:100%; }
body{
	font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
	background:
		linear-gradient(160deg, rgba(31,107,241,.07) 0%, rgba(255,255,255,0) 45%),
		linear-gradient(320deg, rgba(31,107,241,.12) 0%, rgba(255,255,255,0) 40%),
		var(--bg);
	color:var(--ink);
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1280px; margin:0 auto; padding:28px 32px 40px; }

/* ---------- 상단 ---------- */
.top-bar{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
.top-bar .logo img{ height:44px; display:block; }
.top-bar .slogan img{ height:88px; display:block; mix-blend-mode:darken; }

/* ---------- 히어로(메인) ---------- */
.hero{
	display:grid;
	grid-template-columns: 1.05fr .9fr 1.15fr;
	gap:12px;
	align-items:center;
}

.hero-copy .catch{
	font-size:44px; font-weight:900; letter-spacing:-1.5px; line-height:1.18;
	margin-bottom:22px;
}
.hero-copy .free-box{
	position:relative;
	background:linear-gradient(115deg, var(--blue) 0%, var(--blue-deep) 80%);
	color:#fff;
	padding:30px 26px;
	font-size:34px; font-weight:900; letter-spacing:-1.2px; line-height:1.3;
	clip-path:polygon(0 8%, 100% 0, 98% 92%, 2% 100%);
	margin-bottom:26px;
}
.hero-copy .free-box em{ font-style:normal; color:var(--yellow); }
.hero-copy .desc{ font-size:19px; font-weight:600; color:#2a2f3a; letter-spacing:-.5px; }

.hero-visual{ text-align:center; }
.hero-visual img{ max-width:100%; height:auto; display:block; margin:0 auto; mix-blend-mode:darken; }

/* ---------- 신청 폼 카드 ---------- */
.form-card{
	background:#fff;
	border-radius:22px;
	box-shadow:0 14px 40px rgba(23,63,174,.14);
	padding:34px 32px 30px;
}
.form-card .row{ display:flex; align-items:flex-start; margin-bottom:18px; }
.form-card .row > label.tit,
.form-card .row > .tit{
	flex:0 0 108px; font-size:17px; font-weight:800; letter-spacing:-.5px; padding-top:12px;
}
.form-card .row > .field{ flex:1; }

.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel]{
	width:100%; height:48px;
	border:1px solid var(--line); border-radius:10px;
	padding:0 16px; font-size:16px; font-family:inherit;
	color:var(--ink); background:#fff;
	transition:border-color .15s, box-shadow .15s;
}
.form-card input::placeholder{ color:#a6adbb; }
.form-card input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,107,241,.15); }

.purpose-list{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px 8px; padding-top:12px; }
.purpose-list label{
	display:flex; align-items:center; gap:9px;
	font-size:16px; font-weight:600; letter-spacing:-.4px; cursor:pointer;
}
.purpose-list input[type=radio]{
	appearance:none; -webkit-appearance:none;
	width:22px; height:22px; border:2px solid #b7bfce; border-radius:50%;
	display:inline-block; position:relative; cursor:pointer; flex:0 0 22px;
	transition:border-color .15s;
}
.purpose-list input[type=radio]:checked{ border-color:var(--blue); }
.purpose-list input[type=radio]:checked::after{
	content:''; position:absolute; inset:3px; border-radius:50%; background:var(--blue);
}
.etc-row{ margin-top:14px; }

.btn-submit{
	width:100%; height:64px; margin-top:24px;
	background:linear-gradient(115deg, var(--blue) 0%, var(--blue-deep) 100%);
	border:none; border-radius:14px; cursor:pointer;
	color:#fff; font-size:25px; font-weight:900; letter-spacing:-.8px; font-family:inherit;
	box-shadow:0 8px 22px rgba(23,63,174,.35);
	transition:transform .12s, box-shadow .12s;
}
.btn-submit em{ font-style:normal; color:var(--yellow); }
.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(23,63,174,.42); }

/* ---------- 하단 특징 ---------- */
.features{
	display:grid; grid-template-columns:repeat(4,1fr);
	background:#fff; border-radius:18px;
	box-shadow:0 8px 26px rgba(23,63,174,.08);
	margin-top:34px; padding:26px 10px;
}
.features .item{
	display:flex; align-items:center; justify-content:center; gap:14px;
	border-right:1px solid #e7eaf1;
}
.features .item:last-child{ border-right:none; }
.features .item svg{ width:40px; height:40px; flex:0 0 40px; }
.features .item strong{ display:block; font-size:18px; font-weight:800; letter-spacing:-.6px; }
.features .item span{ display:block; font-size:14px; color:var(--gray); letter-spacing:-.3px; }

/* ---------- 완료 페이지 ---------- */
.done{
	display:grid; grid-template-columns:1.05fr 1fr; gap:30px; align-items:center;
	padding-top:10px;
}
.done-left{ text-align:center; }
.check-circle{
	width:150px; height:150px; margin:0 auto 26px; position:relative;
	background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
	border-radius:50%;
	box-shadow:0 12px 30px rgba(23,63,174,.3);
	display:flex; align-items:center; justify-content:center;
}
.check-circle svg{ width:76px; height:76px; }
.confetti{ position:relative; display:inline-block; }
.confetti i{
	position:absolute; border-radius:3px; display:block;
}
.confetti i:nth-child(1){ width:16px; height:8px;  background:var(--yellow); transform:rotate(-25deg); top:-6px;  left:-52px; }
.confetti i:nth-child(2){ width:12px; height:12px; background:#7db1ff;      transform:rotate(15deg);  top:34px;  left:-72px; }
.confetti i:nth-child(3){ width:18px; height:8px;  background:var(--blue);  transform:rotate(30deg);  top:-28px; right:-48px; }
.confetti i:nth-child(4){ width:12px; height:12px; background:var(--yellow);transform:rotate(-15deg); top:26px;  right:-66px; }

.done-left h2{
	font-size:40px; font-weight:900; color:var(--blue-deep); letter-spacing:-1.4px; line-height:1.25;
}
.done-left h2 .big{ display:block; font-size:64px; letter-spacing:-2px; }

.name-card{
	background:rgba(255,255,255,.85);
	border-radius:20px;
	box-shadow:0 10px 30px rgba(23,63,174,.1);
	padding:30px 34px; margin-top:28px;
}
.name-card .who{ font-size:30px; font-weight:900; letter-spacing:-1px; margin-bottom:10px; }
.name-card .who em{ font-style:normal; color:var(--blue); }
.name-card p{ font-size:18px; font-weight:600; color:#333a47; letter-spacing:-.5px; }

.done-right{ text-align:center; }
.done-right img{ max-width:100%; height:auto; border-radius:20px; mix-blend-mode:darken; }

.gift-bar{
	display:flex; align-items:center; gap:20px;
	background:#fff; border-radius:18px;
	box-shadow:0 8px 26px rgba(23,63,174,.1);
	margin-top:30px; padding:24px 32px;
}
.gift-bar svg{ width:52px; height:52px; flex:0 0 52px; }
.gift-bar strong{ display:block; font-size:22px; font-weight:900; letter-spacing:-.7px; }
.gift-bar strong em{ font-style:normal; color:var(--blue); }
.gift-bar span{ display:block; font-size:15px; color:var(--gray); letter-spacing:-.3px; margin-top:3px; }

.auto-return{
	margin-top:14px; font-size:15px; color:var(--gray); letter-spacing:-.3px;
}
.auto-return em{ font-style:normal; font-weight:800; color:var(--blue); }

.btn-home{
	display:inline-block; margin-top:24px; padding:13px 34px;
	border:2px solid var(--blue); border-radius:999px;
	color:var(--blue); font-size:16px; font-weight:800; text-decoration:none; letter-spacing:-.4px;
	transition:background .15s, color .15s;
}
.btn-home:hover{ background:var(--blue); color:#fff; }

/* ---------- 반응형 ---------- */
/* 태블릿 가로 ~ 좁은 데스크톱 : 3열 유지하되 폼 라벨을 위로 올려 좁은 카드에서도 입력폭 확보 */
@media (max-width: 1180px){
	.wrap{ padding:16px 24px 30px; }
	.top-bar{ margin-bottom:2px; }
	.top-bar .logo img{ height:36px; }
	.top-bar .slogan img{ height:68px; }
	.hero-copy .catch{ font-size:34px; margin-bottom:16px; }
	.hero-copy .free-box{ font-size:26px; padding:24px 20px; margin-bottom:18px; }
	.hero-copy .desc{ font-size:17px; }
	.form-card{ padding:22px 22px 20px; }
	.form-card .row{ display:block; margin-bottom:11px; }
	.form-card .row > label.tit, .form-card .row > .tit{ display:block; padding:0 0 6px; font-size:16px; }
	.form-card input[type=text],
	.form-card input[type=email],
	.form-card input[type=tel]{ height:44px; }
	.purpose-list{ padding-top:2px; gap:10px 8px; }
	.btn-submit{ font-size:21px; height:54px; margin-top:14px; }
}

/* 태블릿 세로 (721~1023px) : 좌측 카피+이미지 / 우측 신청폼 2열 — 폼이 첫 화면에 보이도록 */
@media (max-width: 1023px){
	.hero{ grid-template-columns:1fr 1.05fr; gap:20px; align-items:start; }
	.hero-copy{ grid-column:1; grid-row:1; }
	.hero-visual{ grid-column:1; grid-row:2; }
	.hero-visual img{ max-height:360px; width:auto; max-width:100%; }
	.form-card{ grid-column:2; grid-row:1 / span 2; max-width:none; margin:0; width:100%; }
	.hero-copy .catch{ font-size:29px; margin-bottom:12px; }
	.hero-copy .free-box{ font-size:22px; padding:20px 16px; margin-bottom:14px; }
	.hero-copy .desc{ font-size:16px; }
	.top-bar .slogan img{ height:64px; }
	.features{ grid-template-columns:repeat(2,1fr); gap:16px 0; padding:20px 8px; }
	.features .item{ justify-content:flex-start; padding-left:20px; }
	.features .item:nth-child(2){ border-right:none; }
}

@media (max-width: 720px){
	.wrap{ padding:20px 16px 32px; }
	.top-bar .logo img{ height:32px; }
	.top-bar .slogan img{ height:60px; }
	.hero{ grid-template-columns:1fr; gap:6px; }
	.hero-copy, .hero-visual, .form-card{ grid-column:auto; grid-row:auto; }
	.hero-visual img{ max-height:none; width:auto; }
	.hero-copy .catch{ font-size:30px; margin-bottom:14px; }
	.hero-copy .free-box{ font-size:23px; padding:22px 18px; margin-bottom:16px; }
	.hero-copy .desc{ font-size:16px; margin-bottom:8px; }
	.hero-visual img{ max-width:75%; }
	.form-card{ padding:24px 18px; }
	.form-card .row{ display:block; margin-bottom:14px; }
	.form-card .row > label.tit, .form-card .row > .tit{ display:block; padding:0 0 7px; }
	.purpose-list{ grid-template-columns:1fr; padding-top:2px; }
	.btn-submit{ height:56px; font-size:20px; }
	.features{ grid-template-columns:repeat(2,1fr); gap:18px 0; padding:20px 6px; }
	.features .item{ justify-content:flex-start; padding-left:16px; }
	.features .item:nth-child(2){ border-right:none; }
	.done{ grid-template-columns:1fr; gap:20px; }
	.done-left h2{ font-size:30px; }
	.done-left h2 .big{ font-size:44px; }
	.name-card .who{ font-size:24px; }
	.gift-bar{ flex-direction:column; text-align:center; gap:10px; padding:20px 16px; }
}