@charset "utf-8";

/* =========================================================
   [1] 공통 테마 변수 & 기본 설정
   ========================================================= */
:root {
    --bg-main: #0f171e;       /* 메인 배경 */
    --bg-con: #141e26;        /* 컨텐츠 영역 */
    --bg-card: #1c2a35;       /* 카드 배경 */
    --border-color: #2a3b4c;  /* 테두리 */
    --accent-cyan: #64ffda;   /* 포인트 (민트) */
    --text-main: #e6f1f5;     /* 메인 텍스트 */
    --text-sub: #8b9bb4;      /* 서브 텍스트 */
}

/* 게시판 래퍼 */
#bo_list_wrap, #bo_w { 
    background: var(--bg-main); color: var(--text-main); 
    padding: 20px; font-family: 'Noto Sans KR', sans-serif;
}

/* --- [상단 정보바] --- */
.bo_fx { 
    display:flex; justify-content:space-between; align-items:center; 
    margin-bottom:20px; padding-bottom:10px; 
    border-bottom:1px solid var(--border-color); 
}
#bo_list_total { color: var(--text-sub); font-size: 0.9em; }
#bo_list_total b { color: var(--accent-cyan); }

/* --- [그리드 레이아웃] --- */
.char-gallery-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 20px; 
    margin-bottom: 40px;
}

/* --- [카드 아이템 디자인] --- */
.char-card-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px; 
    overflow: hidden;
    position: relative;
    height: 320px; /* PC 기본 높이 */
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.char-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(100, 255, 218, 0.15);
    border-color: var(--accent-cyan);
}

.char-card-link { 
    display: block; width: 100%; height: 100%; 
    text-decoration: none; color: inherit; 
}

/* 썸네일 (카드 덮기) */
.char-thumb {
    width: 100%; height: 100%;
    background: #000; position: relative;
    z-index: 1;
}

.char-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top; 
    transition: transform 0.5s ease;
    display: block;
}

.char-card-item:hover .char-thumb img { transform: none; }

/* 텍스트 가독성 오버레이 */
.char-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 70%;
    background: linear-gradient(to top, rgba(15, 23, 30, 0.95) 0%, rgba(15, 23, 30, 0.5) 50%, transparent 100%);
    pointer-events: none; z-index: 2;
}

/* 뱃지 */
.char-rule-badge {
    position: absolute; top: 15px; left: 15px;
    font-size: 0.75em; color: #000; font-weight: bold;
    background: var(--accent-cyan);
    padding: 3px 10px; border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 하단 정보 */
.char-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px; z-index: 3;
    display: flex; flex-direction: column; justify-content: flex-end;
}

.char-subject {
    font-size: 1.3em; font-weight: 700; color: #fff; 
    margin: 0; line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-subject .cnt { font-size: 0.7em; color: var(--accent-cyan); margin-left: 5px; vertical-align: top; }
.char-meta { font-size: 0.85em; color: rgba(255,255,255,0.7); margin-top: 5px; }

.empty_list { grid-column: 1 / -1; text-align: center; padding: 100px 0; color: var(--text-sub); }

/* --- [하단 UI (검색, 페이징, 버튼)] --- */
.bo_fx_bottom { text-align: center; margin-top: 30px; }

/* PC용 기본 검색바 스타일 */
#fsearch { display: inline-block; vertical-align: middle; }
#fsearch select, #fsearch input {
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-main); padding: 8px; border-radius: 4px; vertical-align: middle;
}

/* 버튼 */
.btn_b02 { 
    background: var(--accent-cyan); color: #000; padding: 8px 20px; 
    border-radius: 4px; font-weight: bold; text-decoration: none; display: inline-block; 
}
.btn_b01 {
    background: var(--bg-card); color: var(--text-sub); border: 1px solid var(--border-color);
    padding: 8px 15px; border-radius: 4px; cursor: pointer;
}

/* 페이징 */
.pg_wrap { text-align: center; margin-top: 20px; }
.pg_page, .pg_current { 
    display: inline-block; padding: 5px 12px; margin: 0 2px; 
    background: var(--bg-card); color: var(--text-sub); text-decoration: none; border-radius: 3px; 
}
.pg_current { background: var(--accent-cyan); color: #000; font-weight: bold; }

/* 입력 폼 공통 */
input.frm_input, textarea.frm_input, select.frm_input {
    background: #111 !important; border: 1px solid var(--border-color) !important; 
    color: #eee !important; padding: 8px;
}
input.frm_input:focus, textarea.frm_input:focus { border-color: var(--accent-cyan) !important; }


/* =========================================================
   [모바일 최적화] 화면 너비 768px 이하일 때 적용
   ========================================================= */
@media (max-width: 768px) {

    /* [1. 게시판 내부 여백 제거] */
    #bo_list_wrap {
        padding: 0 !important;    
        margin-top: 0 !important; 
    }
    
    #bo_w, #bo_v_con { padding: 10px !important; }

    /* [2. 상단 정보바] */
    .bo_fx {
        margin-top: 0 !important;
        padding: 10px 15px !important; 
        margin-bottom: 0 !important; 
        background: var(--bg-main);
    }
    
    /* [3. 카드 리스트] */
    .char-gallery-grid {
        gap: 10px; 
        padding: 5px 10px 0 10px; 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        margin-bottom: 5px !important; 
    }
    
    .char-card-item { height: 210px; }
    .char-subject { font-size: 1.0em; } 
    .char-rule-badge { top: 8px; left: 8px; font-size: 0.6em; padding: 2px 6px; }
    .char-info { padding: 10px; } 

    /* [4. 하단 검색창 & UI 최적화 (요청사항 반영)] */
    .bo_fx_bottom {
        margin-top: 5px !important; 
        margin-bottom: 20px;       
        padding-top: 0 !important;
    }
    
    #bo_sch { 
        margin-top: 0 !important; 
        width: 100%;
    }

    /* 검색 폼을 Flex 박스로 만들어 한 줄 정렬 */
    #fsearch, #fsearch form, #fsearch fieldset {
        display: flex !important;
        width: 100%;
        max-width: 100% !important;
        gap: 5px; /* 입력창과 버튼 사이 간격 */
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        border: 0; padding: 0; /* fieldset 테두리 제거 */
    }

    /* (A) 검색 조건 드롭다운(캐릭터명 등) 숨김 */
    #fsearch select {
        display: none !important; 
    }

    /* (B) 입력창: 남은 공간 꽉 채우기 */
    #fsearch input.frm_input,
    #fsearch input[type="text"] {
        flex: 1; /* 가변 너비 */
        width: auto !important;
        margin: 0 !important;
        height: 40px; /* 터치하기 편한 높이 */
    }

    /* (C) 검색 버튼: 크기 고정 */
    #fsearch .btn_submit, 
    #fsearch .btn_b01 {
        flex: 0 0 auto; /* 늘어나거나 줄어들지 않음 */
        width: auto !important;
        height: 40px;
        margin: 0 !important;
        white-space: nowrap; /* 글자 줄바꿈 방지 */
    }
    
    /* 페이징 */
    .pg_wrap { margin-top: 5px; margin-bottom: 10px; }

    /* [기타] 상세/글쓰기 페이지 최적화 */
    .sheet-wrapper { width: 100%; border: none; margin: 0; }
    .char-header, .sheet-tabs, .tab-content-area { padding-left: 15px !important; padding-right: 15px !important; }
    .stat-grid-container { grid-template-columns: repeat(2, 1fr) !important; }
    .gauge-grid-container, .profile-grid-container { grid-template-columns: 1fr !important; }
    .rule-table, .rule-table tbody, .rule-table tr, .rule-table td { display: block; }
    .rule-table thead { display: none; }
    .rule-row { border: 1px solid #444; margin-bottom: 10px; padding: 10px; border-radius: 5px; background: #fff; }
    .rule-row td { border: none; padding: 5px 0; }
}