body {
    background-color: #121212;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent; /* 모바일에서 터치했을 때 파란색 박스 생기는 것 제거 */
    overscroll-behavior: none; /* 스크롤 끝에 도달했을 때 화면이 팅겨져 내려오는 '바운스 효과' 제거 */
}
::-webkit-scrollbar { width: 0px; background: transparent; } /* 스크롤바 안 보이게 숨김 */

/* Vue의 transition 태그와 함께 사용해서, 요소가 사라지거나 나타날 때 자동으로 클래스 붙여줌 */
/* 지금 지정한 '.fade' CSS는 나중에 <transition name="fade"> 태그에 애니메이션 적용 ('.fade'뒤의 '-enter-active'는 예약어) */
/* active: fade-enter(생김), fade-leave(사라짐) 동작 규칙 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } /* opacity(투명) 0에서 원래 상태로 0.3초 동안 부드럽게 움직여라. */
/* from: fade-enter 시작 지점, to: fade-leave 끝 지점 */
.fade-enter-from, .fade-leave-to { opacity: 0; } /* 해당 지점의 opacity(투명)를 0으로 설정 */

/* "이 문장 해석하기" 버튼에 공 튀기는 모션을 주기위한 코드 */
/* active: 동작규칙, 폭발적으로 커졌다가 원본 크기보다 조금 더 커지고(1.275) 원본 크기로 돌아옴.(바운스) */
.pop-enter-active { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* cubic-bezier: (x1,y1), (x2,y2) 점을 인자로 받아 그 지점쪽으로 꺾인 베지에 곡선 그래프 */
/* from: 시작 상태 */
.pop-enter-from { transform: scale(0.8) translateY(10px); opacity: 0; } /* 80% 크기로 10px 아래에서 시작 */

/* 카메라/갤러리 선택 탭이 그려진 베지에 곡선처럼 움직임 */
.sheet-up-enter-active, .sheet-up-leave-active { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sheet-up-enter-from, .sheet-up-leave-to { transform: translateY(100%); }

.img-high-quality {
    image-rendering: -webkit-optimize-contrast; /* 이미지를 선명하게 처리 (특히 크롬/사파리에서) */
    transform: translateZ(0); /* GPU 가속 강제 활성화 (하드웨어 가속) */
    backface-visibility: hidden; /* 3D 회전 시 뒷면 깜빡임 방지 */
}