/* 방명록 전용 스타일 (guestbook_style.css) 
    관리자: 뮤지션 김준영 (시놀로지 NAS 서버 환경 최적화)
*/

:root {
    --gb-accent: #6c5ce7; /* 준영님의 보라색 테마 */
    --gb-bg: #f8f9fb;
    --gb-border: #eee;
    --gb-text: #4a4a4a;
}

/* [0] 너비 계산 교정 (입력창 삐져나감 방지 핵심) */
.guestbook-flex-form *, 
.guestbook-flex-form *:before, 
.guestbook-flex-form *:after {
    box-sizing: border-box !important;
}

/* [1] 방명록 작성 폼 박스 (보라색 점선 테두리) */
#guestbook-form-wrapper {
    display: none; /* 기본 숨김 */
    border: 2px dashed var(--gb-accent) !important;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
    background: #fff;
    width: 100%;
}

/* [2] 익명 선택 영역 */
.anonymous-wrapper {
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 20px;
    padding: 10px 18px; 
    background: var(--gb-bg); 
    border-radius: 12px;
    cursor: pointer; 
    border: 1px solid var(--gb-border);
}
.anonymous-wrapper:hover { background: #f0f3ff; }

/* [3] 작성 폼 레이아웃 */
.guestbook-flex-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box !important;
}

/* 닉네임 & 비밀번호 (가로 배열) */
.form-top-row {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: space-between;
}

.large-input {
    height: 55px !important;
    /* 고정 너비 대신 flex-basis를 사용하여 삐져나감 방지 */
    flex: 1 1 0; 
    min-width: 0; /* flex 환경에서 너비가 튀는 현상 방지 */
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--gb-border);
    padding: 0 15px;
    background: #fff;
    box-sizing: border-box !important;
}

/* 본문 입력창 (높이 고정 및 스크롤) */
.giant-textarea {
    width: 100% !important;
    min-height: 150px !important; /* 초기 높이 */
    max-height: 600px;           /* 너무 무한정 늘어나는 걸 방지 (선택사항) */
    line-height: 1.6;
    padding: 15px !important;
    border-radius: 12px !important;
    border: 1px solid var(--gb-border);
    resize: none;                /* 사용자가 수동으로 조절하는 핸들 제거 */
    overflow-y: hidden;          /* 내부 스크롤바 숨김 */
    transition: height 0.1s ease; /* 높이 변화를 부드럽게 */
}

/* [4] 안내 문구(placeholder) 스타일 */
#content-field::placeholder {
    font-size: 0.95rem;  
    color: #bbb;         
    font-weight: 500;    
    line-height: 1.6;    
}

/* [5] 등록 버튼 */
.full-submit {
    height: 60px;
    width: 100%;
    background: var(--gb-accent);
    color: #fff;
    border: none;
    border-radius: 15px;
    font-weight: 800;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
}
.full-submit:hover { background: #5b4bc4; }

.cf-turnstile {
    width: 100% !important;
}

/* [6] 스크롤바 디자인 */
.giant-textarea::-webkit-scrollbar { width: 8px; }
.giant-textarea::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.giant-textarea::-webkit-scrollbar-thumb { background: var(--gb-accent); border-radius: 10px; }
.giant-textarea::-webkit-scrollbar-thumb:hover { background: #5b4bc4; }

/* [7] 방명록 목록 본문 (글자 이탈 방지 핵심) */
.guest-content {
    word-break: break-all !important; 
    overflow-wrap: break-word !important;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 10px 0 5px 0 !important;
    width: 100%;
}

/* [8] 모바일 최적화 (정밀 교정) */
@media screen and (max-width: 480px) {
    .form-top-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .large-input {
        box-sizing: border-box !important; 
        flex: 1 !important;    
        width: 0 !important;   
        height: 45px !important;
        font-size: 16px !important;
    }

    .giant-textarea { 
        width: 100% !important;
        min-height: 120px !important; 
        font-size: 16px !important; 
        padding: 15px !important;
    }

    #content-field::placeholder {
        font-size: 0.85rem; /* 모바일 대응 크기 조절 */
    }

    .full-submit { 
        width: 100% !important;
        height: 50px !important; 
        font-size: 1.1rem !important; 
    }
    
    .cf-turnstile { 
        transform: scale(0.82); 
        transform-origin: center; 
    }
}

/* 애니메이션 */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.new-post-animate {
    animation: fadeInSlide 0.5s ease-out forwards;
}

/* 1. 입력창 높이 200px 고정 및 내부 스크롤 활성화 */
#content-field {
    height: 200px !important;
    overflow-y: auto !important; /* 내용 많아지면 스크롤 생성 */
    resize: none;               /* 사용자가 크기 조절 금지 */
    word-break: break-all;       /* 긴 단어(111...) 자동 줄바꿈 */
    box-sizing: border-box;
}

/* 2. 모바일 클릭 지연 방지 (프리징 해결 핵심) */
button, a, input, textarea {
    touch-action: manipulation;
}


/* 삭제 버튼 기본 스타일 및 호버 효과 */
.delete-btn {
    color: #bbb; /* 기본 상태: 연한 회색 */
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease; /* 부드러운 변화 효과 */
    text-decoration: none;
    background: none;
    border: none;
    padding: 5px;
}

/* 마우스를 올렸을 때 (Hover) */
.delete-btn:hover {
    color: #ff4d4d !important; /* 준영님이 원하시는 빨간색 */
    transform: scale(1.05);     /* 살짝 커지는 효과 (선택사항) */
    font-weight: bold;
}

/* 모바일 터치 시 피드백 */
.delete-btn:active {
    color: #c0392b;
    transition: 0s;
}

/* 삭제 버튼 호버 효과 */
.delete-btn {
    transition: color 0.3s ease !important; /* 부드러운 색상 변화 */
}

.delete-btn:hover {
    color: #ff4d4d !important; /* 마우스 올리면 빨간색 */
    font-weight: bold;         /* 살짝 강조 (선택 사항) */
}
/* 방명록 아이템 컨테이너 */
.guest-item {
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
    /* 고정 높이를 절대 주지 마세요 */
    height: auto !important; 
    min-height: fit-content;
    display: flex;
    flex-direction: column;
}

/* 본문 텍스트 영역 */
.guest-item p {
    margin: 10px 0;
    line-height: 1.6;
    font-size: 1rem;
    color: #333;
    /* 텍스트가 길어지면 줄바꿈이 되도록 설정 */
    white-space: pre-wrap;    /* 줄바꿈(Enter) 유지 */
    word-wrap: break-word;    /* 긴 단어도 끊어서 줄바꿈 */
    word-break: break-all;
    overflow: visible !important; /* 넘치는 내용을 숨기지 않음 */
    height: auto !important;      /* 높이 자동 */
} 

@media screen and (max-width: 480px) {
    /* [1] 가로 배열을 강제로 세로 배열로 변경 */
    .form-top-row {
        display: flex !important;
        flex-direction: column !important; 
        gap: 10px !important;
        width: 100% !important;
    }

    /* [2] 찌그러짐의 원인이었던 width: 0을 제거하고 100% 보장 */
    .large-input {
        width: 100% !important; 
        flex: none !important;  
        height: 50px !important; 
        font-size: 16px !important; /* 아이폰 자동 줌 방지 */
        box-sizing: border-box !important;
        padding: 0 15px !important;
        display: block !important;
    }

    /* 본문 영역 및 버튼 너비 최적화 */
    .giant-textarea { 
        width: 100% !important;
        min-height: 150px !important; 
    }

    .full-submit { 
        width: 100% !important;
        height: 55px !important; 
    }
}