caadiq
a5eba6535f
- 사이트 전체 min-width 1200px → 1440px로 변경 - 헤더/갤러리 양쪽 여백 통일 (px-24) - 갤러리 CSS 정리 (호버 효과만 유지)
80 lines
1.3 KiB
CSS
80 lines
1.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* 기본 스타일 */
|
|
html {
|
|
overflow-y: scroll; /* 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
|
|
}
|
|
|
|
body {
|
|
background-color: #fafafa;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
/* 최소 너비 설정 - 화면 축소시 깨짐 방지 */
|
|
#root {
|
|
min-width: 1440px;
|
|
}
|
|
|
|
/* 스크롤바 스타일 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #548360;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #456e50;
|
|
}
|
|
|
|
/* View Transitions API - 앨범 커버 이미지 부드러운 전환 */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.3s;
|
|
}
|
|
|
|
/* 앨범 커버 트랜지션 */
|
|
::view-transition-group(*) {
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
::view-transition-old(*) {
|
|
animation: fade-out 0.3s ease-out both;
|
|
}
|
|
|
|
::view-transition-new(*) {
|
|
animation: fade-in 0.3s ease-in both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 라이트박스 스크롤바 숨기기 */
|
|
.lightbox-no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|