html, body { overscroll-behavior: none; /* 바운스/오버스크롤 차단 */ } /* 전체 페이지 wrapper */ .page { position: relative; min-height: 100vh; overflow-x: hidden; } .top-view { position: fixed; } /* TopNav를 화면 위에 떠 있게 설정 */ .top-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 2rem; background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */ z-index: 1000; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .logoIcon{ width: 5vw; min-width: 32px; max-width: 128px; height: auto; aspect-ratio: 1/1; } /*.logo-mask img {*/ /* visibility: hidden;*/ /* width: 100%;*/ /* height: 100%;*/ /*}*/ /* 타이틀 텍스트 */ .prj-title { font-size: 1.5rem; font-weight: bold; margin: 0; color: var(--text-title); } /* 메뉴 영역 */ .top-menu { display: flex; gap: 1.5rem; } /* 테스트 플로팅 */ .top-floating-menu { position: fixed; top: 4rem; right: 2rem; z-index: 1000; display: inline-block; } /* 원형 버튼 (아래쪽 레이어) */ .menu-toggle { width: 48px; height: 48px; background-color: black; color: white; font-size: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 1; /* 🔽 아래 레이어 */ } /* 펼쳐질 박스 (위에 뜨는 레이어) */ .menu-box { position: absolute; top: 0; right: 0; width: 85vw; height: 120px; background-color: white; border-radius: 50%; transform: scale(0); transform-origin: top right; opacity: 0; transition: all 0.3s ease; padding: 1rem; pointer-events: none; z-index: 2; /* 🔼 위쪽 레이어 */ display: flex; flex-direction: row; gap: 0.5rem; } /* 마우스를 전체에 올리면 박스가 앞에 뜨도록 */ .top-floating-menu:hover .menu-box { transform: scale(1); border-radius: 0.75rem; opacity: 1; pointer-events: auto; } .menu-box { position: absolute; top: 0; right: 0; /* 나머지 스타일 유지 */ padding-top: 2rem; /* X 버튼이 박스 내부에서 안 겹치도록 여백 추가 */ } .menu-box button { position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: none; font-size: 1.2rem; color: #333; cursor: pointer; z-index: 3; } /* 플로팅 뷰 */ .float-left-down { position: fixed; left: 2rem; bottom: 2rem; width: clamp(48px, 8vw, 128px); height: clamp(48px, 8vw, 128px); z-index: 1000; } .float-right-down { position: fixed; right: 2rem; bottom: 2rem; z-index: 1000; } .fld-btn { padding: 0.75rem 1.2rem; background-color: var(--point-dark); color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s ease; } .fld-btn :hover { transform: translateY(-3px); } /*더미 체크용*/ .dummy-scroll-test { overscroll-behavior: none; } .dummy-box { height: 150px; background-color: var(--normal-normal); margin: 1rem 0; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 1px solid var(--normal-dark); }