/**
 * 에이탑 주의사항 - 프론트 표시 스타일 (자체 포함 / 폴백)
 *
 * 이 플러그인은 기존 사이트와 동일한 클래스명(sub_caution_num, sub_sub_title 등)을
 * 출력하므로, 테마에 해당 CSS가 있으면 그대로 동일하게 표시됩니다.
 * 아래 규칙은 테마 CSS가 적용되지 않는 경우에도 같은 모양이 나오도록 하는
 * 폴백이며, 다른 페이지에 영향을 주지 않도록 .atop-caution / .atop-caution-list
 * 범위로만 제한했습니다.
 */

/* ===== 개별 주의사항 ===== */
.atop-caution {
	--atop-accent: #953636;
	--atop-box-bg: #f8f8f9;
	color: #333;
}

.atop-caution .atop-caution-section {
	margin-bottom: 40px;
}
.atop-caution .atop-caution-section:last-child {
	margin-bottom: 0;
}

/* 섹션 제목 */
.atop-caution .sub_sub_title h2 {
	font-size: 26px;
	font-weight: 700;
	color: #171717;
	margin: 0 0 18px;
	padding-left: 16px;
	position: relative;
	line-height: 1.4;
}
.atop-caution .sub_sub_title.main_af h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 5px;
	border-radius: 3px;
	background: var(--atop-accent);
}
.atop-caution .sub_sub_title h2 strong { font-weight: 700; }

/* 회색 박스 */
.atop-caution .atop-caution-box {
	background: var(--atop-box-bg);
	border-radius: 20px;
	padding: 0px 0px;
}

/* 번호 목록 */
.atop-caution .sub_caution_num ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.atop-caution .sub_caution_num > ul > li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0px 0;
	line-height: 1.7;
}
.atop-caution .sub_caution_num > ul > li > strong {
	flex: 0 0 auto;
	min-width: 30px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 28px;
}
.atop-caution .sub_caution_num .list_txt {
	flex: 1 1 auto;
	font-size: 16px;
	color: #171717;
    max-width: 81%;
}
.atop-caution .sub_caution_num .list_txt .sm-txt {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
	color: #f15b5b;
	line-height: 1.6;
}

/* 소제목(리스트 내 헤딩) */
.atop-caution .sub_caution_num > ul > li.top_main_txt {
	font-size: 18px;
    font-weight: 600;
    padding-top: 30px;
    color: #f15b5b;
    padding-bottom: 10px;
}

/* 이미지 */
.atop-caution .atop-caution-img {
	margin: 14px 0 4px;
}
.atop-caution .atop-caution-img img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 하단 안내문(유튜브 등) */
.atop-caution .sub_caution_btntxt ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.atop-caution .sub_caution_btntxt li {
	font-size: 14px;
	color: #7a5b5b;
	line-height: 1.6;
}

/* ===== 전체 목록 ===== */
.atop-caution-list .sub_caution_list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.atop-caution-list .sub_caution_list li {
	margin: 0;
}
.atop-caution-list .sub_caution_list li a,
.atop-caution-list .sub_caution_list li span {
	display: inline-block;
	padding: 12px 26px;
	border: 1px solid #e2dada;
	border-radius: 30px;
	background: #fff;
	color: #333;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s ease;
}
.atop-caution-list .sub_caution_list li a:hover {
	background: #953636;
	border-color: #953636;
	color: #fff;
}

/* ===== 반응형 ===== */
@media ( max-width: 767px ) {
	.atop-caution .atop-caution-box { padding: 0px 0px; }
	.atop-caution .sub_sub_title h2 { font-size: 22px; }
	.atop-caution .sub_caution_num .list_txt { font-size: 15px; }
	.atop-caution .sub_caution_num > ul > li { gap: 12px; }
	.atop-caution-list .sub_caution_list li a,
	.atop-caution-list .sub_caution_list li span { padding: 10px 18px; font-size: 14px; }
    .atop-caution .sub_caution_num > ul > li > strong{line-height: 25px;}
}