body{font-family: 'Pretendard', sans-serif; margin: 0; padding: 40px 20px; background-color: #f8f9fa; color: #212529; line-height: 1.5; -webkit-font-smoothing: antialiased;}
.wrap{max-width: 720px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);}
h1{font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 32px; text-align: center; color: #1a1a1a;}

/* --- Form Area --- */
.write-section{margin-bottom: 40px;}
.form-area{display: flex; flex-direction: column; gap: 12px;}
.hp-field{display: none !important;}
textarea{width: 100%; height: 160px; padding: 16px; box-sizing: border-box; resize: vertical; border: 1px solid #e9ecef; border-radius: 12px; font-size: 0.95rem; font-family: inherit; background-color: #fcfcfc; transition: all 0.2s ease;}
textarea:focus{outline: none; border-color: #adb5bd; background-color: #ffffff; box-shadow: 0 0 0 4px rgba(0,0,0,0.03);}
textarea::placeholder{color: #adb5bd; line-height: 1.6;}
.btn{padding: 14px; background-color: #212529; color: #ffffff; border: none; cursor: pointer; border-radius: 10px; font-weight: 600; font-size: 1rem; transition: all 0.2s ease;}
.btn:hover{background-color: #495057; transform: translateY(-1px);}
.btn:active{transform: translateY(0);}
.btn:disabled{background-color: #dee2e6; color: #adb5bd; cursor: not-allowed; transform: none;}

/* --- Search Area --- */
.search-section{margin-bottom: 32px;}
.search-area{display: flex; position: relative;}
input[type="text"]{width: 100%; padding: 12px 16px; border: 1px solid #e9ecef; border-radius: 10px; font-size: 0.9rem; transition: all 0.2s ease; background-color: #f8f9fa;}
input[type="text"]:focus{outline: none; border-color: #adb5bd; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);}

/* --- List Area --- */
.list-section{border-top: 1px solid #f1f3f5; padding-top: 32px;}
.list-area{display: flex; flex-direction: column; gap: 16px;}
.item{border: 1px solid #f1f3f5; padding: 20px; cursor: pointer; border-radius: 12px; background-color: #ffffff; transition: all 0.2s ease;}
.item:hover{border-color: #dee2e6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.03);}
.item-preview{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 1.05rem; color: #343a40;}
.item-detail{display: none; margin-top: 16px; white-space: pre-wrap; padding-top: 16px; border-top: 1px solid #f1f3f5; font-size: 0.95rem; color: #495057; line-height: 1.7;}
.item.open{border-color: #343a40; background-color: #ffffff;}
.item.open .item-detail{display: block;}
.item-date{font-size: 0.8rem; color: #adb5bd; margin-top: 12px; display: block; font-weight: 400;}

/* --- Utility --- */
#loadingTrigger{margin-top: 20px; opacity: 0.5;}

@media (max-width: 600px){
    body{padding: 10px;}
    .wrap{padding: 24px; border-radius: 0; box-shadow: none;}
    h1{font-size: 1.5rem;}
}