/* [기본 설정] */
body {
    background: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: "Spoqa Han Sans Neo", sans-serif;
}

/* --- 메인 컨테이너 --- */
.book-container {
    width: 800px;
    height: 500px;
    position: relative;
    perspective: 1500px; /* 3D 원근감 */
    background-color: #fff; /* 폼 배경색 */
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
    overflow: hidden; /* 둥근 모서리 밖으로 나가는 것 방지 */
}

/* [레이어 1] 바닥에 깔린 폼들 */
.layer-base {
    width: 100%;
    height: 100%;
    display: flex; /* 좌우 배치 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.base-box {
    width: 50%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* [레이어 2] 움직이는 페이지 (Flipper) */
.layer-flipper {
    width: 50%; /* 전체 너비의 절반 */
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%; /* 오른쪽 절반에서 시작 */
    
    
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* 부드러운 종이 넘김 효과 */
    z-index: 10;
}

/* 페이지가 넘어간 상태 (왼쪽으로 -180도 회전) */
.layer-flipper.flipped {
    transform: rotateY(-180deg);
}

/* --- 페이지의 앞면/뒷면 디자인 --- */
.page-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* 뒷면 안 보이게 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    box-sizing: border-box;
    
    /* 안내 문구 배경 (파란색 그라데이션) */
    background: linear-gradient(135deg, #6598e5, #5540a3);
    color: white;
}

/* 앞면 (환영합니다) - 기본 상태 */
.front-face {
    z-index: 2;
    transform: rotateY(0deg);
}

/* 뒷면 (돌아오셨군요) - 미리 180도 돌려놓음 */
.back-face {
    z-index: 1;
    transform: rotateY(180deg);
}

/* --- 내부 요소 스타일 (버튼, 입력창 등) --- */
h2 { margin-bottom: 20px; font-size: 2rem; font-weight: 700; }
.input-group { width: 100%; margin-bottom: 15px; text-align: left; }
.input-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: #666; }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #f4f4f4; box-sizing: border-box; }

/* 로그인/가입 액션 버튼 */
.action-btn {
    width: 100%; padding: 12px; background-color: #5540a3; color: white;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: bold;
    cursor: pointer; margin-top: 10px; transition: 0.3s;
}
.action-btn:hover { background-color: #443383; }

/* 유령 버튼 (페이지 넘기기용) */
.ghost-btn {
    background: transparent; border: 2px solid white; color: white;
    padding: 10px 30px; border-radius: 25px; font-weight: bold;
    cursor: pointer; margin-top: 20px; transition: 0.2s;
}
.ghost-btn:hover { background: white; color: #5540a3; }
.content-wrapper p { font-size: 1.1rem; margin-bottom: 20px; line-height: 1.5; }