:root {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #d1e3f5;
    --text-sub: #d1e3f5;
    --border-color: #e2e8f0;
    --danger-color: #ef4444;
}

body { font-family: 'Pretendard', sans-serif; background: linear-gradient(135deg, #471fb6, #722c9b); color: var(--text-main); margin: 0; line-height: 1.6; min-height: 100vh;}

header { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding: 16px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
header h1 { margin: 0; font-size: 22px; background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

main { max-width: 1100px; margin: 40px auto; padding: 0 20px; }

/* 그리드 레이아웃 */
.prompt-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .prompt-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prompt-list { grid-template-columns: 1fr; } }

/* 카드 스타일 */
/* 메인 화면의 프롬프트 카드 제목 색상 */
.prompt-card h3 {
    color: #4f46e5; /* 👈 여기에 원하는 색상 코드를 넣으세요! (예: 진한 인디고) */
}
.prompt-card { background: var(--card-bg); padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; position: relative; }
.prompt-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.category-badge { background-color: #e0e7ff; color: var(--primary-color); padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* 카드 내 삭제 버튼 */
.btn-delete-small { background: none; color: var(--text-sub); font-size: 18px; padding: 5px; cursor: pointer; }
.btn-delete-small:hover { color: var(--danger-color); }

.prompt-text-box { background: #f1f5f9; padding: 15px; border-radius: 10px; font-family: monospace; white-space: pre-wrap; margin-bottom: 15px; font-size: 14px; border-left: 4px solid var(--primary-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* 상세 페이지 스타일 */
.detail-page { background: white; padding: 40px; border-radius: 20px; margin-top: 20px; border: 1px solid var(--border-color); }
.detail-header h1 { font-size: 32px; margin: 10px 0 20px 0; }
.detail-info { margin-bottom: 30px; font-size: 18px; padding: 15px; background: #f8fafc; border-radius: 10px; }
.prompt-text-box.big { -webkit-line-clamp: unset; display: block; font-size: 16px; min-height: 200px; }

/* 공통 버튼 */
button { border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.btn-primary { background: #5d5ff1; color: white; padding: 12px 20px; }
.btn-secondary { background: #5d5ff1; color: white; padding: 10px 18px; }
.btn-copy { background: #dcfce7; color: #16a34a; padding: 12px 20px; width: 100%; font-size: 16px; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.page-btn { padding: 8px 15px; background: white; border: 1px solid var(--border-color); border-radius: 5px; }
.page-btn.active { background: var(--primary-color); color: white; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 700; color: var(--text-sub); }
.input-group input, .input-group textarea, .input-group select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1; box-sizing: border-box; }

/* 1. 상세 페이지 맨 위 큰 제목 색상 */
#detail-title {
    color: #1e293b; /* 진한 남색/검정 톤 */
}

/* 2. 🤖 사용된 AI 부분 글자색 */
.detail-info {
    color: #475569; /* 부드러운 회색 톤 */
}

/* 3. 📜 실제 프롬프트 내용 박스 안의 글자색 */
.prompt-text-box.big {
    color: #1e293b; /* 진한 텍스트로 가독성을 높임 */
}

/* =========================================
   📱 모바일 화면 최적화 (반응형 웹 디자인)
   ========================================= */

/* 화면 가로 넓이가 768px (보통 태블릿/스마트폰 크기) 이하일 때만 아래 디자인이 작동합니다. */
@media screen and (max-width: 768px) {
    
    /* 1. 카드를 1줄로 길게 세우기 */
    .prompt-list {
        grid-template-columns: 1fr !important; /* 여러 줄이던 카드를 1칸으로 만듭니다 */
        gap: 15px; /* 카드 사이 간격을 살짝 줄입니다 */
    }

    /* 2. 검색창과 필터링 메뉴를 화면에 꽉 차게 만들기 */
    #search-input {
        width: 100% !important; /* 검색창이 모바일 화면 너비의 100%를 차지하게 합니다 */
        margin-bottom: 5px;
    }
    
    #category-select, #sort-select {
        flex: 1; /* 카테고리와 정렬 선택창이 남은 공간을 반반씩 사이좋게 나눠 가집니다 */
        font-size: 13px; /* 모바일에서는 글씨를 살짝 줄여서 한눈에 들어오게 합니다 */
        padding: 8px;
    }

    /* 3. 전체적인 여백 줄이기 (모바일은 화면이 좁으므로 여백을 아껴야 합니다) */
    .intro-banner {
        padding: 20px;
    }
    
    .intro-banner h2 {
        font-size: 18px !important;
    }

    .form-section, .detail-page {
        padding: 15px; /* 글쓰기 창이나 상세 페이지의 안쪽 여백을 줄여줍니다 */
    }

    /* 4. 헤더(로고 부분) 글씨 크기 조정 */
    header h1 {
        font-size: 20px;
    }
}
/* --- 커스텀 모달 스타일 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 화면 맨 앞으로 가져오기 */
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: popIn 0.3s ease-out; /* 살짝 튀어오르는 애니메이션 */
}

.modal-content p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
}

/* 팝업 등장 애니메이션 */
@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 모달창 제목(로그인이 필요해요) 글씨 굵기와 색상 */
.modal-content h3 {
    color: #022a87; /* 거의 검은색에 가까운 아주 진한 남색 */
    font-weight: 800; /* 글씨를 더 두껍게 */
}