@charset "utf-8";

/* =========================================================
   [1] 공통 테마 변수 & 기본 설정
   ========================================================= */
:root {
    --bar-hp-start: #ff5f6d;  /* 게이지 컬러 */
    --bar-hp-end: #ffc371;
    --bar-mp-start: #00b09b;
    --bar-mp-end: #96c93d;
    --container_bg_color: var(--container-bg-color);
    --secondary_color: var(--secondary-color);
    --card_bg_color: var(--card-bg-color);
    --container_border_color: var(--container-border-color);
    --accent_color: var(--accent-color);
    --title_font_color: var(--title-font-color);
    --content_font_color: var(--content-font-color);
    --btn_secondary_text: var(--btn-secondary-text);
    --btn_secondary_bg: var(--btn-secondary-bg);
    --btn_secondary_radius: var(--btn-secondary-radius);
    --form_bg_color: var(--form-bg-color);
    --form_border_color: var(--form-border-color);
    --form_text_color: var(--form-text-color);
    --char_org_name_list_color: var(--accent_color);
    --char_org_name_view_color: var(--title_font_color);
}

/* 게시판 래퍼 */
#bo_list_wrap, #bo_w { 
    background: var(--container_bg_color); color: var(--content_font_color, var(--title_font_color)); 
    padding: 20px; font-family: 'Noto Sans KR', sans-serif;
}
#bo_list_wrap {
    border: 1px solid var(--container_border_color);
    border-radius: 8px;
}
.board-credit { margin-bottom: 10px; font-size: 0.85em; color: #a8a8a8; text-align: left; }

/* --- [상단 정보바] --- */
.bo_fx { 
    display:flex; justify-content:space-between; align-items:center; 
    margin-bottom:20px; padding-bottom:10px; 
    border-bottom:1px solid var(--container_border_color); 
}
#bo_list_wrap .top_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
#bo_list_wrap .top_right_area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
#bo_list_total { color: var(--title_font_color, var(--content_font_color)); font-size: 0.9em; }
#bo_list_total b { color: var(--title_font_color, var(--accent_color)); }

/* --- 상단 버튼/탭 --- */
.btn_write_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 15px;
    font-size: 0.9em;
    white-space: nowrap;
}
.btn_tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 0.85em;
    border: 1px solid var(--container_border_color);
    border-radius: 4px;
    text-decoration: none;
    color: var(--btn_secondary_text, var(--content_font_color));
    background: var(--btn_secondary_bg, rgba(0,0,0,0.2));
    white-space: nowrap;
}
.btn_tab:hover {
    background: var(--btn_secondary_text, var(--content_font_color));
    color: var(--btn_secondary_bg, rgba(0,0,0,0.2));
    border-color: var(--btn_secondary_text, var(--accent_color));
}
.btn_tab.active {
    background: var(--accent_color);
    border-color: var(--accent_color);
    color: #000;
    font-weight: bold;
}

/* --- 상단 검색 (컴팩트) --- */
.sch_wrapper {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--container_border_color);
    border-radius: 20px;
    padding: 4px 10px;
    transition: border-color 0.3s;
}
.sch_wrapper:focus-within { border-color: var(--accent_color); }
.sch_wrapper input#stx {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9em;
    width: 100px;
    padding: 0;
    outline: none;
}
.sch_wrapper input#stx::placeholder { color: rgba(255,255,255,0.3); }
.btn_sch_icon {
    background: transparent;
    border: none;
    color: var(--content_font_color);
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_sch_icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: stroke 0.3s;
}
.btn_sch_icon:hover svg { stroke: var(--accent_color); }

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

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

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

.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(--rule-color, var(--accent_color));
    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: var(--container_bg_color); 
    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_color); margin-left: 5px; vertical-align: top; }
.char-meta { font-size: 0.85em; color: var(--content_font_color, rgba(255,255,255,0.7)); margin-top: 5px; }
.char-org-name {
    font-weight: 300;          
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   
}
.char-org-name--list {
    font-size: 0.8em;
    color: var(--char_org_name_list_color) !important;
    margin-top: 2px;
}

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

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

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

/* 버튼 */
.btn_b02 { 
    background: var(--accent_color); color: #000; padding: 8px 20px; 
    border-radius: 4px; font-weight: bold; text-decoration: none; display: inline-block; 
}
.btn_b01 {
    background: var(--card_bg_color); color: var(--content_font_color); border: 1px solid var(--container_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(--card_bg_color); color: var(--content_font_color); text-decoration: none; border-radius: 3px; 
}
.pg_current { background: var(--accent_color); color: #000; font-weight: bold; }

/* 입력 폼 공통 */
input.frm_input, textarea.frm_input, select.frm_input {
    background: var(--form_bg_color) !important; border: 1px solid var(--form_border_color) !important; 
    color: var(--form_text_color) !important; padding: 8px;
}
input.frm_input:focus, textarea.frm_input:focus { border-color: var(--accent_color) !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(--container_bg_color);
    }
    .btn_tab { padding: 0 10px; font-size: 0.8em; }
    .sch_wrapper { padding: 4px 8px; }
    .sch_wrapper input#stx { width: 80px; font-size: 13px; }
    .btn_write_icon .txt { display: none; }
    .btn_write_icon { 
        padding: 0; 
        width: 32px; 
        height: 32px; 
        border-radius: 50%;
        flex: 0 0 auto; 
    }
    .btn_write_icon .icon { margin: 0; }
    
    /* [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; }
}

/* =========================================================
   [캐릭터 보기 페이지]
   ========================================================= */
#bo_v { width: 100%; padding: 0; box-sizing: border-box; background: var(--container_bg_color); }
.sheet-wrapper { 
    width: 1200px; max-width: 100%; height: 750px; margin: 40px auto; display: flex;
    background: var(--container_bg_color); border: 1px solid var(--container_border_color); border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); color: var(--title_font_color); 
    font-family: 'Noto Sans KR', sans-serif; overflow: hidden; position: relative; box-sizing: border-box;
}
.share-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-text);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 60;
}
.share-btn:hover { filter: brightness(1.05); }
.header-controls { display: flex; align-items: center; gap: 10px; }
.btn-header { background: var(--card_bg_color); border: 1px solid var(--container_border_color); color: var(--content_font_color); padding: 0 15px; border-radius: 4px; font-size: 0.85em; text-decoration: none; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; }
.btn-header:hover { border-color: var(--accent_color); color: var(--accent_color); }
.btn-header.active { border-color: var(--accent_color); color: var(--container_bg_color); background: var(--accent_color); font-weight: bold; }
.bgm-icon { font-size: 1.1em; margin-top: -2px; }
.btn-back-overlay { position: absolute; top: 20px; left: 20px; z-index: 50; color: rgba(255, 255, 255, 0.7); background: rgba(15, 23, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.btn-back-overlay:hover { background: var(--accent_color); color: var(--container_bg_color); border-color: var(--accent_color); transform: scale(1.1); }
.rule-tabs-container { display: flex; gap: 5px; margin-top: 15px; }
.char-rule { display: inline-block; background: var(--rule-color, var(--accent_color)); color: var(--container_bg_color); padding: 4px 10px; border-radius: 4px; font-size: 0.85em; font-weight: 700; margin-top: 10px; }
.rule-tab-item { font-size: 0.8em; color: var(--content_font_color); padding: 4px 12px; border: 1px solid var(--container_border_color); border-radius: 4px; cursor: pointer; text-decoration: none; transition: all 0.2s; background: var(--card_bg_color); }
.rule-tab-item:hover { background: var(--content_font_color); color: var(--card_bg_color); border-color: var(--content_font_color); }
.rule-tab-item.active { background: var(--rule-color, var(--accent_color)); border-color: var(--rule-color, var(--accent_color)); color: var(--container_bg_color); font-weight: bold; }
.sheet-left { flex: 0 0 380px; height: 100%; position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--container_border_color); background: var(--secondary_color); }
.img-container { flex: 1; overflow: hidden; position: relative; width: 100%; }
.img-container img { width: 100%; height: 100%; object-fit: cover; }
.img-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, var(--secondary_color), transparent); pointer-events: none; }
.one-line-area { position: absolute; bottom: 40px; left: 0; width: 100%; padding: 0 30px; text-align: center; z-index: 2; }
.one-line-text { font-size: 1.1em; color: var(--title_font_color); font-weight: 300; line-height: 1.6; font-style: italic; }
.one-line-text::before { content: '“'; color: var(--accent_color); font-size: 2em; line-height: 0; vertical-align: -10px; margin-right: 5px; opacity: 0.8; }
.one-line-text::after { content: '”'; color: var(--accent_color); font-size: 2em; line-height: 0; vertical-align: -10px; margin-left: 5px; opacity: 0.8; }
.no-image-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--content_font_color); background: var(--secondary_color); }
.sheet-right { flex: 1; height: 100%; display: flex; flex-direction: column; background: var(--container_bg_color); }
.char-header { padding: 30px 40px 20px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--container_border_color); }
.char-name { font-size: 2.4em; font-weight: 700; color: var(--title_font_color); letter-spacing: -1px; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0, 0.5); padding-bottom: 5px; }
.char-org-name { letter-spacing: 0; display: block; opacity: 0.7; }
.char-org-name--view { font-size: 1em; color: var(--char_org_name_view_color); margin-top: 5px; }
.sheet-tabs { display: flex; padding: 0 40px; border-bottom: 1px solid var(--container_border_color); margin-bottom: 0; flex-shrink: 0; background: var(--secondary_color); }
.sheet-tab-btn { padding: 15px 20px; margin-right: 5px; color: var(--btn_secondary_text); cursor: pointer; font-weight: 500; font-size: 1em; position: relative; transition: all 0.3s; border-bottom: 2px solid transparent; }
.sheet-tab-btn:hover { background: var(--content_font_color); color: var(--secondary_color); }
.sheet-tab-btn.active { color: var(--rule-color, var(--btn_secondary_text)); border-bottom-color: var(--rule-color, var(--accent_color)); background: var(--container_border_color); }
.tab-content-area { flex: 1; overflow-y: auto; padding: 30px 40px; position: relative; background: var(--card_bg_color); }
.tab-content-area::-webkit-scrollbar { width: 8px; background: var(--container_bg_color); }
.tab-content-area::-webkit-scrollbar-thumb { background: var(--container_border_color); border-radius: 4px; }
.tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.tab-content.active { display: block; }
.sub-title-deco { font-size: 0.95em; text-transform: uppercase; letter-spacing: 1px; color: var(--rule-color, var(--title_font_color)); margin: 30px 0 15px 0; font-weight: 700; display: flex; align-items: center; }
.sub-title-deco::after { content:""; flex:1; height:1px; background: var(--rule-color, var(--container_border_color)); margin-left: 15px; }
.sub-title-deco:first-child { margin-top: 0; }
.gauge-grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.gauge-box { padding: 5px 0; }
.gauge-header { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: flex-end; }
.gauge-name { font-weight: 700; color: var(--title_font_color); font-size: 1.05em; }
.gauge-val { font-size: 0.9em; color: var(--content_font_color); }
.gauge-val b { color: var(--title_font_color); font-size: 1.1em; }
.bar-track { width: 100%; height: 10px; background: var(--card_bg_color); border: 1px solid var(--container_border_color); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 0; transition: width 1s ease; }
.bar-hp { background: linear-gradient(to right, var(--bar-hp-start), var(--bar-hp-end)); }
.bar-mp { background: linear-gradient(to right, var(--bar-mp-start), var(--bar-mp-end)); }
.profile-grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 40px; margin-bottom: 20px; }
.profile-item { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule-color, var(--container_border_color)); padding-bottom: 5px; }
.profile-label { font-size: 0.8em; color: var(--rule-color, var(--title_font_color)); margin-bottom: 4px; }
.profile-value { font-size: 1.1em; color: var(--content-font-color); }
.stat-grid-container { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.stat-item-box { background: var(--card_bg_color); border: 1px solid var(--rule-color, var(--container_border_color)); border-radius: 4px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color 0.2s; min-height: 80px; }
.stat-item-box:hover { border-color: var(--accent_color); }
.stat-label { font-size: 0.75em; color: var(--content_font_color); margin-bottom: 5px; text-transform: uppercase; text-align:center; }
.stat-value { font-size: 1.4em; color: var(--rule-color, var(--title_font_color)); font-weight: 700; text-align:center; line-height:1.2; }
.stat-value span { font-size: 0.9rem; color: var(--accent_color); font-weight: normal; }
.ability-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.ability-card { background: var(--card_bg_color); border: 1px solid var(--rule-color, var(--container_border_color)); padding: 20px; border-radius: 4px; }
.ability-head { color: var(--rule-color, var(--title_font_color)); margin-bottom: 10px; font-weight: 700; font-size: 1.1em; border-bottom: 1px solid var(--rule-color, var(--container_border_color)); padding-bottom: 8px; }
.ability-body { font-size: 0.95em; color: var(--title_font_color); line-height: 1.6; }
.attr-tag { display: inline-block; background: var(--card_bg_color); border: 1px solid var(--rule-color, var(--container_border_color)); padding: 2px 8px; border-radius: 2px; font-size: 0.85em; margin-right: 8px; margin-bottom: 5px; color: var(--content_font_color); }
.attr-tag .attr-tag-subtitle { color: var(--rule-color, var(--title_font_color)); font-size: 1.2em; font-weight: normal; }
.attr-content { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--rule-color, var(--container_border_color)); color: var(--content_font_color); font-size: 1.1em; }
.story-box { font-size: 1.05em; line-height: 1.8; color: var(--content_font_color); background: var(--card_bg_color); border: 1px solid var(--rule-color, var(--container_border_color)); padding: 25px; border-radius: 4px; }
.admin-btns { margin-top: 40px; text-align: right; border-top: 1px solid var(--rule-color, var(--container_border_color)); padding-top: 20px; }
.btn-adm { background: var(--card_bg_color); color: var(--content_font_color); padding: 8px 16px; border: 1px solid var(--rule-color, var(--container_border_color)); border-radius: 4px; margin-left: 8px; font-size: 13px; text-decoration:none; transition: all 0.2s; }
.btn-adm:hover { border-color: var(--accent_color); color: var(--accent_color); }
.chart-container { width: 350px; height: 350px; margin: 0 auto 40px auto; position: relative; }
@keyframes fadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 1000px) {
    .sheet-wrapper { width: 100%; height: auto; flex-direction: column; margin: 0; border-radius: 0; border: none; }
    .sheet-left { height: auto; min-height: 450px; flex: none; border-right: none; border-bottom: 1px solid var(--container_border_color); }
    .gauge-grid-container, .profile-grid-container, .ability-grid { grid-template-columns: 1fr; }
    .stat-grid-container { grid-template-columns: repeat(4, 1fr); } 
    .char-header, .sheet-tabs, .tab-content-area { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 500px) { .stat-grid-container { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   [룰 관리/작성/보기 공통]
   ========================================================= */
.is-hidden { display: none !important; }
.rule-view-wrap { width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 20px; }
.rule-view-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#bo_v_title { font-size: 1.5em; margin: 0; }
.rule-view-header .bo_v_com { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; margin-left: auto; }
.rule-view-header .bo_v_com li { list-style: none; }
.rule-view-table-wrap { margin-top: 30px; }
.rule-view-title { font-size: 1.2em; margin-bottom: 10px; font-weight: bold; }
.rule-view-top { margin-top: 20px; }
.rule-td-center { text-align: center; }
.rule-td-bold { font-weight: bold; }
.rule-td-key { color: #e83e8c; }
.rule-td-option { text-align: left; padding-left: 20px; color: #555; }
.rule-etc-badge { color: #5a4dad; font-weight: bold; }
.rule-th-name, .rule-th-key, .rule-th-type { width: 15%; }
.rule-th-option { width: 30%; }
.rule-th-hex, .rule-th-manage { width: 10%; }
.rule-th-center { text-align: center; }
.rule-th-etc { width: 10%; }
.rule-list-wrap { max-width: 700px; width: 100%; margin: 0 auto; }
.rule-th-num { width: 60px; }
.rule-subject-cell { padding-left: var(--reply-indent, 0); }

/* 룰 작성 테이블 */
.rule-color-row {
    margin: 15px 0; padding: 15px; border: 1px solid #ddd; background: #f9f9f9;
    border-radius: 5px; display: flex; align-items: center;
}
.rule-color-label { font-weight: bold; margin-right: 5px; color: var(--title_font_color); }
.rule-color-input { height: 40px; width: 100px; cursor: pointer; border: none; background: none; }
.rule-color-help { margin-left: 10px; font-size: 0.9em; color: #666; }
.rule-maker-area { margin-top: 20px; border: 1px solid #ddd; padding: 20px; background: #f9f9f9; color: #333; }
.rule-maker-title { color: #000; font-weight: bold; font-size: 1.2em; margin-bottom: 5px; }
.rule-maker-help { color: #555; margin-bottom: 15px; font-size: 0.9em; }
.rule-key-highlight { color: #e83e8c; }
.rule-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; }
.rule-table thead tr { background: #4b545e; color: #fff; text-align: left; }
.rule-table th { padding: 10px; }
.rule-table th.rule-th-center { text-align: center; }
.rule-row { border-bottom: 1px solid #eee; }
.rule-cell { padding: 8px; }
.rule-cell-center { text-align: center; }
.rule-input-full, .rule-select-full, .rule-option-input { width: 100%; }
.rule-desc-text { font-size: 11px; color: #999; display: block; }
.rule-hex-text { font-size: 11px; display: block; }
.chk-hexagon-label { display: none; }
.rule-add-wrap { margin-top: 15px; text-align: center; }
.rule-add-btn {
    color: #333; border: 1px solid #ccc; background: #fff; padding: 8px 20px;
    cursor: pointer; font-weight: bold;
}
.rule-del-btn { padding: 5px 10px; font-size: 12px; }

/* 캐릭터 보기 */
.no-image-icon { font-size: 3em; opacity: 0.1; margin-bottom: 10px; }
.bar-fill { width: var(--bar-fill, 0%); }
.stat-section {
    grid-column: 1 / -1; color: var(--title_font_color); font-weight: bold; margin-top: 20px;
    padding-bottom: 5px; border-bottom: 1px dashed var(--container_border_color);
}
.stat-active { color: var(--accent_color); }
.stat-inactive { color: var(--content_font_color); }
.empty-panel { text-align: center; padding: 50px; opacity: 0.3; font-weight: 300; }
.ability-desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); color: var(--content_font_color) !important; }

/* 캐릭터 작성 */
.write-row { display: flex; gap: 10px; }
.write-col { flex: 1; }
.rule-select-box { margin: 10px 0; padding: 20px; border: 1px solid var(--container_border_color); background: var(--container_bg_color); color: var(--form_text_color); }
.rule-main-select { margin-bottom: 15px; }
.rule-main-label { font-weight: bold; color: var(--title_font_color); margin-right: 10px; display: inline-block; width: 150px; }
.rule-main-select-input { background: var(--form_bg_color); color: var(--form_text_color); border: 1px solid var(--form_border_color); }
.rule-visible-row { display: flex; align-items: flex-start; }
.rule-visible-label { font-weight: bold; color: var(--title_font_color); margin-right: 10px; display: inline-block; width: 150px; }
.rule-visible-options { flex: 1; }
.rule-visible-item { margin-right: 15px; cursor: pointer; color: var(--form_text_color); }
.rule-visible-written { font-size: 0.8em; color: var(--accent_color); }
.rule-edit-bar {
    margin: 20px 0; padding: 15px; background: var(--card_bg_color); border: 1px solid var(--container_border_color);
    color: var(--form_text_color); display: flex; justify-content: space-between; align-items: center;
}
.rule-edit-title { margin-right: 10px; color: var(--title_font_color); }
.rule-edit-select { background: var(--form_bg_color); color: var(--form_text_color); border: 1px solid var(--form_border_color); }
.rule-edit-hint { font-size: 0.9em; color: var(--form_text_color); }
.char-sheet-form { margin-top: 20px; border-top: 2px solid var(--accent_color); padding-top: 20px; }
.char-sheet-title { margin-bottom: 15px; font-size: 1.2em; color: var(--title_font_color); }
.accent-text { color: var(--accent_color); }
.char-sheet-table col:first-child { width: 150px; }
.textarea-lg { height: 100px; }
.chk-info { color: var(--content_font_color); }
.rule-radio-label { color: var(--form_text_color); margin-right: 10px; }
.rule-checkbox-label { color: var(--form_text_color); }
.rule-section-divider { margin: 10px 0; border-color: var(--form_border_color); }
.rule-section-title { font-size: 1.1em; color: var(--accent_color); }
.list-add-btn { width: 100%; margin-top: 10px; padding: 10px; font-weight: bold; color: var(--form_text_color); background: var(--form_bg_color); border: 1px solid var(--form_border_color); }
.list-input-textarea { height: 60px; width: 100%; }
.list-input-text { width: 100%; }
.rule-empty-msg { padding: 50px 0; text-align: center; color: #888; }