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);
}