body {
    background-color: #fce4ec; /* 귀여운 핑크색 배경 */
    font-family: sans-serif;
    margin: 0;
    padding: 30px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white; /* 게시판은 하얀색 */
    padding: 30px;
    border-radius: 15px; /* 모서리를 둥글게 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 그림자 효과 */
}

h1 { text-align: center; color: #c2185b; }

.input-section {
    display: flex; gap: 10px; margin-bottom: 30px; justify-content: center;
}

input {
    padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;
}

#authorInput { width: 150px; }
#messageInput { width: 350px; }

button {
    padding: 10px 20px; background-color: #e91e63; color: white; border: none;
    border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px;
}
button:hover { background-color: #c2185b; }

.wall-section { display: flex; flex-wrap: wrap; gap: 15px; }

/* 진짜 포스트잇(쪽지) 모양처럼 디자인해볼게요! */
.note {
    background-color: #fff9c4; /* 노란색 포스트잇 */
    padding: 20px; border-radius: 5px; width: calc(33.333% - 15px);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.15); box-sizing: border-box;
}

.note p { font-size: 16px; margin-top: 0; line-height: 1.5; }
.note .author { display: block; text-align: right; color: #555; font-size: 14px; font-weight: bold; }
.error-msg { color: white; background-color: #d32f2f; padding: 20px; font-weight: bold; border-radius: 10px; text-align: center; width: 100%;}