@charset "utf-8";
/* =====================================================
   이용절차 — page-process (Claude Design v2)
   ===================================================== */

.page-process { display:block; overflow:hidden; }

/* 4-스텝 그리드 */
.page-process__steps {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:18px;
}
.page-process__step {
	position:relative;
	padding:32px 30px;
	border-radius:32px;
	display:flex; flex-direction:column; gap:12px;
	background:var(--bg3);
	box-shadow:var(--sh-card);
	transition:transform .3s ease, box-shadow .3s ease;
}
.page-process__step:hover {
	transform:translateY(-4px);
	box-shadow:0 20px 44px oklch(0.30 0.05 148 / 0.10);
}
.page-process__step--mint   { background:var(--bg-mint); }
.page-process__step--butter { background:var(--bg-butter); }
.page-process__step--sky    { background:var(--bg-sky); }
.page-process__step--amber  { background:var(--bg-amber); }

.page-process__steps-wrap {padding:100px 0;}

.page-process__step-no {
	font-family:var(--f_ui);
	font-size:var(--fs13);
	font-weight:700;
	letter-spacing:0.14em;
	text-transform:uppercase;
}
.page-process__step--mint   .page-process__step-no { color:oklch(0.52 0.09 148); }
.page-process__step--butter .page-process__step-no { color:oklch(0.52 0.08 110); }
.page-process__step--sky    .page-process__step-no { color:oklch(0.50 0.07 230); }
.page-process__step--amber  .page-process__step-no { color:oklch(0.52 0.08 55); }

.page-process__step-title {
	margin:0;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs22);
	color:oklch(0.31 0.05 148);
	line-height:1.3;
	letter-spacing:-0.01em;
}
.page-process__step-body {
	margin:0;
	font-size:var(--fs14);
	line-height:1.85;
	color:oklch(0.46 0.04 148);
}
.page-process__step-body a {
	color:oklch(0.44 0.08 148);
	font-weight:700;
}

.page-process__cta-tile {
	padding:60px 0 120px;
	background:var(--bg1);
}

/* ==================== 반응형 ==================== */
@media screen and (max-width:1199px) {
	.page-process__steps { grid-template-columns:repeat(2, 1fr); gap:14px; }
	.page-process__steps-wrap {padding:70px 0;}
	.page-process__step { padding:28px 26px; border-radius:26px; }
	.page-process__cta-tile { padding:40px 0 80px; }
}
@media screen and (max-width:767px) {
	.page-process__steps { grid-template-columns:1fr; gap:12px; }
	.page-process__steps-wrap {padding:40px 0;}
	.page-process__step { padding:24px 22px; border-radius:22px; }
	.page-process__step-title { font-size:var(--fs19); }
}