/* 전체 페이지 배경 (구분감을 위해 추가) */
body {
    background-color: #f4f6f8; /* 배경을 연한 회색으로 설정 */
    margin: 0;
    padding: 0;
}

/* 메인 컨테이너 */
.view-container { 
    max-width: 800px; 
    margin: 50px auto; 
    padding: 30px; 
    background: #fff; 
    border-radius: 16px; 
    /* 그림자를 더 깊고 부드럽게 해서 띄워진 느낌을 줌 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05), 0 1px 8px rgba(0,0,0,0.02);
    border: 1px solid #e9ecef; /* 아주 연한 테두리 추가 */
}

/* 헤더 영역 */
.view-header { 
    border-bottom: 2px solid #f1f3f5; /* 선을 조금 더 두껍게 */
    padding-bottom: 25px; 
    margin-bottom: 30px; 
}

.view-category { color: #218838; font-weight: bold; font-size: 14px; margin-bottom: 12px; }
.view-title { font-size: 30px; font-weight: 800; color: #212529; margin-bottom: 15px; letter-spacing: -0.5px; }
.view-meta { display: flex; justify-content: space-between; color: #adb5bd; font-size: 15px; }

/* 메인 정보 영역 */
.view-main { display: flex; gap: 40px; margin-bottom: 40px; align-items: flex-start; }

.view-img { 
    width: 350px; 
    height: 350px; 
    border-radius: 12px; 
    object-fit: cover; 
    border: 1px solid #dee2e6; /* 이미지 테두리 명확히 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.view-info-box { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    background: #f8f9fa; /* 정보 박스 배경색 추가로 컨텐츠와 분리 */
    padding: 20px;
    border-radius: 12px;
}

.info-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 16px; }
.info-label { color: #868e96; }
.info-value { font-weight: 600; color: #212529; }
.info-price { font-size: 26px; color: #218838; font-weight: 800; }

/* 본문 내용 */
.view-content { 
    line-height: 1.8; 
    font-size: 17px; 
    color: #495057; 
    padding: 40px 10px; 
    border-top: 2px solid #f1f3f5; 
    min-height: 250px; 
}

/* 하단 버튼 바 */
.action-box { 
    position: sticky; 
    bottom: 20px; 
    background: rgba(255, 255, 255, 0.95); /* 살짝 투명하게 */
    backdrop-filter: blur(10px); /* 블러 효과로 고급스럽게 */
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 -10px 30px rgba(0,0,0,0.08); 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    border: 1px solid #eee;
    margin-top: 40px;
}

.join-btn { 
    flex: 1; 
    height: 55px; 
    background: #218838; 
    color: #fff; 
    border: none; 
    border-radius: 10px; 
    font-size: 18px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
}
.join-btn:hover { background: #1e7e34; transform: translateY(-2px); } /* 호버 효과 추가 */
.join-btn:disabled { background: #ced4da; cursor: not-allowed; transform: none; }

.back-btn { 
    padding: 0 25px; 
    height: 55px; 
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-radius: 10px; 
    color: #495057;
    font-weight: 600;
    cursor: pointer; 
    transition: 0.2s; 
}
.back-btn:hover { background: #f8f9fa; border-color: #adb5bd; }

.cancel-btn { 
    flex: 1; 
    height: 55px; 
    background: #dc3545; 
    color: #fff; 
    border: none; 
    border-radius: 10px; 
    font-size: 18px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
}
.cancel-btn:hover { background: #c82333; transform: translateY(-2px); }

/* 드롭다운 스타일 개선 */
.dropdown { position: relative; flex: 1; }

.dropdown-content {
    display: none;
    position: absolute;
    bottom: 75px; /* 버튼과의 간격을 조금 더 둠 */
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 15px 35px rgba(0,0,0,0.15);
    border-radius: 12px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid #eee;
    animation: slideUp 0.3s ease; /* 나타날 때 애니메이션 */
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-content a {
    color: #333;
    padding: 18px 16px;
    text-decoration: none;
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #f8f9fa;
}

.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background-color: #f1f8f3; color: #218838; }

.show { display: block; }