/* ===== 1. 모달(알림창) 초기 상태 해결 및 디자인 ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(45, 52, 54, 0.25); /* 배경 어둡기 완화 */
    backdrop-filter: blur(10px);        /* 배경 블러 처리 */
    display: none;                      /* [중요] 처음에는 안 보이게 설정 */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* 모달이 활성화되었을 때 JavaScript에서 'flex'로 바꿀 수 있도록 미리 정의 */
.modal:not(.hidden) {
    display: flex;
}

.modal.hidden {
    display: none !important;
}

.modal-box {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 28px;
    width: 90%;
    max-width: 360px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 모달이 뜰 때 뿅 하고 나타나는 효과 */
@keyframes modalPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===== 2. 취소/확인 버튼 파스텔톤 수정 ===== */
.modal-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

.modal-btns button {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

/* 취소 버튼: 차분한 파스텔 그레이 */
.btn-cancel, .btn-gray-small {
    background: #f1f3f5;
    color: #868e96;
}

.btn-cancel:hover {
    background: #e9ecef;
    color: #495057;
}

/* 확인/삭제 버튼: 감성적인 파스텔 블루 또는 레드 */
.btn-confirm, .btn-blue, .btn-black {
    background: #7e87f1; /* 메인 파스텔 블루 */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(126, 135, 241, 0.2);
}

.btn-confirm:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* 삭제 같은 경고성 확인 버튼 */
.btn-red-small, .btn-red-mini {
    background: #fff0f3;
    color: #ff6b81;
}

.btn-red-small:hover {
    background: #ffe3e8;
}

/* ===== 기타 추가 수정 (글쓰기 카드 등) ===== */
.write-card {
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}