모바일에서 타이틀 줄바꿈 방지를 위한 CSS 추가 완료.

This commit is contained in:
2025-12-19 11:03:48 +09:00
parent 691dd1c3a9
commit 03dbde916f

View File

@@ -130,6 +130,21 @@
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Mobile title optimization - prevent single character line breaks */
@media (max-width: 640px) {
.break-keep {
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
/* 타이틀 폰트 크기 조정으로 한 글자 줄바꿈 방지 */
h1, h2, h3.title-responsive {
font-size: clamp(1rem, 4vw, 1.5rem);
line-height: 1.3;
}
}
</style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
@@ -215,9 +230,9 @@
<i data-lucide="shield-check" class="w-4 h-4"></i>
CEO Management Solution
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 animate-fade-in-up delay-100">
직원 관리 도구가 아닙니다.<br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-indigo-600">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 animate-fade-in-up delay-100 leading-tight">
<span class="whitespace-nowrap">직원 관리 도구가 아닙니다.</span><br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-indigo-600 whitespace-nowrap">
대표님 경영 무기입니다.
</span>
</h1>
@@ -571,7 +586,7 @@
</button>
</div>
<h3 class="text-lg font-bold text-slate-900 mb-2 group-hover:text-brand-600 transition-colors">${asset.title}</h3>
<h3 class="text-base sm:text-lg font-bold text-slate-900 mb-2 group-hover:text-brand-600 transition-colors break-keep leading-tight" style="word-break: keep-all; overflow-wrap: break-word;">${asset.title}</h3>
<div class="flex-grow">
<p class="text-slate-600 text-sm leading-relaxed mb-4 line-clamp-3">
@@ -692,7 +707,7 @@
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto pointer-events-auto scale-95 opacity-0 transition-all duration-300" id="modal-card">
<div class="sticky top-0 bg-white/90 backdrop-blur-sm p-4 border-b border-slate-100 flex justify-between items-center z-10">
<div class="flex items-center gap-2">
<h3 class="text-lg font-bold text-slate-900">${asset.title}</h3>
<h3 class="text-base sm:text-lg font-bold text-slate-900 break-keep leading-tight" style="word-break: keep-all; overflow-wrap: break-word;">${asset.title}</h3>
</div>
<button onclick="closeModal()" class="w-8 h-8 rounded-full bg-slate-50 hover:bg-slate-100 flex items-center justify-center text-slate-500 transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>