/* =========================================================
   FAQ - 아우름 가이드북
========================================================= */

.faq-guidebook[hidden],
.faq-guidebook-grid-hidden {
	display: none !important;
}

.faq-guidebook {
	flex: 1 1 0;
	min-width: 0;
	max-width: 986px;
	margin-left: auto;
	box-sizing: border-box;

	font-family: "Pretendard Variable", "Pretendard", sans-serif;
	color: #505050;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.faq-guidebook *,
.faq-guidebook *::before,
.faq-guidebook *::after {
	box-sizing: border-box;
}

.faq-guidebook p,
.faq-guidebook h2,
.faq-guidebook h3,
.faq-guidebook ul,
.faq-guidebook ol {
	margin: 0;
	padding: 0;
}

.faq-guidebook b,
.faq-guidebook strong {
	font-weight: 700;
}

.faq-guidebook .is-blue {
	color: #1b93fe;
}

.faq-guidebook img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}


/* CARD */

.faq-guidebook__card {
	display: flex;
	flex-direction: column;
	gap: 20px;

	padding: 65px 100px;

	background: #fff;
	border: 1px solid #ededed;
	border-radius: 12px;
}


/* HEAD */

.faq-guidebook__head {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.faq-guidebook__heading {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-guidebook__eyebrow {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: #1b93fe;
}

.faq-guidebook .faq-guidebook__title {
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: #252525;
}

.faq-guidebook__intro {
	padding: 16px;

	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.32px;

	background: #f8f9fb;
	border-radius: 12px;
}


/* STEPS */

.faq-guidebook__steps {
	display: flex;
	flex-direction: column;
	gap: 13px;

	list-style: none;
}

.faq-guidebook__step {
	display: flex;
	gap: 16px;
	align-items: stretch;

	margin: 0;
}

.faq-guidebook__marker {
	display: flex;
	flex: 0 0 32px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* 번호 아래 세로 라인 (마지막 단계 제외) */
.faq-guidebook__marker::after {
	content: "";
	flex: 1 1 auto;
	width: 2px;
	background: #ddd;
}

.faq-guidebook__step:last-child .faq-guidebook__marker::after {
	display: none;
}

.faq-guidebook__num {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;

	background: #1b93fe;
	border-radius: 999px;
}

.faq-guidebook__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;

	min-width: 0;
	padding: 3px 0 0;
}

.faq-guidebook__section {
	display: flex;
	flex-direction: column;
	gap: 10px;

	width: 100%;

	font-size: 16px;
	line-height: 1.45;
	letter-spacing: -0.32px;
}

.faq-guidebook .faq-guidebook__step-title {
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: #252525;
}

.faq-guidebook__bullets {
	display: flex;
	flex-direction: column;
	gap: 3px;

	padding-left: 24px !important;

	list-style: disc;
}

.faq-guidebook__bullets li {
	margin: 0;
}

.faq-guidebook__note {
	color: #999;
}

/* "*", "※"로 시작하는 문단(본문·하단 안내):
   기호는 다른 문단과 같은 시작점에 두고, 기호 뒤 글자의 줄바꿈은 첫 줄 글자 시작점에 맞춤 */
.faq-guidebook .has-mark {
	position: relative;
	padding-left: 12px;
}

.faq-guidebook__mark {
	position: absolute;
	top: 0;
	left: 0;
}

/* 가운데 정렬(Au Story)·모바일 인라인 문단(환영 문구) 박스에서는 기호를 글자 앞에 그대로 둔다 */
.faq-guidebook__story .has-mark,
.faq-guidebook__intro .has-mark {
	padding-left: 0;
}

.faq-guidebook__story .faq-guidebook__mark,
.faq-guidebook__intro .faq-guidebook__mark {
	position: static;
	margin-right: 0.3em;
}


/* LINK BUTTON */

.faq-guidebook .faq-guidebook__link {
	display: inline-flex;
	align-items: center;
	gap: 30px;

	padding: 12px 7px 12px 16px;

	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: #252525;
	text-decoration: none;

	background: #ededed;
	border-radius: 12px;

	transition: background-color 0.2s ease;
}

.faq-guidebook .faq-guidebook__link:hover,
.faq-guidebook .faq-guidebook__link:focus-visible {
	color: #252525;
	background: #e2e2e2;
}

.faq-guidebook__link-icon,
.faq-guidebook__arrow {
	flex: 0 0 auto;
	width: 24px;
	transform: rotate(90deg);
}


/* ILLUST BOX */

.faq-guidebook__box {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	background: #f8f9fb;
	border-radius: 12px;
}

/* 2. Au Story */
.faq-guidebook__box--story {
	justify-content: space-between;
	gap: 30px;

	padding: 20px 120px;
}

.faq-guidebook__coins {
	position: relative;
	flex: 0 0 150px;
	width: 150px;
	height: 150px;
}

.faq-guidebook .faq-guidebook__coins-img {
	position: relative;
	z-index: 1;
	width: 150px;
	height: 150px;
	object-fit: cover;
	transform: scale(1.16);
}

.faq-guidebook .faq-guidebook__sparkle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;

	width: 217px;
	max-width: none;
	height: 134px;

	transform: translate(-53%, -52%);
	pointer-events: none;
}

.faq-guidebook__story {
	display: flex;
	flex-direction: column;
	gap: 10px;

	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.32px;
}

.faq-guidebook__story-title {
	font-weight: 700;
}

/* 3·5. 아이콘 흐름 */
.faq-guidebook__box--flow {
	gap: 10px;
	padding: 30px 20px;
}

.faq-guidebook__btn-plus,
.faq-guidebook__btn-attendance {
	display: flex;
	flex: 0 0 50px;
	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	border-radius: 8px;
}

.faq-guidebook__btn-plus {
	background: #ededed;
	border: 1px solid #ddd;
}

.faq-guidebook__btn-plus img {
	width: 24px;
}

.faq-guidebook__btn-attendance {
	flex-direction: column;
	gap: 3px;

	padding-top: 1px;

	font-size: 10px;
	font-weight: 500;
	line-height: 13px;
	color: #fff;
	white-space: nowrap;

	background: #1b93fe;
	border: 1px solid #0087ff;
}

.faq-guidebook .faq-guidebook__btn-attendance img {
	width: 19px;
	height: 20px;
}

/* 4. Au 코인 */
.faq-guidebook__box--coin {
	flex-direction: column;
	gap: 10px;

	padding: 30px 20px 28px;
}

.faq-guidebook .faq-guidebook__coin-img {
	width: 150px;
	height: 150px;
	object-fit: cover;
}

.faq-guidebook__coin-line {
	display: block;
	width: 50px;
	height: 1px;
	background: #ddd;
}

/* 코인 박스 아래 설명 문단 간격 (시안 20px) */
.faq-guidebook__box--coin + .faq-guidebook__section {
	gap: 20px;
}

.faq-guidebook__coin-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: #777;
}

/* 5. 마이페이지 */
.faq-guidebook__box--mypage {
	gap: 20px;
	padding: 30px 70px;
}

.faq-guidebook .faq-guidebook__mypage-icon {
	width: 28px;
	padding: 1px;
}

.faq-guidebook__mock {
	display: flex;
	flex: 0 0 150px;
	flex-direction: column;

	width: 150px;
	height: 88px;
	overflow: hidden;

	border-radius: 12px;
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.faq-guidebook__mock-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	height: 36px;
	padding: 6px 8px;

	background: linear-gradient(166.5deg, #1b93fe 0%, #10d0ca 100%);
}

.faq-guidebook__mock-name {
	width: 30px;
	height: 8px;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}

.faq-guidebook__mock-tabs {
	display: flex;
	align-items: flex-end;
	gap: 2px;
}

.faq-guidebook__mock-tabs span {
	width: 20px;
	height: 12px;
	background: rgba(255, 255, 255, 0.2);
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

.faq-guidebook__mock-tabs span:first-child {
	width: 30px;
	height: 18px;
	border-radius: 4px;
}

.faq-guidebook__mock-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 5px;

	padding-top: 15px;

	background: #fff;
}

.faq-guidebook__mock-body span {
	width: 80px;
	height: 3px;
	background: #f0f0f0;
	border-radius: 999px;
}

.faq-guidebook__mock-body span:nth-child(2) {
	width: 60px;
}

.faq-guidebook__mock-body span:nth-child(3) {
	width: 44px;
}


/* =========================================================
   중간 폭 (1025px ~ 1440px): 카드 내부 여백 축소
========================================================= */

@media screen and (max-width: 1440px) {

	/* 좌측 필터와 붙지 않도록 간격 확보 */
	.faq-guidebook {
		max-width: none;
		margin-left: 20px;
	}

	.faq-guidebook__card {
		padding: 50px 60px;
	}

	.faq-guidebook__box--story {
		padding: 20px 60px;
	}
}


/* =========================================================
   TABLET : 1024px 이하
========================================================= */

@media screen and (max-width: 1024px) {

	.faq-guidebook {
		flex: 0 0 100%;
		background: #F8F9FB;
		width: 100%;
		max-width: none;
		margin-left: 0;
		padding: 30px 20px; /* FAQ 목록(Loop Item) 좌우 여백과 동일 */
	}

	.faq-guidebook__card {
		padding: 40px;
	}
}


/* 줄바꿈 제어
   - br.is-pc-only     : 모바일에서 숨김
   - .faq-guidebook__mo-break : 모바일에서만 줄바꿈 (block 요소라 브라우저 차이 없음) */
.faq-guidebook__mo-break {
	display: none;
}

/* Au Story 가운데 정렬 문장: 줄 길이를 고르게 맞춰 빈 공간 최소화 */
.faq-guidebook__story p:last-child {
	text-wrap: balance;
}


/* =========================================================
   MOBILE : 767px 이하
   - 시안 04_FAQ_Guidebook (모바일 402px 프레임) 기준 수치
========================================================= */

@media screen and (max-width: 767px) {

	.faq-guidebook br.is-pc-only {
		display: none;
	}

	.faq-guidebook__mo-break {
		display: block;
	}


	/* CARD */

	.faq-guidebook__card {
		gap: 30px;
		padding: 30px 20px;
	}


	/* HEAD */

	.faq-guidebook__heading {
		gap: 5px;
	}

	.faq-guidebook__eyebrow {
		font-size: 14px;
		letter-spacing: -0.28px;
	}

	.faq-guidebook .faq-guidebook__title {
		font-size: 18px;
		letter-spacing: -0.36px;
	}

	.faq-guidebook__intro {
		padding: 12px;
		font-size: 14px;
		letter-spacing: -0.28px;
	}

	/* 두 문장을 이어서 흐르게 */
	.faq-guidebook__intro p {
		display: inline;
	}


	/* STEPS */

	.faq-guidebook__step {
		gap: 12px;
	}

	.faq-guidebook__body {
		padding: 3px 0;
	}

	.faq-guidebook .faq-guidebook__step-title {
		font-size: 16px;
		letter-spacing: -0.32px;
	}

	.faq-guidebook__section,
	.faq-guidebook__story {
		font-size: 14px;
		letter-spacing: -0.28px;
	}

	.faq-guidebook__bullets {
		padding-left: 20px !important;
	}


	/* LINK BUTTON */

	.faq-guidebook .faq-guidebook__link {
		padding: 8px 7px 8px 16px;
		border-radius: 8px;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
	}


	/* 2. Au Story */

	.faq-guidebook__box--story {
		flex-direction: column;
		gap: 8px;
		padding: 20px;
		text-align: center;
	}

	.faq-guidebook__coins,
	.faq-guidebook .faq-guidebook__coins-img {
		flex-basis: 140px;
		width: 140px;
		height: 140px;
	}

	.faq-guidebook .faq-guidebook__sparkle {
		transform: translate(-53%, -56%);
	}

	.faq-guidebook__story {
		gap: 4px;
	}


	/* 3. 출석체크 */

	.faq-guidebook__box--flow {
		padding: 30px 20px;
	}


	/* 4. Au 코인 */

	.faq-guidebook__box--coin {
		padding: 30px 20px 28px;
	}

	.faq-guidebook .faq-guidebook__coin-img {
		width: 130px;
		height: 130px;
	}


	/* 5. 마이페이지 (세로형 카드) */

	.faq-guidebook__box--mypage {
		gap: 20px;
		padding: 30px 20px;
	}

	.faq-guidebook__mock {
		flex: 0 0 80px;
		width: 80px;
		height: 113px;
		border-radius: 8px;
	}

	.faq-guidebook__mock-head {
		flex: 0 0 68px;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		gap: 5px;
		height: 68px;
		padding: 8px 8px 5px;
	}

	.faq-guidebook__mock-name {
		width: 100%;
		height: 7px;
	}

	.faq-guidebook__mock-tabs {
		flex-wrap: wrap;
		gap: 4px 2px;
	}

	.faq-guidebook__mock-tabs span {
		flex: 1 1 0;
		width: auto;
		height: 11px;
		border-radius: 2px;
	}

	.faq-guidebook__mock-tabs span:first-child {
		flex: 0 0 100%;
		width: 100%;
		height: 15px;
		border-radius: 3px;
	}

	.faq-guidebook__mock-body {
		gap: 6px;
		padding-top: 13px;
	}

	.faq-guidebook__mock-body span {
		width: 60px;
		height: 3px;
	}

	.faq-guidebook__mock-body span:nth-child(2) {
		width: 44px;
	}

	.faq-guidebook__mock-body span:nth-child(3) {
		display: none;
	}
}


/* =========================================================
   SMALL MOBILE : 360px 이하
   - Au Story 가운데 정렬 문장의 줄바꿈 빈 공간 완화
========================================================= */

@media screen and (max-width: 360px) {

	.faq-guidebook__box--story {
		padding: 20px 12px;
		overflow: hidden;
	}

	.faq-guidebook__story {
		letter-spacing: -0.42px;
	}

	/* 반짝이 장식이 박스 밖으로 넘치지 않도록 코인과 함께 축소 */
	.faq-guidebook__coins,
	.faq-guidebook .faq-guidebook__coins-img {
		flex-basis: 120px;
		width: 120px;
		height: 120px;
	}

	.faq-guidebook .faq-guidebook__sparkle {
		width: 174px;
		height: 107px;
	}
}