fix(css): 하단 네비 스타일을 tkfb.css 공통으로 이동
- tbm-mobile.css에서 .m-bottom-nav, .m-nav-item, .m-nav-label 스타일 제거 - tkfb.css에 동일 스타일 추가 (shared-bottom-nav.js 공통 모듈 대응) - 소모품 모바일 등 모든 페이지에서 하단 네비 정상 렌더링 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -289,53 +289,7 @@ button, .m-tbm-row, .m-tab, .m-new-btn, .m-detail-btn, .m-load-more,
|
|||||||
100% { background-position: -200% 0; }
|
100% { background-position: -200% 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bottom nav */
|
/* Bottom nav → tkfb.css로 이동됨 (shared-bottom-nav.js 공통) */
|
||||||
.m-bottom-nav {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 68px;
|
|
||||||
background: #ffffff;
|
|
||||||
border-top: 1px solid #e5e7eb;
|
|
||||||
box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
|
|
||||||
z-index: 1000;
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
.m-bottom-nav { max-width: 768px; margin: 0 auto; }
|
|
||||||
}
|
|
||||||
.m-nav-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #9ca3af;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem 0.25rem;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.m-nav-item.active { color: #2563eb; }
|
|
||||||
.m-nav-item svg {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.m-nav-item.active svg { stroke-width: 2.5; }
|
|
||||||
.m-nav-label {
|
|
||||||
font-size: 0.6875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.m-nav-item.active .m-nav-label { font-weight: 700; }
|
|
||||||
|
|
||||||
/* Detail badge */
|
/* Detail badge */
|
||||||
.m-detail-badge {
|
.m-detail-badge {
|
||||||
|
|||||||
@@ -215,3 +215,44 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
|||||||
display: flex !important;
|
display: flex !important;
|
||||||
z-index: 999 !important;
|
z-index: 999 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile bottom nav (shared-bottom-nav.js 공통) */
|
||||||
|
.m-bottom-nav {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 68px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
|
||||||
|
z-index: 1000;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
.m-bottom-nav { max-width: 768px; margin: 0 auto; }
|
||||||
|
}
|
||||||
|
.m-nav-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #9ca3af;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem 0.25rem;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.m-nav-item.active { color: #2563eb; }
|
||||||
|
.m-nav-item svg { width: 26px; height: 26px; margin-bottom: 4px; }
|
||||||
|
.m-nav-item.active svg { stroke-width: 2.5; }
|
||||||
|
.m-nav-label { font-size: 0.6875rem; font-weight: 500; }
|
||||||
|
.m-nav-item.active .m-nav-label { font-weight: 700; }
|
||||||
|
|||||||
Reference in New Issue
Block a user