@charset "utf-8";

/* ==========================================================================
   KRA Custom Write Style (Isolated)
   ========================================================================== */

/* --- 1. Variables & Reset --- */
#kra_write_wrapper {
    --kra-primary: #3a8afd;
    --kra-primary-hover: #256fdb;
    --kra-text-main: #333;
    --kra-text-sub: #666;
    --kra-border: #e5e7eb;
    --kra-bg-light: #f8f9fa;
    --kra-radius: 6px;
    --kra-input-height: 45px;

    font-size: 14px;
    color: var(--kra-text-main);
    box-sizing: border-box;
    margin-bottom: 50px;
    background: #fff;
}

#kra_write_wrapper * { box-sizing: border-box; }
#kra_write_wrapper input, 
#kra_write_wrapper select, 
#kra_write_wrapper textarea, 
#kra_write_wrapper button {
    font-family: inherit;
    font-size: 14px;
    vertical-align: middle;
}
#kra_write_wrapper a { text-decoration: none; color: inherit; }
.sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }


/* --- 2. Common Layout Rows --- */
.kra_write_row {
    margin-bottom: 7px; /* 간격 적당히 조절 */
    position: relative;
}


/* --- 3. Input Styles (Base) --- */
.kra_input {
    height: var(--kra-input-height);
    border: 1px solid #ddd;
    border-radius: var(--kra-radius);
    padding: 0 15px;
    color: var(--kra-text-main);
    transition: all 0.2s;
    background: #fff; /* 기본 흰색 배경 */
}
.kra_input:focus,
.kra_input_select:focus {
    border-color: var(--kra-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 138, 253, 0.1);
}

/* 카테고리 선택 셀렉트 박스 */
.kra_input_select {
    height: var(--kra-input-height);
    border: 1px solid #ddd;
    border-radius: var(--kra-radius);
    padding: 0 35px 0 15px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 15px center;
    appearance: none;
    min-width: 180px;
    color: var(--kra-text-main);
    cursor: pointer;
}


/* --- 4. Top Group (분류 + 옵션) [수정됨] --- */
/* Flexbox로 강력하게 한 줄 배치 */
.kra_write_top_group {
    display: flex;
    align-items: center;
    gap: 15px; /* 분류와 옵션 사이 간격 */
    width: 100%;
}

/* 분류 영역 */
.kra_write_select {
    flex-shrink: 0; /* 줄어들지 않음 */
}

/* 옵션 체크박스 영역 */
.kra_write_option_wrap {
    flex-grow: 1; /* 나머지 공간 차지 */
    display: flex;
    align-items: center;
    height: var(--kra-input-height);
    padding: 0; /* 패딩 제거하여 라인 맞춤 */
    border: none; /* 테두리 제거 */
    background: transparent;
    margin-bottom: 0 !important; /* 하단 여백 제거 */
}

.kra_write_option_list {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 20px; align-items: center;
}

.kra_write_chk { position: relative; display: flex; align-items: center; }

/* Custom Checkbox Design */
.kra_chk_input { display: none; }
.kra_write_chk label {
    cursor: pointer; font-size: 14px; color: var(--kra-text-main);
    display: flex; align-items: center; gap: 6px;
    margin: 0;
}
.kra_write_chk label span {
    display: inline-block; width: 18px; height: 18px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
    position: relative; transition: all 0.2s;
}
.kra_chk_input:checked + label span {
    background: var(--kra-primary); border-color: var(--kra-primary);
}
.kra_chk_input:checked + label span::after {
    content: ''; position: absolute; left: 6px; top: 3px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* --- 5. Info Inputs (Name, PW, Email) --- */
.kra_write_info { display: flex; gap: 10px; }
.kra_write_info .kra_input { flex: 1; } /* 균등 분할 */


/* --- 6. Title & Autosave --- */
.kra_write_title { position: relative; margin-bottom: 15px; }
.kra_autosave_wrap { position: relative; }
.kra_autosave_wrap .kra_input { 
    width: 100%; 
    padding-right: 140px; /* 버튼 공간 */
    font-weight: bold; /* 제목 강조 */
} 

.kra_btn_autosave {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    background: transparent; border: 1px solid #ddd; color: var(--kra-text-sub);
    padding: 5px 10px; border-radius: 4px; font-size: 12px; transition: all 0.2s;
}
.kra_btn_autosave:hover {
    background: var(--kra-bg-light); color: var(--kra-primary); border-color: var(--kra-primary);
}

/* 임시저장 팝업 */
#autosave_pop {
    display: none; position: absolute; top: 50px; right: 0; z-index: 100;
    width: 320px; background: #fff; border: 1px solid #999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px; border-radius: var(--kra-radius);
}
#autosave_pop strong { display: block; font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
#autosave_pop ul { list-style: none; padding: 0; margin: 0 0 10px; max-height: 150px; overflow-y: auto; }
#autosave_pop li { padding: 5px 0; border-bottom: 1px solid #f5f5f5; }
#autosave_pop a { font-size: 13px; color: #555; display: block; }
.autosave_close { width: 100%; padding: 5px; background: #eee; border: none; font-size: 12px; cursor: pointer; }


/* --- 7. Content Area --- */
.kra_write_content {
    border: 1px solid #ddd; border-radius: var(--kra-radius);
    margin-bottom: 15px;
}
#char_count_desc {
    padding: 10px; font-size: 12px; color: #888; background: #f9f9f9;
    border-bottom: 1px solid #eee; margin: 0;
    border-radius: var(--kra-radius) var(--kra-radius) 0 0;
}
#char_count_wrap { text-align: right; padding: 8px 10px; font-size: 12px; color: #888; }


/* --- 8. Link & File Inputs [수정됨] --- */
/* 입력창 강조를 위해 배경색과 테두리 수정 */
.kra_write_link, .kra_write_file {
    background: var(--kra-bg-light); /* 전체 박스 배경: 연회색 */
    border: 1px solid var(--kra-border);
    border-radius: var(--kra-radius);
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    height: auto; /* 높이 유동적 */
    min-height: 40px; /* 최소 높이 보장 */
}

.kra_write_link label, 
.kra_file_icon {
    font-size: 18px; color: #888; 
    flex-shrink: 0; width: 24px; text-align: center;
    margin-top: 2px;
}

/* 링크/파일 입력창 디자인 개선 (흰색 배경 + 테두리) */
.kra_write_link input,
.kra_write_file .kra_input {
    flex: 1; /* 남은 공간 채우기 */
    background: #fff !important; /* 흰색 배경 강제 */
    border: 1px solid #ccc !important; /* 테두리 부여 */
    height: 40px !important;
    padding: 0 15px;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s;
    width: auto;
}

.kra_write_link input:focus,
.kra_write_file .kra_input:focus {
    border-color: var(--kra-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(58, 138, 253, 0.1);
}

/* 파일 업로드 버튼 */
.kra_write_file_inner { 
    flex: 1; display: flex; align-items: center; gap: 10px; 
    width: 100%;
}
.kra_input_file {
    flex: 0 0 auto; /* 크기 고정 */
    font-size: 13px;
    margin-right: 10px;
}

/* 파일 삭제 체크박스 */
.kra_write_file_del { 
    font-size: 13px; color: #e74c3c; 
    display: flex; align-items: center; margin-left: 10px; white-space: nowrap; 
}
.kra_write_file_del input { margin-right: 5px; }


/* --- 9. Captcha --- */
.kra_write_captcha {
    text-align: center;
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: var(--kra-radius);
}


/* --- 10. Buttons --- */
.kra_write_btn_wrap { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.kra_btn_submit, .kra_btn_cancel {
    height: 50px; padding: 0 40px; font-size: 16px; font-weight: 600;
    border-radius: var(--kra-radius); cursor: pointer; transition: all 0.2s;
}
.kra_btn_submit {
    background: var(--kra-primary); border: 1px solid var(--kra-primary); color: #fff;
    box-shadow: 0 4px 6px rgba(58, 138, 253, 0.2);
}
.kra_btn_submit:hover {
    background: var(--kra-primary-hover); border-color: var(--kra-primary-hover);
    transform: translateY(-2px); box-shadow: 0 6px 10px rgba(58, 138, 253, 0.3);
}
.kra_btn_cancel { background: #fff; border: 1px solid #ddd; color: var(--kra-text-sub); }
.kra_btn_cancel:hover { background: #f1f1f1; color: #333; border-color: #bbb; }