@charset "utf-8";
/* ==========================================================
   소상공인 상생보험 모바일웹 : 홈(메인)
   ========================================================== */

.home-body { background: var(--color-bg-gray); }
.home-content {
	position: relative;
	background: var(--n0) linear-gradient(180deg, #FFF4ED 0%, #FFFFFF 41.2rem) no-repeat top / 100% 41.2rem;
	border-radius: 0 0 3.2rem 3.2rem;
	box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.04), 0 4rem 4rem rgba(0, 0, 0, 0.03);
	padding-bottom: 4.8rem;
	z-index: 2;
}

/* ==========================================================
   히어로
   ========================================================== */
.main-hero { padding: 4rem 2.4rem 0; }
.main-hero .hero-label {
	/* Caption/02 */
	display: block;
	color: var(--color-point);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
}
.main-hero h2 {
	/* Heading/03 */
	margin-top: 0.8rem;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.4;
}
.main-hero .hero-illust {
	display: block;
	margin: 1.6rem auto 0;
	width: 36.6rem; width: 366px;
	position: relative; left: 2rem; left: 20px;
}

/* ── 스테이지 (원본 300×318 비율 기반, 여백 포함) ── */
.icon-stage {
    position: relative; margin: 3.5rem auto 0 !important;
	width: 366px !important; left: 0 !important;
    /* width: min(88vw, 366px);
    aspect-ratio: 1140 / 1130; */
    aspect-ratio: 1140 / 970;
}
.icon-stage span{display: block; position: absolute; user-select: none; -webkit-user-drag: none;}
.icon-stage img {max-width: 100%; display: block;}
.icon-stage span:not(.coin-right) img{filter: drop-shadow(2.1rem 3.5rem 2.4rem rgba(232,101,42,0.01)) drop-shadow(1.2rem 2rem 1.9rem rgba(232,101,42,0.03)) drop-shadow(0.5rem 0.9rem 1.1rem rgba(232,101,42,0.04)) drop-shadow(0.1rem 0.3rem 0.6rem rgba(232,101,42,0.05));}
.icon-stage span.hand img,
.icon-stage span.base img{filter: drop-shadow(4.2rem 7.3rem 3.4rem rgba(232,101,42,0.01)) drop-shadow(2.4rem 4.1rem 2.9rem rgba(232,101,42,0.03)) drop-shadow(1.1rem 1.8rem 2.1rem rgba(232,101,42,0.04)) drop-shadow(0.3rem 0.5rem 1.2rem rgba(232,101,42,0.05));}


  /* ── 위치 (스테이지 기준 %) ── */
.icon-stage .base       { left: 6.14%;  top: 7.97%;  width: 87.72%; z-index: 2; }
.icon-stage .hand       { left: 45%; transform: translateX(-50%); top: 7.97%;  width: 50%; z-index: 2; }
.icon-stage .star-green {left: 6%; top: 29%; width: 9.6%; z-index: 3;}
.icon-stage .star-yellow{left: 71%; top: 80%; width: 6%; z-index: 3;}
.icon-stage .star-orange {left: 86.77%; top: 16%; width: 6.4%; z-index: 5;} /* 배지 위 */
.icon-stage .coin-left {left: 12%; top: 56%; width: 8.4%; z-index: 3;}
.icon-stage .coin-right {left: 63.77%; top: -7.16%; width: 16%; z-index: 1;} /* 폰 뒤로 */
.icon-stage .mark01{left: 19%; top: -1%; width: 27%; z-index: 4;}
.icon-stage .mark02{left: 16%; top: 36.9%; width: 27%; z-index: 4;}
.icon-stage .mark03{left: 62.5%; top: 13%; width: 27%; z-index: 4;}
.icon-stage .mark04{left: 56%; top: 49%; width: 27%; z-index: 4;}


/* ── 플로팅 애니메이션 ── */
@keyframes floatY {
	from { transform: translateY(0); }
	to   { transform: translateY(-10px); }
}
@keyframes floatTiltL {
	from { transform: translateY(0) rotate(0deg); }
	to   { transform: translateY(-9px) rotate(-6deg); }
}
@keyframes floatTiltR {
	from { transform: translateY(0) rotate(0deg); }
	to   { transform: translateY(-9px) rotate(6deg); }
}

.icon-stage .shield      { animation: floatY     3.2s ease-in-out infinite alternate; }
.icon-stage .coin-right  { animation: floatTiltR 4.0s ease-in-out infinite alternate -1.2s; }
.icon-stage .coin-left   { animation: floatTiltL 3.6s ease-in-out infinite alternate -0.6s; }
.icon-stage .star-green  { animation: floatTiltL 3.0s ease-in-out infinite alternate -2.0s; }
.icon-stage .star-orange { animation: floatTiltR 3.4s ease-in-out infinite alternate -0.9s; }
.icon-stage .star-yellow { animation: floatTiltR 2.8s ease-in-out infinite alternate -1.6s; }

/* @media (prefers-reduced-motion: reduce) {
	.icon-stage img { animation: none; }
} */


/* ==========================================================
   주요 서비스
   ========================================================== */
.section-tit {
	/* Heading/04 */
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
}
.main-service { position: relative; /* margin-top: -11rem; */ padding: 3rem 2.4rem 0; }
.main-service .service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	margin-top: 1.6rem;
}
.main-service .service-card a{
	position: relative;
	overflow: hidden;
	display: block;
	height: 17rem;
	padding: 2rem;
	background: var(--color-bg-gray);
	border-radius: 1.6rem;
	transition: background .25s, box-shadow .25s;
}
.main-service .service-card:active a{ background: var(--n100); }
.main-service .service-card .card-ico{ transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (hover: hover) {
	.main-service .service-card a:hover {
		background: var(--n100);
		box-shadow: 0 0.8rem 2rem rgba(17, 22, 27, 0.06);
	}
	.main-service .service-card a:hover .card-ico { transform: scale(1.08); }
}
.main-service .service-card strong { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.4; color: var(--n900);} /* Body/02 */
.main-service .service-card span { display: block; margin-top: 0.4rem; font-size: 1.4rem; font-weight: 500; line-height: 1.4; color: var(--n500); } /* Caption/01 */
.main-service .service-card .card-ico {
	position: absolute;
	right: 1.5rem;
	bottom: 1.3rem;
	width: 6rem;
	height: 6rem;
}

/* ==========================================================
   청구서류 다운로드 (통합 박스형)
   ========================================================== */
.main-download { padding: 4.8rem 2.4rem 0; }
.main-download .doc-download-box {
	margin-top: 1.6rem;
}
.doc-download-box .doc-row {
	position: relative;
	display: block;
	background: var(--color-bg-gray);
	border-radius: 1.2rem;
	height: 6.4rem;
	transition: background .2s;
}
.doc-download-box .doc-row + .doc-row {margin-top: 0.8rem;}
.doc-download-box a.doc-row:active { background: var(--n100); }
@media (hover: hover) {
	.doc-download-box a.doc-row:hover { background: var(--n100); }
	.doc-download-box a.doc-row:hover .ico-download { transform: translateY(calc(-50% + 0.2rem)); }
}
.doc-download-box .doc-ico {
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3.2rem;
	height: 3.2rem;
	mix-blend-mode: darken;
}
.doc-download-box .doc-name {
	/* Body/02 */
	position: absolute;
	left: 6.4rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--n900);
}
.doc-download-box .ico-download {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	transition: transform .25s;
}
.doc-download-box .ico-download img { width: 2rem; height: 2rem; }
.main-download .doc-download-box + .blue-note{margin-top: 1.2rem;}

/* ==========================================================
   전담센터 CTA
   ========================================================== */
.main-cta { padding: 4.8rem 2.4rem 0; }
.cta-card {
	position: relative;
	overflow: hidden;
	height: 20rem;
	padding: 2.2rem;
	background:
		url("../images/main/cta_bg.png?ver=260902") no-repeat center / cover padding-box,
		linear-gradient(180deg, #FFE6D5 0%, #FFC9A8 100%) border-box;
	border: 2px solid transparent;
	border-radius: 2.4rem;
}
.cta-card .cta-tel {
	/* Heading/02 */
	position: relative;
	display: block;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-txt);
}
.cta-card .cta-time { position: relative; margin-top: 0.7rem; font-size: 1.4rem; font-weight: 500; line-height: 1.4; color: var(--n900); opacity: 0.6;} /* Caption/01 */
.cta-card .cta-illust {
	position: absolute;
	top: 0.8rem;
	right: 1rem;
	width: 13rem;
	height: 13rem;
}
.cta-card .cta-illust img{
	display: block;
	width: 100%;
	height: 100%;
	will-change: transform;
	animation: ctaFloat 3s ease-in-out infinite;
}

@keyframes ctaFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -0.6rem, 0); }
}

/* @media (prefers-reduced-motion: reduce) {
	.cta-card .cta-illust img{ animation: none; }
} */

.cta-card .cta-btn {
	/* Body/06 */
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 4.8rem;
	background: var(--n0);
	border-radius: 1.6rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--n900);
	box-shadow: 0 2.8rem 4.8rem -1.1rem rgba(217, 78, 26, 0.14), 0 1.2rem 2.6rem -0.5rem rgba(224, 85, 32, 0.16), 0 0.3rem 0.8rem rgba(232, 101, 42, 0.1);
	transition: transform .2s, box-shadow .2s;
}
.cta-card .cta-btn img {position: relative; top: -0.1rem; width: 2rem; height: 2rem; }
.cta-card .cta-btn:active { transform: scale(0.97); }
@media (hover: hover) {
	.cta-card .cta-btn:hover {
		transform: translateY(-0.2rem);
		box-shadow: 0 3.2rem 5.2rem -1.1rem rgba(217, 78, 26, 0.18), 0 1.6rem 3rem -0.5rem rgba(224, 85, 32, 0.2), 0 0.4rem 1rem rgba(232, 101, 42, 0.12);
	}
}

/* ==========================================================
   카카오톡 채널
   ========================================================== */
.main-kakao { padding: 1.2rem 2.4rem 0; }
.kakao-card {
	background:
		linear-gradient(180deg, #FFFADA -20%, #FFF7C8 100%) padding-box,
		linear-gradient(180deg, rgba(255, 239, 132, .5) 0%, rgba(255, 231, 72, .8) 100%) border-box;
}
.kakao-card .kakao-tit { display: flex; align-items: center; gap: 1.2rem; }
.kakao-card .kakao-tit img { width: 3rem; height: 3rem; }
.kakao-card .kakao-tit strong { font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--n900); } /* Heading/04 */
.kakao-card .kakao-info { margin-top: 1.6rem; }
.kakao-card .kakao-info li { display: flex; gap: 0.8rem; align-items: center; font-size: 1.4rem; line-height: 1.4; }
.kakao-card .kakao-info li + li { margin-top: 0.6rem; }
.kakao-card .kakao-info strong { flex-shrink: 0; width: 5.8rem; font-weight: 700; color: var(--n900); } /* Caption/02 */
.kakao-card .kakao-info span { font-weight: 500; color: var(--n900); opacity: 0.6;} /* Caption/01 */
.kakao-card .cta-btn {
	box-shadow: 0 2.8rem 4.8rem -1.1rem rgba(188, 165, 23, 0.28), 0 1.2rem 2.6rem -0.5rem rgba(253, 219, 0, 0.32), 0 0.3rem 0.8rem rgba(253, 219, 0, 0.2);
}
@media (hover: hover) {
	.kakao-card .cta-btn:hover {
		transform: translateY(-0.2rem);
		box-shadow: 0 3.2rem 5.2rem -1.1rem rgba(188, 165, 23, 0.38), 0 1.6rem 3rem -0.5rem rgba(253, 219, 0, 0.42), 0 0.4rem 1rem rgba(253, 219, 0, 0.12);
	}
}