모바일에서 버튼 텍스트가 한 글자씩 줄바꿈되지 않도록 수정했습니다.

This commit is contained in:
2025-12-19 11:09:12 +09:00
parent 03dbde916f
commit 320828ece8

View File

@@ -144,6 +144,12 @@
font-size: clamp(1rem, 4vw, 1.5rem);
line-height: 1.3;
}
/* 모바일 버튼 텍스트 줄바꿈 방지 */
button {
word-break: keep-all;
white-space: nowrap;
}
}
</style>
</head>
@@ -242,12 +248,12 @@
<strong>오직 CEO를 위한 시크릿 대시보드</strong>를 제안하십시오.
</p>
<div class="flex justify-center gap-4 animate-fade-in-up delay-300 relative z-20">
<button onclick="showDownloadToast()" class="px-8 py-3 rounded-xl bg-slate-900 text-white font-semibold hover:bg-slate-800 hover:shadow-lg transition-all transform hover:-translate-y-1 active:scale-95">
<button onclick="showDownloadToast()" class="px-4 sm:px-8 py-3 rounded-xl bg-slate-900 text-white font-semibold hover:bg-slate-800 hover:shadow-lg transition-all transform hover:-translate-y-1 active:scale-95 whitespace-nowrap text-sm sm:text-base">
제안서 다운로드
</button>
<button onclick="filterAssets('Demo')" class="px-8 py-3 rounded-xl bg-white text-slate-700 border border-slate-200 font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all flex items-center gap-2 active:scale-95">
<i data-lucide="layout-grid" class="w-5 h-5"></i>
세일즈 덱 보기
<button onclick="filterAssets('Demo')" class="px-4 sm:px-8 py-3 rounded-xl bg-white text-slate-700 border border-slate-200 font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all flex items-center gap-2 active:scale-95 whitespace-nowrap text-sm sm:text-base">
<i data-lucide="layout-grid" class="w-5 h-5 flex-shrink-0"></i>
<span>세일즈 덱 보기</span>
</button>
</div>
@@ -508,7 +514,7 @@
filterContainer.innerHTML = FILTERS.map(filter => `
<button
onclick="filterAssets('${filter}')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 ${activeFilter === filter ? 'bg-slate-900 text-white shadow-md' : 'bg-white text-slate-600 hover:bg-slate-100 border border-transparent hover:border-slate-200'}"
class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors duration-200 whitespace-nowrap ${activeFilter === filter ? 'bg-slate-900 text-white shadow-md' : 'bg-white text-slate-600 hover:bg-slate-100 border border-transparent hover:border-slate-200'}"
>
${filter}
</button>
@@ -737,16 +743,16 @@
</div>
<div class="p-4 border-t border-slate-100 bg-slate-50 rounded-b-2xl flex justify-end gap-3">
<button onclick="closeModal()" class="px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium hover:bg-slate-50 transition-colors">닫기</button>
<button onclick="closeModal()" class="px-3 sm:px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium hover:bg-slate-50 transition-colors whitespace-nowrap text-sm sm:text-base">닫기</button>
${asset.pdf ? `
<button onclick="openPdfViewer('${asset.id}')" class="px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4"></i>
상세자료 보기
<button onclick="openPdfViewer('${asset.id}')" class="px-3 sm:px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2 whitespace-nowrap text-sm sm:text-base">
<i data-lucide="file-text" class="w-4 h-4 flex-shrink-0"></i>
<span>상세자료 보기</span>
</button>
` : `
<button onclick="showDownloadToast(); closeModal()" class="px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2">
<i data-lucide="download" class="w-4 h-4"></i>
자료 사용하기
<button onclick="showDownloadToast(); closeModal()" class="px-3 sm:px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2 whitespace-nowrap text-sm sm:text-base">
<i data-lucide="download" class="w-4 h-4 flex-shrink-0"></i>
<span>자료 사용하기</span>
</button>
`}
</div>