공지사항/FAQ 상세 페이지 HTML 콘텐츠 모바일 반응형 정제 기능 추가

- HTML 정제 유틸리티 함수 추가 (sanitizeHtmlContent)
- PC 웹용 인라인 스타일 제거 (color/background-color는 유지)
- 텍스트 기반 구분선(---, ===)을 HTML <hr> 태그로 자동 변환
- 이미지 및 링크 반응형 클래스 추가
- 연속된 공백/줄바꿈 정리
- 모바일 최적화 CSS 스타일 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-21 19:00:23 +09:00
parent 51179b3e22
commit 8188228728
5 changed files with 329 additions and 30 deletions

View File

@@ -2527,8 +2527,75 @@ div .credit-period {
white-space: pre-line;
font-size: var(--fs-17);
line-height: 1.3;
color: var(--color-2D3436)
color: var(--color-2D3436);
overflow-x: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
max-width: 100%;
}
.notice-detail__body * {
max-width: 100% !important;
box-sizing: border-box;
}
.notice-detail__body img {
height: auto !important;
width: auto !important;
max-width: 100% !important;
}
.notice-detail__body table {
display: block;
overflow-x: auto;
max-width: 100%;
}
.notice-detail__body pre {
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
max-width: 100%;
}
.notice-detail__body .notice-content-img {
display: block;
margin: 16px auto;
max-width: 100%;
height: auto;
}
.notice-detail__body .notice-content-link {
color: var(--color-0083FF);
text-decoration: underline;
word-break: break-all;
display: inline-block;
margin: 4px 0;
}
.notice-detail__body p {
margin: 8px 0;
line-height: 1.6;
}
.notice-detail__body strong {
font-weight: 600;
color: var(--color-2D3436);
}
.notice-detail__body br + br {
display: block;
margin-top: 8px;
}
.notice-detail__body .text-divider {
border: none;
border-top: 1px solid var(--color-EaEaEa);
margin: 20px 0;
height: 0;
}
.notice-alert {
padding: 14px 16px;
background: var(--color-F4F8FF);
@@ -5773,6 +5840,72 @@ ul.txn-amount-detail li span:last-child {
.faq-detail__body {
font-size: var(--fs-17);
color: var(--color-2D3436);
overflow-x: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
max-width: 100%;
}
.faq-detail__body * {
max-width: 100% !important;
box-sizing: border-box;
}
.faq-detail__body img {
height: auto !important;
width: auto !important;
max-width: 100% !important;
}
.faq-detail__body table {
display: block;
overflow-x: auto;
max-width: 100%;
}
.faq-detail__body pre {
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
max-width: 100%;
}
.faq-detail__body .faq-content-img {
display: block;
margin: 16px auto;
max-width: 100%;
height: auto;
}
.faq-detail__body .faq-content-link {
color: var(--color-0083FF);
text-decoration: underline;
word-break: break-all;
display: inline-block;
margin: 4px 0;
}
.faq-detail__body p {
margin: 8px 0;
line-height: 1.6;
}
.faq-detail__body strong {
font-weight: 600;
color: var(--color-2D3436);
}
.faq-detail__body br + br {
display: block;
margin-top: 8px;
}
.faq-detail__body .text-divider {
border: none;
border-top: 1px solid #EAEAEA;
margin: 20px 0;
height: 0;
}
/* 117 1:1 문의 */