mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mingle-website/css/qna.css
68893236+KINDNICK@users.noreply.github.com 0b55235d4f Update: 전체 디자인 시스템 강화 및 다크모드 개선 
- CSS 변수 시스템 확장 (4단계 그림자, 다크모드 텍스트 불투명도, 틸 악센트, 스태거 딜레이)
- btn-secondary 오렌지→틸 아웃라인으로 차별화
- 카드 변형 클래스 추가 (card--flat/elevated/interactive)
- 6개 페이지 CSS 중복 제거 및 그림자/다크모드 표준화
- 다크모드 텍스트 가시성 수정 (QnA, services 등)
- reveal 애니메이션 변형 (fade, zoom) 및 stagger-children 적용
- 태블릿 브레이크포인트 (769px~1024px) 추가
- 공통 page-header 스타일 통합

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 23:33:07 +09:00

598 lines
12 KiB
CSS
Raw Permalink Blame History

/* ========================================
FAQ 페이지 전용 스타일
======================================== */
/* FAQ 검색 */
.faq-search {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.search-box {
position: relative;
width: 100%;
}
.search-box input {
width: 100%;
padding: var(--spacing-lg) var(--spacing-xl);
padding-right: 60px;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-full);
font-size: var(--font-lg);
background: var(--bg-white);
transition: var(--transition);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.1);
}
.search-btn {
position: absolute;
right: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: var(--font-xl);
cursor: pointer;
padding: var(--spacing-sm);
border-radius: 50%;
transition: var(--transition);
}
.search-btn:hover {
background: rgba(255, 136, 0, 0.1);
}
/* 검색 제안 */
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-top: var(--spacing-sm);
max-height: 200px;
overflow-y: auto;
z-index: 100;
display: none;
}
.search-suggestions.active {
display: block;
}
.suggestion-item {
padding: var(--spacing-md) var(--spacing-lg);
cursor: pointer;
transition: var(--transition);
border-bottom: 1px solid var(--bg-gray);
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover {
background: rgba(255, 136, 0, 0.05);
}
/* FAQ 카테고리 섹션 */
.faq-category-section {
padding: var(--spacing-md) 0 var(--spacing-sm);
background: var(--bg-light);
}
/* FAQ 카테고리 */
.faq-categories {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.category-btn {
padding: var(--spacing-sm) var(--spacing-lg);
border: 2px solid var(--border-color);
background: var(--bg-white);
color: var(--text-secondary);
border-radius: var(--border-radius-full);
cursor: pointer;
transition: var(--transition);
font-size: var(--font-sm);
font-weight: 500;
}
.category-btn:hover,
.category-btn.active {
border-color: var(--primary-color);
background: var(--primary-color);
color: var(--text-white);
}
/* FAQ 리스트 */
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-lg);
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
box-shadow: var(--shadow-md);
}
.faq-item.hidden {
display: none;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xl);
cursor: pointer;
background: var(--bg-white);
transition: var(--transition);
}
.faq-question:hover {
background: rgba(255, 136, 0, 0.02);
}
.faq-question h3 {
margin: 0;
font-size: var(--font-lg);
color: var(--text-primary);
flex: 1;
padding-right: var(--spacing-md);
}
.faq-toggle {
font-size: var(--font-2xl);
color: var(--primary-color);
font-weight: bold;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 136, 0, 0.1);
transition: var(--transition);
flex-shrink: 0;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
background: var(--primary-color);
color: var(--text-white);
}
.faq-answer {
padding: 0 var(--spacing-xl);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: var(--bg-light);
}
.faq-item.active .faq-answer {
padding: var(--spacing-xl);
max-height: 5000px;
overflow: visible;
}
.faq-answer p {
margin-bottom: var(--spacing-md);
line-height: 1.7;
color: var(--text-secondary);
}
.faq-answer ul {
margin: var(--spacing-md) 0;
padding-left: var(--spacing-lg);
}
.faq-answer li {
margin-bottom: var(--spacing-sm);
line-height: 1.6;
color: var(--text-secondary);
}
.faq-answer strong {
color: var(--primary-color);
font-weight: 600;
}
/* 정책 테이블 */
.policy-table {
margin: var(--spacing-lg) 0;
border-radius: var(--border-radius-sm);
overflow: hidden;
border: 1px solid var(--border-color);
}
.policy-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
background: var(--bg-white);
}
.policy-row:last-child {
border-bottom: none;
}
.policy-time {
font-weight: 600;
color: var(--text-primary);
min-width: 80px;
}
.policy-desc {
color: var(--text-secondary);
}
/* 가격 테이블 */
.pricing-table {
margin: var(--spacing-lg) 0;
}
.pricing-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
background: var(--bg-white);
}
.pricing-item:last-child {
border-bottom: none;
}
.service-name {
font-weight: 500;
color: var(--text-primary);
}
.service-price {
font-weight: 700;
color: var(--primary-color);
font-size: var(--font-lg);
}
/* CTA 섹션 */
.cta-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--spacing-xl);
}
/* 검색 결과 하이라이트 */
.search-highlight {
background: rgba(255, 136, 0, 0.3);
padding: 2px 4px;
border-radius: 3px;
font-weight: 500;
}
/* 로딩 스타일 */
.faq-loading {
text-align: center;
padding: var(--spacing-2xl);
display: none;
}
.faq-loading.active {
display: block;
}
/* 검색 결과 없음 */
.no-results {
text-align: center;
padding: var(--spacing-3xl);
color: var(--text-secondary);
display: none;
}
.no-results.active {
display: block;
}
.no-results-icon {
font-size: 4rem;
margin-bottom: var(--spacing-lg);
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.search-box input {
font-size: var(--font-base);
padding: var(--spacing-lg);
padding-right: 50px;
}
.search-btn {
font-size: var(--font-lg);
}
.faq-categories {
gap: var(--spacing-xs);
}
.category-btn {
font-size: var(--font-xs);
padding: var(--spacing-xs) var(--spacing-md);
}
.faq-question {
padding: var(--spacing-lg);
}
.faq-question h3 {
font-size: var(--font-base);
}
.faq-toggle {
font-size: var(--font-xl);
width: 25px;
height: 25px;
}
.faq-item.active .faq-answer {
padding: var(--spacing-lg);
}
.policy-row {
flex-direction: column;
gap: var(--spacing-xs);
}
.policy-time {
min-width: auto;
font-size: var(--font-sm);
}
.pricing-item {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.faq-search {
margin: 0 var(--spacing-md);
}
.faq-list {
margin: 0 var(--spacing-md);
}
.faq-question {
padding: var(--spacing-md);
}
.faq-item.active .faq-answer {
padding: var(--spacing-md);
}
.faq-answer p,
.faq-answer li {
font-size: var(--font-sm);
}
.service-price {
font-size: var(--font-base);
}
}
/* ========================================
다크모드
======================================== */
[data-theme="dark"] .page-header {
background: var(--dark-header-gradient);
}
[data-theme="dark"] .faq-search {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .search-box input {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
color: var(--dark-text-primary);
}
[data-theme="dark"] .search-box input::placeholder {
color: var(--dark-text-disabled);
}
[data-theme="dark"] .search-box input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.15);
}
[data-theme="dark"] .search-btn {
background: var(--primary-color);
color: white;
}
[data-theme="dark"] .search-suggestions {
background: var(--dark-surface);
border-color: var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .search-suggestions button {
color: var(--dark-text-secondary);
}
[data-theme="dark"] .search-suggestions button:hover {
background: rgba(255, 136, 0, 0.1);
color: var(--primary-color);
}
[data-theme="dark"] .category-btn {
background: transparent;
color: var(--dark-text-secondary);
border-color: var(--glass-border);
}
[data-theme="dark"] .category-btn:hover {
border-color: rgba(255, 136, 0, 0.4);
color: var(--primary-color);
}
[data-theme="dark"] .category-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
[data-theme="dark"] .faq-item {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .faq-item:hover {
border-color: rgba(255, 136, 0, 0.2);
}
[data-theme="dark"] .faq-item.active {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 136, 0, 0.08);
}
[data-theme="dark"] .faq-question {
background: transparent;
color: var(--dark-text-primary);
}
[data-theme="dark"] .faq-question h3 {
color: var(--dark-text-primary);
}
[data-theme="dark"] .faq-toggle {
color: var(--primary-color);
background: rgba(255, 136, 0, 0.15);
}
[data-theme="dark"] .faq-answer {
border-top-color: var(--glass-border);
}
[data-theme="dark"] .faq-answer p,
[data-theme="dark"] .faq-answer li {
color: var(--dark-text-secondary);
}
[data-theme="dark"] .faq-answer strong {
color: var(--primary-color);
}
[data-theme="dark"] .policy-table,
[data-theme="dark"] .pricing-table {
background: var(--dark-surface);
border-color: var(--glass-border);
}
[data-theme="dark"] .policy-row,
[data-theme="dark"] .pricing-item {
background: rgba(255, 255, 255, 0.03);
border-color: var(--glass-border);
color: var(--dark-text-secondary);
}
[data-theme="dark"] .policy-time {
color: var(--dark-text-primary);
}
[data-theme="dark"] .policy-desc {
color: var(--dark-text-secondary);
}
[data-theme="dark"] .service-name {
color: var(--dark-text-primary);
}
[data-theme="dark"] .service-price {
color: var(--primary-color);
}
[data-theme="dark"] .no-results {
color: var(--dark-text-tertiary);
}
[data-theme="dark"] .cta-section {
background: var(--dark-header-gradient);
}
/* 서제스천 아이템 보더 */
[data-theme="dark"] .suggestion-item {
border-bottom-color: var(--glass-border);
color: var(--dark-text-secondary);
}
[data-theme="dark"] .suggestion-item:hover {
background: rgba(255, 136, 0, 0.1);
color: var(--primary-color);
}
/* FAQ 카테고리 섹션 */
[data-theme="dark"] .faq-category-section {
background: transparent;
}
/* FAQ 답변 배경 */
[data-theme="dark"] .faq-answer {
background: rgba(255, 255, 255, 0.07);
}
/* 정책/가격 테이블 보더 */
[data-theme="dark"] .policy-table {
border-color: var(--glass-border);
}
[data-theme="dark"] .policy-row {
border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .pricing-table {
border-color: var(--glass-border);
}
[data-theme="dark"] .pricing-item {
border-bottom-color: var(--glass-border);
}
Reference in New Issue View Git Blame Copy Permalink