177532e6e7
- FilterSheet 컴포넌트 신규: 바텀시트로 올라오는 필터 선택 UI - 장르/가격/지역 필터 모두 네이티브 select 대신 바텀시트 사용 - 카테고리별 그룹핑 + sticky 헤더 + 선택 체크 표시 - slide-up 애니메이션 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
113 lines
2.7 KiB
CSS
113 lines
2.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Force light mode: dark: classes only activate with .dark ancestor */
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--background: #FFFAF5;
|
|
--foreground: #171717;
|
|
--surface: #FFFFFF;
|
|
--brand-50: #FFF8F0;
|
|
--brand-100: #FFEDD5;
|
|
--brand-200: #FFD6A5;
|
|
--brand-300: #FFBC72;
|
|
--brand-400: #F5A623;
|
|
--brand-500: #F59E3F;
|
|
--brand-600: #E8720C;
|
|
--brand-700: #C45A00;
|
|
--brand-800: #9A4500;
|
|
--brand-900: #6B3000;
|
|
--brand-950: #3D1A00;
|
|
color-scheme: only light !important;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-surface: var(--surface);
|
|
--color-brand-50: var(--brand-50);
|
|
--color-brand-100: var(--brand-100);
|
|
--color-brand-200: var(--brand-200);
|
|
--color-brand-300: var(--brand-300);
|
|
--color-brand-400: var(--brand-400);
|
|
--color-brand-500: var(--brand-500);
|
|
--color-brand-600: var(--brand-600);
|
|
--color-brand-700: var(--brand-700);
|
|
--color-brand-800: var(--brand-800);
|
|
--color-brand-900: var(--brand-900);
|
|
--color-brand-950: var(--brand-950);
|
|
--font-sans: var(--font-pretendard), var(--font-geist), system-ui, sans-serif;
|
|
}
|
|
|
|
/* Dark mode CSS vars (disabled — activate by adding .dark class to <html>) */
|
|
/*
|
|
.dark {
|
|
--background: #12100E;
|
|
--foreground: #ededed;
|
|
--surface: #1C1916;
|
|
}
|
|
*/
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html, body, #__next {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Force Google Maps InfoWindow to light mode (maps don't support dark) */
|
|
.gm-style .gm-style-iw,
|
|
.gm-style .gm-style-iw-c,
|
|
.gm-style .gm-style-iw-d,
|
|
.gm-style .gm-style-iw-t {
|
|
background-color: #ffffff !important;
|
|
color: #171717 !important;
|
|
color-scheme: light !important;
|
|
}
|
|
|
|
.gm-style .gm-style-iw-d {
|
|
overflow: auto !important;
|
|
}
|
|
|
|
/* Hide scrollbar but keep scrolling */
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none !important;
|
|
scrollbar-width: none !important;
|
|
overflow: -moz-scrollbars-none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Material Symbols */
|
|
.material-symbols-rounded {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
.material-symbols-rounded.filled {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
|
|
/* Safe area for iOS bottom nav */
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
/* Filter sheet slide-up animation */
|
|
@keyframes slide-up {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
.animate-slide-up {
|
|
animation: slide-up 0.25s ease-out;
|
|
}
|