@charset "utf-8";

/* 이사 서비스 상세 페이지 공통 스타일 */

.service-info-flow { min-width:320px; background:#f6f7f9; }
.service-info-flow .service-page,
.service-info-flow .service-page * { box-sizing:border-box; }
.service-info-flow .service-page { width:100%; max-width:none; padding:0 0 92px; }
.service-info-flow .service-card { padding:0; overflow:hidden; border-right:0; border-left:0; border-radius:0; }
.service-info-flow .service-intro { padding:20px 18px; }
.service-info-flow .service-intro .step-title { margin-bottom:7px; }
.service-info-flow .service-intro .step-desc { margin-bottom:0; }

.service-tabs {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	margin-top:8px;
	padding:0 10px;
	border-bottom:1px solid #e6e8ec;
	background:#fff;
}
.service-tab {
	display:flex;
	position:relative;
	height:82px;
	margin:0;
	padding:8px 2px 7px;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	gap:3px;
	border:0;
	border-radius:0;
	color:#989da5;
	font:500 13px/1.25 "Noto Sans KR","Malgun Gothic",sans-serif;
	letter-spacing:-.45px;
	white-space:nowrap;
	background:transparent;
	box-shadow:none;
	text-align:center;
	text-decoration:none;
}
.service-tab img {
	display:block;
	width:40px;
	height:40px;
	object-fit:contain;
	opacity:.72;
	transition:opacity .2s ease,transform .2s ease;
}
.service-tab span { display:block; }
.service-tab:after {
	position:absolute;
	right:4px;
	bottom:-1px;
	left:4px;
	height:3px;
	border-radius:3px 3px 0 0;
	background:#ffd737;
	content:"";
	opacity:0;
	transform:scaleX(.35);
	transition:opacity .2s ease,transform .2s ease;
}
.service-tab.is-active { color:#25282d; font-weight:700; }
.service-tab.is-active img { opacity:1; transform:translateY(-1px); }
.service-tab.is-active:after { opacity:1; transform:scaleX(1); }
.service-tab:focus { outline:0; }
.service-tab:focus-visible { outline:2px solid #ff9c6b; outline-offset:-4px; }
.theme-bbegi .service-tab:after { background:#ff7d3b; }

.service-panels { padding:34px 18px 12px; }
.service-section { margin:0 0 45px; }
.service-section:last-child { margin-bottom:8px; }
.service-heading {
	display:flex;
	align-items:center;
	gap:5px;
	margin:0 0 3px;
	color:#25282d;
	font-size:16px;
	font-weight:700;
	line-height:1.4;
	letter-spacing:-.45px;
}
.service-heading small { margin-left:-5px; font-size:12px; font-weight:700; }
.service-copy,
.service-list { margin:0; color:#40444a; font-size:14px; line-height:1.62; letter-spacing:-.35px; }
.service-list { padding-left:18px; list-style:disc; }
.service-list li { margin:0; padding:0; list-style:disc; }

.service-mark {
	display:block;
	position:relative;
	flex:0 0 30px;
	width:30px;
	height:30px;
	overflow:hidden;
	border-radius:9px;
	font-size:0;
	line-height:1;
	background:#fff0e8 no-repeat center/26px 26px;
}
.service-mark:before {
	position:absolute;
	top:6px;
	left:50%;
	width:7px;
	height:7px;
	margin-left:-3.5px;
	border-radius:50%;
	background:#e36a32;
	content:"";
}
.service-mark:after {
	position:absolute;
	bottom:5px;
	left:50%;
	width:16px;
	height:9px;
	margin-left:-8px;
	border-radius:9px 9px 4px 4px;
	background:#e36a32;
	content:"";
}
.service-mark[class*="mark-"]:before,
.service-mark[class*="mark-"]:after { display:none; }
.mark-blue { background-color:transparent; background-image:url('/images/renew/menu_guide.png'); }
.mark-yellow { background-color:transparent; background-image:url('/images/renew/grid_08.png'); }
.mark-green { background-color:transparent; background-image:url('/images/renew/menu_check.png'); }
.mark-purple { background-color:transparent; background-image:url('/images/renew/grid_03.png'); }
.mark-indigo { background-color:#eef4ff; background-image:url('/images/renew/ico_bulb.png'); background-size:22px 22px; }

.crew-row { display:flex; align-items:flex-start; padding:2px 0 0 31px; }
.crew-group { text-align:center; }
.crew-people { display:flex; gap:5px; justify-content:center; }
.crew-person {
	display:block;
	position:relative;
	width:36px;
	height:36px;
	overflow:hidden;
	border:2px solid #54c5bd;
	border-radius:50%;
	font-size:0;
	background:#effbf9;
}
.crew-person:before {
	position:absolute;
	top:7px;
	left:50%;
	width:8px;
	height:8px;
	margin-left:-4px;
	border-radius:50%;
	background:#319f99;
	content:"";
}
.crew-person:after {
	position:absolute;
	bottom:6px;
	left:50%;
	width:18px;
	height:10px;
	margin-left:-9px;
	border-radius:10px 10px 5px 5px;
	background:#319f99;
	content:"";
}
.crew-person.helper { border-color:#efc34e; background:#fff9df; }
.crew-person.helper:before,
.crew-person.helper:after { background:#c69617; }
.crew-group strong { display:block; margin-top:6px; font-size:13px; font-weight:700; }
.crew-plus { margin:9px 12px 0; color:#777; font-size:20px; font-weight:500; }

.office-points { margin:0; }
.office-point { position:relative; margin:0; padding:0 0 15px 16px; }
.office-point:last-child { padding-bottom:0; }
.office-point:before {
	position:absolute;
	top:7px;
	left:1px;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#ff7d3b;
	content:"";
}
.office-point dt { margin:0 0 3px; color:#2d3035; font-size:14px; font-weight:700; line-height:1.45; }
.office-point dd { margin:0; color:#666b72; font-size:13px; line-height:1.5; }

.service-info-flow .service-actions {
	position:fixed;
	left:50%;
	bottom:env(safe-area-inset-bottom,0px);
	width:100%;
	max-width:none;
	margin:0;
	padding:10px 14px;
	transform:translateX(-50%);
	border-top:1px solid rgba(0,0,0,.06);
	background:rgba(246,247,249,.96);
	box-shadow:0 -5px 16px rgba(32,38,46,.06);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}
.service-info-flow .service-actions .next { transition:background-color .2s ease,color .2s ease; }
.service-info-flow .service-actions .next:focus { outline:3px solid rgba(255,125,59,.18); outline-offset:2px; }
.service-info-flow #footer_wrap { margin-bottom:calc(76px + env(safe-area-inset-bottom,0px)); }

@media (max-width:350px) {
	.service-tab { font-size:12px; letter-spacing:-.65px; }
	.service-tab img { width:36px; height:36px; }
	.service-panels { padding-right:14px; padding-left:14px; }
	.service-copy,.service-list { font-size:13.5px; }
	.crew-row { padding-left:24px; }
	.crew-plus { margin-right:8px; margin-left:8px; }
}
@media (min-width:768px) {
	.service-info-flow .service-page,
	.service-info-flow .service-actions { max-width:none; }
	.service-info-flow .service-intro { padding-right:28px; padding-left:28px; }
	.service-tabs { padding-right:20px; padding-left:20px; }
	.service-panels { padding:30px 28px 18px; }
}
@media (prefers-reduced-motion:reduce) {
	.service-tab img,
	.service-tab:after { transition:none; }
}