/*
 * 게시판 글쓰기 (Q&A · 무료자소서 첨삭) — 시안에 없는 테마 화면
 *
 * 본문은 skin/board/_renew_write.php 하나를 두 게시판이 함께 쓴다. 색만 게시판마다 다르다.
 *   Q&A   : community.css 의 --ink #233e53, --accent #396d84, 버튼 #274b61
 *   첨삭  : essay-review.css / guidebook.css 의 #20374d, #345e85, 버튼 #294e70
 * 목록 링크 · 등록 버튼도 여기서 그린다(두 게시판이 싣는 시안 CSS 가 서로 달라서).
 * 입력칸 모양은 회원가입 화면(register.css .join-field)과 맞췄다.
 * 입력칸 모양은 회원가입 화면(register.css .join-field)과 맞췄다.
 * 옛 default.css 가 없으므로 캡챠 · 파일 · 에디터 영역도 여기서 모양을 준다.
 * 임시저장 목록(#autosave_pop)과 글자수 표시는 스킨 style.css 의 규칙을 그대로 쓴다.
 */
.board-write{--bw-ink:#233e53;--bw-accent:#396d84;--bw-btn:#274b61;padding:57px 0 88px;color:var(--bw-ink)}
.board-write--essay-review{--bw-ink:#20374d;--bw-accent:#345e85;--bw-btn:#294e70}
.bw-back{display:inline-flex;gap:11px;margin-bottom:23px;padding:8px 0;font-size:13px;color:#6d8898}
@media (hover:hover){.bw-back:hover{color:var(--bw-accent)}}
.bw-inner{max-width:880px;margin:0 auto}   /* .wrap 은 사이트 공통 폭 규칙이 잡으므로 안쪽 상자로 폭을 준다 */
.bw-head{padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid #dfe7ec}
.bw-head h2{font-size:28px;line-height:1.35;letter-spacing:-.04em;font-weight:700}
.bw-note{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;line-height:1.7;color:#778b99;word-break:keep-all}
.bw-note svg{flex:0 0 auto;width:14px;height:16px;fill:none;stroke:var(--bw-accent);stroke-width:1.6}

.bw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.bw-full{grid-column:1/-1}
.bw-field{min-width:0}
.bw-field>label,.bw-label{display:block;margin-bottom:9px;font-size:13px;font-weight:600;color:#3b5566}
.bw-req{margin-left:7px;font-size:11px;font-weight:400;color:var(--bw-accent);white-space:nowrap}
.bw-req.bw-opt{color:#8a9aa6}
.bw-hint{margin:0 0 8px;font-size:12px;line-height:1.7;color:#778b99}
#char_count_wrap.bw-hint{margin:8px 0 0}

.bw-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.bw-field select,.bw-field textarea{display:block;width:100%;min-width:0;border:1px solid #d5dfe5;border-radius:6px;background:#f9fbfc;font:inherit;font-size:16px;color:var(--bw-ink);outline:none;transition:border-color .2s,box-shadow .2s}
.bw-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.bw-field select{height:52px;padding:0 15px}
.bw-field textarea{min-height:160px;padding:14px 15px;line-height:1.75;resize:vertical}
.bw-field input::placeholder,.bw-field textarea::placeholder{color:#9aabb6;font-size:14px}
.bw-field input:focus,.bw-field select:focus,.bw-field textarea:focus{border-color:var(--bw-accent);box-shadow:0 0 0 3px rgba(57,109,132,.08);background:#fff}

/* 제목 + 임시저장 */
.bw-subject{position:relative;display:flex;gap:8px}
.bw-subject input{flex:1 1 auto}
.bw-inline-btn{flex:0 0 auto;min-height:52px;padding:0 16px;border:1px solid #c9d7df;border-radius:6px;background:#fff;color:var(--bw-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
@media (hover:hover){.bw-inline-btn:hover{border-color:var(--bw-accent)}}
.bw-subject #autosave_pop{top:58px}

/* 본문 : 에디터를 쓰지 않을 때의 textarea */
.bw-content textarea{min-height:320px}
.bw-content iframe{max-width:100%}

/* 첨부 */
.bw-file input[type="file"]{display:block;width:100%;padding:12px 14px;border:1px dashed #c9d7df;border-radius:6px;background:#fbfcfd;font-size:14px;color:#546b7a}
.bw-file input[type="file"]+input{margin-top:8px}
.bw-file-del{margin-top:8px}

/* 옵션 체크 */
.bw-options{display:flex;flex-wrap:wrap;gap:10px 22px}
.bw-check{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;cursor:pointer}
.bw-check input{width:18px;height:18px;margin:0;accent-color:var(--bw-accent)}

/* 관리자 답변 */
.bw-answer{padding:20px;border-radius:8px;background:#f3f7f9;border:1px solid #dfe7ec}
.bw-answer textarea{background:#fff}

/* 자동등록방지 (kcaptcha) */
.bw-captcha #captcha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:0;padding:0;margin:0}
.bw-captcha #captcha legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.bw-captcha #captcha_img{height:52px;border:1px solid #d5dfe5;border-radius:6px;background:#fff}
.bw-captcha #captcha_key{width:130px!important;height:52px;padding:0 12px!important;font-size:20px!important;font-weight:700;letter-spacing:.12em;text-align:center}
.bw-captcha #captcha_mp3,.bw-captcha #captcha_reload{width:44px;height:44px;border:1px solid #d5dfe5;border-radius:6px;background:#fff url('../../../../images/captcha2.png') no-repeat;background-position:2px 2px;overflow:hidden;text-indent:-999px;cursor:pointer}
.bw-captcha #captcha_reload{background-position:2px -38px}
.bw-captcha #captcha_info{flex:1 0 100%;font-size:12px;line-height:1.7;color:#778b99}
.bw-captcha #captcha.m_captcha audio{flex:1 0 100%;max-width:100%}

/* 버튼 */
.bw-actions{display:grid;grid-template-columns:130px 1fr;gap:12px;margin-top:36px}
.bw-cancel{display:flex;align-items:center;justify-content:center;min-height:55px;border:1px solid #d0dde4;border-radius:7px;background:#fff;color:#546b7a;font-size:15px}
@media (hover:hover){.bw-cancel:hover{background:#f4f7f9}}
.bw-submit{display:flex;align-items:center;justify-content:center;min-height:55px;padding:0 24px;border:1px solid var(--bw-btn);border-radius:7px;background:var(--bw-btn);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
@media (hover:hover){.bw-submit:hover:not(:disabled){background:var(--bw-ink)}}
.bw-submit:disabled{opacity:.6;cursor:progress}
.board-write a:focus-visible,.board-write button:focus-visible,.board-write input:focus-visible,.board-write select:focus-visible,.board-write textarea:focus-visible{outline:3px solid #8fb3c4;outline-offset:2px}

@media (max-width:767px){
  .board-write{padding:36px 0 64px}
  .bw-head h2{font-size:23px}
  .bw-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .bw-subject{flex-wrap:wrap}
  .bw-subject .bw-inline-btn{min-height:44px}
  .bw-subject #autosave_pop{top:auto;bottom:-6px;transform:translateY(100%);width:100%!important}
  .bw-content textarea{min-height:240px}
  .bw-actions{grid-template-columns:85px 1fr}
}