:root{
	--wrap:1160px;

	--text:#111;
	--muted:#666;
	--line:#e9e9e9;

	--blue:#1f5ea8;
	--green:#1e8f3a;
	--green2:#1aa34a;

	--bg:#fff;
	--gray:#f6f7f9;

	--shadow:0 12px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
	color:var(--text);
	background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{
	width:min(var(--wrap), calc(100% - 32px));
	margin:0 auto;
}

/* Header */
.header{
	position:sticky;
	top:0;
	z-index:50;
	background:#fff;
	border-bottom:1px solid var(--line);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:14px 0;
}
.logo img{
	height:38px;      /* PC */
	width:auto;
	display:block;
	image-rendering:auto;
}

@media (max-width: 520px){
	.logo img{
		height:32px;
	}
}

.logo-mark{
	width:42px;
	height:28px;
	border-radius:6px;
	background:
		linear-gradient(135deg, rgba(31,94,168,.16), rgba(30,143,58,.16)),
		radial-gradient(circle at 30% 50%, rgba(31,94,168,.35), transparent 60%),
		radial-gradient(circle at 70% 50%, rgba(30,143,58,.35), transparent 60%);
	border:1px solid #dfe8f4;
}

.gnb{
	display:flex;
	gap:18px;
	align-items:center;
}
.gnb a{
	font-weight:700;
	color:#333;
}
.gnb a:hover{ color:var(--blue); }

.header-actions{
	display:flex;
	gap:10px;
	align-items:center;
}

/* Mobile menu */
.m-menu{
	display:none;
	width:44px;
	height:44px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	cursor:pointer;
	padding:10px;
}
.m-menu span{
	display:block;
	height:2px;
	background:#111;
	margin:6px 0;
	border-radius:999px;
}

.m-drawer{
	border-top:1px solid var(--line);
	background:#fff;
}
.m-drawer-inner{
	display:grid;
	gap:10px;
	padding:14px 0 18px;
}
.m-link{
	padding:12px 10px;
	border-radius:12px;
	font-weight:800;
	color:#333;
}
.m-link:hover{ background:#f3f4f6; }

/* Buttons */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 16px;
	border-radius:999px;
	border:1px solid transparent;
	font-weight:900;
	cursor:pointer;
	white-space:nowrap;
}
.btn-block{ width:100%; }

.btn-green{
	background: linear-gradient(180deg, var(--green2), var(--green));
	color:#fff;
	box-shadow:0 10px 22px rgba(30,143,58,.22);
}
.btn-green:hover{ filter:brightness(1.02); }

.btn-blue{
	background: var(--blue);
	color:#fff;
	box-shadow:0 10px 22px rgba(31,94,168,.18);
}
.btn-dark{
	background:#222;
	color:#fff;
}
.btn-dark:hover{ filter:brightness(1.03); }

/* Hero */
.hero{
	position:relative;
}
.hero-bg{
	height:460px;
	background:
		linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
		url("../img/hero.jpg") center/cover no-repeat;
}
.hero-inner{
	position:absolute;
	left:0; right:0;
	top:0;
	height:460px;
	display:flex;
	align-items:center;
}
.hero-copy{
	color:#fff;
	max-width:680px;
	padding:18px 0;
}
.hero-kicker{
	margin:0 0 10px;
	font-weight:900;
	opacity:.95;
}
.hero-title{
	margin:0 0 12px;
	font-size:44px;
	line-height:1.15;
	letter-spacing:-.03em;
}
.hero-sub{
	margin:0 0 18px;
	opacity:.95;
	max-width:620px;
}
.hero-btns{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

/* Quick points */
.quick{
	margin-top:-28px;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:14px;
	padding-bottom:22px;
}
.quick-item{
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow: var(--shadow);
	padding:16px;
	display:flex;
	gap:12px;
	align-items:center;
}
.quick-ico{
	width:44px;
	height:44px;
	border-radius:14px;
	background:#f2f6ff;
	display:grid;
	place-items:center;
	font-size:20px;
}
.quick-txt .t{ font-weight:1000; }
.quick-txt .d{ color:var(--muted); font-weight:700; font-size:13px; margin-top:2px; }

/* Sections */
.section{
	padding:44px 0;
}
.section-gray{
	background: var(--gray);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}
.sec-title{
	margin:0 0 8px;
	font-size:30px;
	letter-spacing:-.02em;
}
.sec-sub{
	margin:0 0 18px;
	color:var(--muted);
	font-weight:700;
}

/* Service cards */
.svc-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:14px;
}
.svc-card{
	border:1px solid var(--line);
	border-radius:16px;
	overflow:hidden;
	box-shadow: var(--shadow);
	background:#fff;
}
.svc-img{
	position:relative;
	height:220px;
	background:#ddd;
}
.svc-img img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.svc-label{
	position:absolute;
	left:12px;
	bottom:12px;
	background: rgba(0,0,0,.62);
	color:#fff;
	padding:8px 12px;
	border-radius:999px;
	font-weight:1000;
	font-size:13px;
}
.svc-body{
	padding:16px;
}
.svc-body h3{ margin:0 0 8px; }
.svc-body p{ margin:0 0 10px; color:var(--muted); font-weight:700; }
.svc-body ul{
	margin:0;
	padding-left:18px;
	color:#333;
	font-weight:800;
}
.svc-body li{ margin:6px 0; }

/* CTA banner */
.cta{
	background:
		linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
		url("../img/hero.jpg") center/cover no-repeat;
	padding:34px 0;
}
.cta-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	color:#fff;
}
.cta-copy h2{
	margin:0 0 6px;
	letter-spacing:-.02em;
}
.cta-copy p{
	margin:0;
	opacity:.95;
	font-weight:700;
}

/* Pricing */
.price-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:14px;
}
.price-card{
	position:relative;
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
	box-shadow: var(--shadow);
	padding:16px;
}
.price-card .p-top{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:10px;
}
.p-name{ font-weight:1000; font-size:18px; }
.p-desc{ color:var(--muted); font-weight:800; font-size:13px; }
.p-price{ margin:12px 0; font-size:18px; }
.p-price b{ font-size:34px; letter-spacing:-.02em; }
.price-card ul{
	margin:0 0 12px;
	padding-left:18px;
	color:#333;
	font-weight:850;
}
.price-card li{ margin:7px 0; }

.price-card.featured{
	border-color: rgba(30,143,58,.35);
	box-shadow: 0 18px 40px rgba(30,143,58,.12);
}
.price-card .badge{
	position:absolute;
	top:12px;
	right:12px;
	background: rgba(30,143,58,.12);
	color: var(--green);
	border:1px solid rgba(30,143,58,.25);
	border-radius:999px;
	padding:6px 10px;
	font-weight:1000;
	font-size:12px;
}

/* Reviews */
.review-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:14px;
}
.review{
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
	box-shadow: var(--shadow);
	padding:16px;
}
.review .q{ margin:0; font-weight:950; }
.review .w{ margin:10px 0 0; color:var(--muted); font-weight:850; }

/* Form */
.form{
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
	box-shadow: var(--shadow);
	padding:16px;
}
.form-grid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:12px;
}
.field{ display:grid; gap:6px; }
.field span{ color:#333; font-weight:900; font-size:13px; }
.field input, .field select, .field textarea{
	border:1px solid #ddd;
	border-radius:12px;
	padding:12px;
	outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
	border-color: rgba(31,94,168,.55);
	box-shadow: 0 0 0 4px rgba(31,94,168,.10);
}
.field-wide{ grid-column: 1 / -1; }

.agree{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 2px;
	font-weight:850;
	color:#333;
}
.agree input{ width:18px; height:18px; }

.err{
	min-height:16px;
	color:#d11a2a;
	font-style:normal;
	font-weight:900;
	font-size:12px;
}

.toast{
	margin-top:12px;
	padding:12px;
	border-radius:12px;
	background: rgba(30,143,58,.10);
	border:1px solid rgba(30,143,58,.22);
	color: var(--green);
	font-weight:1000;
}

/* Footer */
.footer{
	background:#0f172a;
	color:#e5e7eb;
	margin-top:40px;
}
.footer-inner{
	display:grid;
	grid-template-columns: 1.1fr 1.5fr .8fr;
	gap:14px;
	padding:28px 0;
}
.f-brand{ font-weight:1000; font-size:18px; }
.f-muted{ color:#a9b2c2; margin:8px 0 0; font-weight:700; }
.f-title{ font-weight:1000; margin:0 0 10px; }
.f-list{
	margin:0;
	padding:0;
	list-style:none;
	display:grid;
	gap:7px;
	color:#c7cfdd;
	font-weight:750;
	font-size:13px;
}
.f-list a{ color:#c7cfdd; }
.f-list a:hover{ color:#fff; }

.f-bottom{
	border-top:1px solid rgba(255,255,255,.12);
	padding:14px 0 18px;
	color:#a9b2c2;
	font-weight:750;
	font-size:13px;
}

/* Responsive */
@media (max-width: 980px){
	.gnb{ display:none; }
	.m-menu{ display:inline-block; }

	.hero-bg{ height:420px; }
	.hero-inner{ height:420px; }
	.hero-title{ font-size:36px; }

	.quick{ grid-template-columns: 1fr; margin-top:-22px; }

	.svc-grid{ grid-template-columns: 1fr; }
	.price-grid{ grid-template-columns: 1fr; }
	.review-grid{ grid-template-columns: 1fr; }

	.footer-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
	.hero-title{ font-size:30px; }
	.form-grid{ grid-template-columns: 1fr; }
	.cta-inner{ flex-direction:column; align-items:flex-start; }
	.cta-btn{ width:100%; }
}