/* 범용 아이콘 베이스 스타일 (2색 그라데이션 + 흰색 아이콘) */
.service-icon {
width: 64px;
height: 64px;
border-radius: 18px;
/* 상단 메인 브랜드 컬러 계열 2색 그라데이션 */
background: linear-gradient(135deg, #1649a5 0%, #12b8e8 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff; /* 아이콘 기본 색상: 흰색 */
box-shadow: 0 8px 20px rgba(18, 184, 232, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-icon:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(18, 184, 232, 0.35);
}
.service-icon::before {
content: "";
width: 32px;
height: 32px;
display: block;
background-color: currentColor; /* 흰색을 그대로 유지 */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.list-icon {
width: 38px;
height: 38px;
border-radius: 50%; /* 완전한 원형 */
background: linear-gradient(135deg, #1649a5 0%, #12b8e8 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: 0 4px 12px rgba(18, 184, 232, 0.2);
flex-shrink: 0;
position: absolute;
}
.list-icon::before {
content: "";
width: 22px;
height: 22px;
display: block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 서비스 페이지 SVG 아이콘 */
.service-card .service-icon.money {
background: #ffb619 url("/assets/icons/buy-money.svg") center / 34px 34px no-repeat;
font-size: 0;
}
.service-card .service-icon.demolition {
background: #ffb619 url("/assets/icons/demolition.svg") center / 34px 34px no-repeat;
font-size: 0;
}
.items-title .section-icon {
background: url("/assets/icons/items.svg") center / 30px 30px no-repeat;
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
font-size: 0;
}
.detail-list a::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 6px;
vertical-align: -3px;
background: url("/assets/icons/snowflake-detail.svg") center / contain no-repeat;
}
/* 진행절차 전체 컨테이너 */
.process-grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 1100px;
margin: 0 auto;
}
/* 개별 카드 스타일 */
.process-card {
flex: 1;
background: #ffffff;
border-radius: 20px;
padding: 32px 20px 28px;
text-align: center;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
}
/* 숫자 뱃지 (01, 02, 03, 04) */
.process-badge {
width: 35px;
position: relative;
align-items: center;
background: #ffb800; /* 노란색 뱃지 */
color: #ffffff;
font-size: 13px;
font-weight: bold;
padding: 5px 5px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(255, 184, 0, 0.3);
}
/* 2색 그라데이션 원형 아이콘 */
.process-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #1649a5 0%, #12b8e8 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: 0 8px 18px rgba(18, 184, 232, 0.25);
margin-top: 8px;
margin-bottom: 20px;
}
.process-icon::before {
content: "";
width: 28px;
height: 28px;
display: block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 화살표 구분선 */
.process-arrow {
color: #d0d7de;
font-size: 18px;
user-select: none;
}
/* SVG 마스크 공통 */
.ac-service-grid .ac-service-icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 13px;
}
.ac-service-grid .ac-service-icon--buy {
color: #fff;
background: linear-gradient(135deg, #0756cb, #008ad5);
}
.ac-service-grid .ac-service-icon--remove {
color: #0b2e59;
background: #ffcb39;
}
.ac-service-icon::before,
.ac-service-button::after {
content: "";
display: block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.ac-service-icon::before {
width: 32px;
height: 32px;
}
.ac-service-button::after {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
/* 최고가 매입 · 원화 */
.icon-money::before {
width: 32px;
height: 32px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 2. 당일 즉시처처리 (번개/스피드 아이콘) */
.icon-lightning::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 전문 인력 · 안전모 작업자 */
.icon-worker::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 4. 전국 출장 (트럭/배송 아이콘) */
.icon-truck::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 20년 전문가 · 메달 */
.icon-award::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 합리적 매입가 · 가격표 체크 */
.icon-price::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 안전한 작업 · 렌치 */
.icon-tools::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 친환경 처리 · 재활용 */
.icon-recycle::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 01. 전화 문의 */
.icon-phone-call::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 02. 무료 방문 견적 (클립보드/체크) */
.icon-clipboard-check::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 03. 철거/매입 진행 (교차 공구) */
.icon-tools-cross::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 04. 현금 즉시 지급 (지폐) */
.icon-banknotes::before {
width: 28px;
height: 28px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 매입 · 원화 동전 */
.ac-service-icon--buy::before {
width: 28px;
height: 28px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 철거 · 에어컨과 렌치 */
.ac-service-icon--remove::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 문의 버튼 화살표 */
.ac-service-button::after {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}