@charset "utf-8";

/* ══════════════════════════════════════
   글쓰기 페이지 전체 레이아웃
══════════════════════════════════════ */
#bo_w {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 10px 40px;
}

.mb_board_write {
    font-family: 'MabinogiClassicR', sans-serif;
    font-size: 12px;
}

/* ── dl/dt/dd 기본 구조 ── */
.mb_board_write dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 0;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}
.mb_board_write dl:last-of-type {
    border-bottom: none;
}
.mb_board_write dt {
    width: 100px;
    flex-shrink: 0;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    color: #444;
}
.mb_board_write dd {
    flex: 1;
    min-width: 0;
    line-height: 32px;
    box-sizing: border-box;
}

/* ── input/textarea 기본 ── */
.mb_board_write input[type="text"],
.mb_board_write input[type="file"],
.mb_board_write textarea,
.mb_board_write select {
    font-family: 'MabinogiClassicR', sans-serif;
    font-size: 12px;
    box-sizing: border-box;
}
.mb_board_write input.frm_input { padding: 4px 6px; }
.mb_board_write input.frm_input.full { width: 100%; display: block; margin: 2px 0; }
.mb_board_write .frm_input.small { width: 55px; }
.mb_board_write .frm_info {
    display: block;
    font-size: 10px;
    color: #777;
    line-height: 1.6;
    margin-top: 2px;
    white-space: normal;
    word-break: keep-all;
}

/* ══════════════════════════════════════
   이미지 업로드 영역
══════════════════════════════════════ */
.mb_board_write .files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mb_board_write .files .sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px dotted #e0e0e0;
}
.mb_board_write .files .sub:last-of-type {
    border-bottom: none;
}
.mb_board_write .files span.sub_tit {
    display: inline-block;
    width: 65px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #555;
}
.mb_board_write .files .label-right {
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
}


/* ══════════════════════════════════════
   캐릭터명
══════════════════════════════════════ */
.mb_board_write .wr_subject {
    margin-top: 4px !important;
}
.mb_board_write .wr_subject input {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
}

/* ══════════════════════════════════════
   대사 및 묘사
══════════════════════════════════════ */
#wr_content {
    display: block;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    padding: 6px 8px;
    font-family: 'MabinogiClassicR', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    resize: vertical;
}
.mb_board_write .desc {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 11px;
    line-height: 1.8;
    color: #444;
    margin-top: 6px;
}

/* ══════════════════════════════════════
   여행 수첩
══════════════════════════════════════ */
#wr_note {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wr_note_con {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    max-width: 700px;
    padding: 4px 0;
}
.wr_note_con .sub_tit {
    display: inline-block;
    width: 120px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    line-height: 32px;
}
.wr_note_con textarea {
    width: 100%;
    height: 50px;
    padding: 4px 6px;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.6;
}
.wr_note_con input[type="text"] { padding: 4px 6px; }
.wr_note_con input[placeholder="키워드"] { width: 120px; }
.wr_note_con input[placeholder="설명"]   { width: 200px; }
.wr_note_con textarea[placeholder="대사 및 묘사"] {
    width: 100%;
    height: 40px;
}
dd > .wr_note_con {
    border-top: 1px dotted #e0e0e0;
    padding-top: 6px;
}
dd > .wr_note_con:first-of-type { border-top: none; }
.wr_note_con :placeholder-shown {
    font-family: 'MabinogiClassicR', sans-serif;
    font-size: 11px;
}

/* ══════════════════════════════════════
   순서
══════════════════════════════════════ */
.wr_10 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 600px;
}
.wr_10 input[type="text"] {
    width: 80px;
    padding: 4px 6px;
}
.wr_10 .frm_info { flex: 1; min-width: 200px; }

/* ══════════════════════════════════════
   하단 제출 버튼
══════════════════════════════════════ */
.btn_confirm {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.btn_confirm .btn_submit,
.btn_confirm .btn_cancel {
    font-family: 'MabinogiClassicR', sans-serif;
    font-size: 12px;
    padding: 6px 24px;
    cursor: pointer;
}

/* ══════════════════════════════════════
   반응형
══════════════════════════════════════ */
@media all and (max-width: 640px) {
    .mb_board_write dl { flex-direction: column; }
    .mb_board_write dt { width: 100%; text-align: left; padding-left: 4px; line-height: 24px; }
    .mb_board_write dd { width: 100%; }
    .mb_board_write .files .label-right { margin-left: 0; }
    .wr_note_con .sub_tit { width: 100%; line-height: 20px; }
    .wr_note_con input[placeholder="키워드"],
    .wr_note_con input[placeholder="설명"] { width: 100%; }
    .wr_10 { flex-direction: column; }
}