forked from AcaMate/AcaMate_Web
194 lines
3.4 KiB
CSS
194 lines
3.4 KiB
CSS
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);
|
|
}
|
|
|
|
|