@charset "utf-8";

/* =========================================================
   CLEAN TRANSPARENT LOG - REFERENCE ARCHIVE SKIN
   ========================================================= */

:root {
    /* 색상 */
    --cam-bg: rgba(242, 247, 248, 0.7); /* 맑게 비치는 파스텔톤 배경 */
    --cam-fg: #505151; /* 기본 텍스트 색상 */
    --cam-muted: #888888; /* 보조 텍스트 색상 */
    
    /* 원본 테마의 포인트 색상 완벽 동기화 */
    --cam-accent: #f0a5b1; /* 핑크 포인트 */
    --cam-primary: #bdd8e4; /* 하늘 포인트 */
    
    --cam-divider: rgba(255, 255, 255, 0.4); /* 내부 구분선 */
    --cam-input-bg: rgba(255, 255, 255, 0.4); /* 입력창 반투명 */
    
    --cam-font: 'Stardust30S', PfStardust30S;
}

.cam_viewfinder {
    position: relative;
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px 30px;
    background-color: var(--cam-bg);
    color: var(--cam-fg);
    font-family: var(--cam-font);
    
    /* 테두리 없음, 원본과 동일한 모서리 둥글기 */
    border: none; 
    border-radius: 10px; 
    
    /* 블러(backdrop-filter) 및 노이즈 효과 전면 삭제 */
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 은은한 기본 그림자 */
    overflow: hidden;
}

/* 상단 OSD 정보 */
.cam_osd_top {
    display: flex;
    justify-content: space-between;
    font-size: 1.05em;
    margin-bottom: 30px;
    letter-spacing: 1px;
    border-bottom: 1px dashed var(--cam-divider);
    padding-bottom: 15px;
}
.osd_left { color: var(--cam-muted); font-weight: 500; }
.osd_right { color: var(--cam-primary); font-weight: bold; }
.blink_rec { color: var(--cam-accent); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 카테고리 */
.cam_cate { margin-bottom: 20px; }
.cam_cate h2 { display: none; }
.cam_cate ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cam_cate a { 
    display: block; 
    padding: 4px 14px; 
    border: 1px solid var(--cam-divider); 
    background: var(--cam-input-bg);
    color: var(--cam-muted); 
    text-decoration: none; 
    border-radius: 20px;
    transition: 0.2s;
    font-size: 0.9em;
}
.cam_cate a:hover, .cam_cate #bo_cate_on { 
    border-color: var(--cam-primary); 
    color: var(--cam-primary); 
    background: rgba(255, 255, 255, 0.6); 
}

/* 상단 버튼/통계 영역 */
.cam_btn_area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}
#bo_list_total { color: var(--cam-muted); font-size: 0.9em; }
.btn_bo_user { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.btn_cam {
    background: var(--cam-input-bg);
    border: 1px solid var(--cam-divider);
    padding: 6px 14px;
    border-radius: 4px;
    color: var(--cam-fg);
    font-family: var(--cam-font);
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
}
.btn_cam:hover { border-color: var(--cam-primary); color: var(--cam-primary); background: rgba(255, 255, 255, 0.7); }
.btn_cam.btn_write { color: #fff; background: var(--cam-primary); border-color: var(--cam-primary); }
.btn_cam.btn_del { color: var(--cam-accent); }

/* 테이블 리스트 (목록) */
.cam_table_wrap { border-top: 2px solid rgba(0, 0, 0, 0.2); }
.cam_table_wrap table { width: 100%; border-collapse: collapse; text-align: left; }
.cam_table_wrap th {
    padding: 15px 10px;
    font-weight: 600;
    color: var(--cam-fg);
    border-bottom: 1px solid var(--cam-divider);
    font-size: 0.9em;
    text-align: center;
}
.cam_table_wrap td {
    padding: 15px 10px;
    border-bottom: 1px dashed var(--cam-divider);
    font-size: 0.95em;
    text-align: center;
}
.cam_table_wrap td.td_subject { text-align: left; }

/* 로우 호버 효과 */
.cam_table_wrap tbody tr { transition: 0.2s; background: transparent; }
.cam_table_wrap tbody tr:hover { background-color: rgba(255, 255, 255, 0.2); }

/* 컬럼 텍스트 색상 */
.td_chk { width: 40px; }
.td_num { width: 90px; color: var(--cam-muted); }
.td_source { width: 140px; color: var(--cam-muted); }
.td_rating { width: 120px; color: var(--cam-accent); letter-spacing: 1px; }
.td_datetime { width: 100px; color: var(--cam-muted); font-size: 0.85em; }

/* 텍스트 링크 */
.bo_cate_link { color: var(--cam-primary); margin-right: 8px; text-decoration: none; font-size: 0.9em; }
.subject_link { color: var(--cam-fg); text-decoration: none; display: inline-block; transition: 0.2s; font-weight: 500; }
.cam_table_wrap tbody tr:hover .subject_link { color: var(--cam-primary); transform: translateX(3px); }
.cnt_cmt { color: var(--cam-primary); font-size: 0.8em; margin-left: 6px; font-weight: normal; }

/* 페이지 네비게이션 */
.cam_pagination { margin-top: 30px; text-align: center; }
.cam_pagination .pg_page { display: inline-block; padding: 5px 10px; color: var(--cam-muted); text-decoration: none; border: 1px solid transparent; }
.cam_pagination .pg_current { color: #fff; background: var(--cam-primary); border-radius: 4px; }
.cam_pagination .pg_page:hover { color: var(--cam-primary); }

/* 글쓰기 및 뷰어 폼 스타일 */
.cam_form_group { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.cam_form_row { display: flex; align-items: center; border-bottom: 1px dashed var(--cam-divider); padding-bottom: 12px; }
.cam_label { width: 130px; color: var(--cam-muted); font-weight: normal; flex-shrink: 0; font-size: 0.95em; }
.cam_input {
    background: var(--cam-input-bg);
    border: 1px solid var(--cam-divider);
    color: var(--cam-fg);
    font-family: var(--cam-font);
    font-size: 1em;
    padding: 10px 14px;
    flex: 1;
    border-radius: 4px;
    outline: none;
    transition: 0.2s;
}
.cam_input:focus { border-color: var(--cam-primary); background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 2px rgba(159, 215, 218, 0.3); }
.cam_input.full_width { width: 100%; }

/* 본문 읽기 뷰어 스타일 */
.cam_view_header { border-bottom: 2px solid rgba(0, 0, 0, 0.2); padding-bottom: 20px; margin-bottom: 20px; }
.cam_view_header .bo_v_cate { display: inline-block; color: var(--cam-primary); font-size: 0.95em; margin-bottom: 10px; }
.cam_view_header .bo_v_tit { font-size: 1.6em; color: var(--cam-fg); margin: 0; line-height: 1.4; font-weight: 600; }

.cam_view_meta {
    display: flex; justify-content: space-between; align-items: flex-start;
    background: rgba(255, 255, 255, 0.15); 
    border-top: 1px solid var(--cam-divider);
    border-bottom: 1px solid var(--cam-divider);
    padding: 15px 0; margin-bottom: 40px;
}
.meta_info { display: flex; flex-direction: column; gap: 6px; }
.meta_item { font-size: 0.95em; color: var(--cam-muted); }
.meta_item strong { color: var(--cam-fg); font-weight: normal; margin-left: 10px; }
.meta_item .rating_hearts { color: var(--cam-accent); letter-spacing: 1px; }

.cam_view_content { min-height: 300px; line-height: 1.8; font-size: 1.05em; margin-bottom: 40px; color: var(--cam-fg); }
.cam_view_content img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px; }

/* =========================================================
   댓글창 디자인 (COMMENT SECTION)
   ========================================================= */

.cam_comment_wrap {
    margin-top: 50px;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    padding-top: 30px;
}

/* 댓글 목록 버튼 */
.cmt_btn {
    background: transparent;
    border: none;
    font-family: var(--cam-font);
    font-size: 1.1em;
    color: var(--cam-fg);
    font-weight: 600;
    padding: 0;
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cmt_btn strong { color: var(--cam-primary); }

/* 개별 댓글 디자인 */
.comment_section { margin-bottom: 30px; }
.comment_item {
    padding: 20px 0;
    border-bottom: 1px dashed var(--cam-divider);
    display: flex;
    gap: 15px;
}
.comment_item:last-child { border-bottom: none; }

.comment_profile img {
    width: 40px; height: 40px;
    border-radius: 4px;
    border: 1px solid var(--cam-divider);
}

.comment_body { flex: 1; }
.comment_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.comment_author { font-weight: 600; color: var(--cam-fg); font-size: 0.95em; }
.comment_date { color: var(--cam-muted); font-size: 0.85em; }

.comment_content {
    line-height: 1.6;
    color: var(--cam-fg);
    font-size: 0.95em;
}

/* 댓글 쓰기 폼 */
#bo_vc_w {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--cam-divider);
    border-radius: 4px;
    padding: 20px;
}
.comment_input_row textarea {
    width: 100%;
    min-height: 80px;
    padding: 15px;
    background: var(--cam-input-bg);
    border: 1px solid var(--cam-divider);
    border-radius: 4px;
    font-family: var(--cam-font);
    color: var(--cam-fg);
    resize: vertical;
    margin-bottom: 15px;
    outline: none;
    transition: 0.2s;
}
.comment_input_row textarea:focus { border-color: var(--cam-primary); background: rgba(255, 255, 255, 0.7); }

.comment_actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comment_actions .secret_cm { color: var(--cam-muted); font-size: 0.9em; }
.comment_actions .btn_submit {
    background: var(--cam-primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: var(--cam-font);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
.comment_actions .btn_submit:hover { opacity: 0.8; }

/* =========================================================
   검색창 초기 숨김 처리 (그누보드 basic.css 대체 시 필수)
   ========================================================= */
.bo_sch_wrap,
.cam_sch_wrap {
    display: none;
}

/* =========================================================
   글쓰기 확인/취소 버튼 영역
   ========================================================= */
.cam_btn_confirm {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* =========================================================
   공지사항(Notice) 게시글 상단 고정 스타일
   ========================================================= */

.cam_table_wrap tbody tr.bo_notice {
    background-color: rgba(255, 255, 255, 0.4); /* 일반 글보다 조금 더 밝게 강조 */
}

.cam_table_wrap tbody tr.bo_notice td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); /* 점선 대신 뚜렷한 실선으로 마감 */
    font-weight: bold; /* 글씨 굵게 */
}

.cam_table_wrap tbody tr.bo_notice .td_num {
    color: var(--cam-accent); /* [NOTI] 글자를 핑크색으로 강렬하게 표시 */
}

.cam_table_wrap tbody tr.bo_notice .subject_link {
    color: var(--cam-primary); /* 공지사항 제목을 민트색 포인트 컬러로 표시 */
}