body { font-family: 'Noto Sans KR', sans-serif; background-color: #f3f4f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }

/* 💡 반응형을 위한 컨테이너 래퍼 (PC에선 여백, 모바일에선 꽉 채움) */
.app-wrapper { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0; width: 100%; }
@media (min-width: 768px) { .app-wrapper { padding: 2rem; } }

/* 💡 모바일에서는 100%, PC에서는 최대 너비 1000px로 확장되는 컨테이너 */
.app-container { width: 100%; max-width: 1000px; background-color: #f9fafb; position: relative; overflow-x: hidden; min-height: 100vh; }
@media (min-width: 768px) { .app-container { border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); min-height: auto; overflow: hidden; } }

.scan-line { width: 100%; height: 2px; background-color: #10B981; position: absolute; top: 0; left: 0; animation: scan 1.5s infinite linear; display: none; z-index: 10; }
.scan-line-error { background-color: #EF4444; } /* 에러 스캔 라인은 빨간색 */
@keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.toast { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: #10B981; color: white; padding: 10px 20px; border-radius: 30px; font-weight: bold; opacity: 0; transition: opacity 0.3s; pointer-events: none; width: 90%; max-width: 400px; text-align: center; z-index: 50; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.disabled-section { opacity: 0.5; pointer-events: none; filter: grayscale(100%); transition: all 0.5s; }
.active-section { border: 2px solid #3B82F6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); transition: all 0.5s; transform: scale(1.02); }
.completed-section { border: 2px solid #10B981; transition: all 0.5s; }

.show-final { opacity: 1 !important; transform: translateY(0) !important; }

/* 모달창 애니메이션 */
.modal-enter { opacity: 1 !important; pointer-events: auto !important; transform: scale(1) !important; }