@charset "utf-8";

/* Clarity board write — 글쓰기 폼.
   목록·본문과 달리 손이 닿지 않아 그누보드 기본 모양이 그대로 남아 있었다.
   라벨이 전부 sound_only 라 화면에는 아무 설명이 없었고, 파일 첨부는 브라우저
   기본 위젯, 버튼은 기본 스타일이었다. 본문 쪽 규칙과 같은 결로 맞춘다. */

body.clarity-page #bo_w {
    padding: 1.75rem;
    border: 1px solid var(--clarity-border);
    border-radius: 1rem;
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

/* 블록 사이 간격. 기본 스킨은 구분선만 그어 그룹이 보이지 않았다. */
body.clarity-page #bo_w .write_div { margin: 0 0 1.125rem; padding: 0; border: 0; }
body.clarity-page #bo_w .write_div:last-of-type { margin-bottom: 0; }
body.clarity-page #bo_w #autosave_wrapper.write_div { margin: 0; }

/* 보이는 라벨 */
body.clarity-page #bo_w .cw-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .4375rem;
    color: var(--clarity-text-soft);
    font-size: .78rem;
    font-weight: 700;
}
body.clarity-page #bo_w .cw-label .fa { color: var(--clarity-muted); font-size: .8125rem; }

/* 입력 공통 */
body.clarity-page #bo_w :is(input[type="text"], input[type="password"], input[type="email"], select, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: .6875rem .8125rem;
    border: 1px solid var(--clarity-border-strong);
    border-radius: .625rem;
    background: var(--clarity-surface);
    color: var(--clarity-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.5;
    transition: border-color .14s ease, box-shadow .14s ease;
}
body.clarity-page #bo_w :is(input[type="text"], input[type="password"], input[type="email"], select, textarea):focus {
    border-color: var(--clarity-primary);
    box-shadow: none;
}

body.clarity-page #bo_w :is(input[type="text"], input[type="password"], input[type="email"], select, textarea):focus-visible {
    outline: 2px solid var(--clarity-primary);
    outline-offset: 1px;
}
body.clarity-page #bo_w ::placeholder { color: var(--clarity-muted); }
body.clarity-page #bo_w select { height: auto; }

/* 제목: 임시저장 버튼이 입력 위에 겹치지 않게 한 줄로 둔다. */
body.clarity-page #bo_w #autosave_wrapper { display: flex; align-items: center; gap: .625rem; }
body.clarity-page #bo_w #autosave_wrapper #wr_subject { flex: 1; }
body.clarity-page #bo_w #btn_autosave {
    height: 2.5rem;
    flex: none;
    padding: 0 .875rem;
    border: 1px solid var(--clarity-border);
    border-radius: .625rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
body.clarity-page #bo_w #btn_autosave:hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* 본문: 댓글 입력창과 같은 결 */
body.clarity-page #bo_w textarea#wr_content { min-height: 20rem; resize: vertical; }
body.clarity-page #bo_w #char_count_desc { margin: 0 0 .5rem; color: var(--clarity-muted); font-size: .76rem; }
body.clarity-page #bo_w #char_count_wrap { margin-top: .375rem; color: var(--clarity-muted); font-size: .74rem; text-align: right; }

/* 에디터 단축키 일람(.cke_sc)은 글쓰기 화면만의 것이 아니다 —
   1:1문의 작성과 답변 폼에도 같은 버튼이 붙는데 이 파일은 게시판
   글쓰기 스킨만 싣는다. 그래서 default.css 로 옮겼다. */


/* 옵션 체크박스 줄 */
body.clarity-page #bo_w .bo_v_option {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    margin: 0;
    padding: .6875rem .8125rem;
    border: 1px solid var(--clarity-border);
    border-radius: .625rem;
    background: var(--clarity-surface-soft);
    list-style: none;
}
body.clarity-page #bo_w .bo_v_option li { margin: 0; padding: 0; }
body.clarity-page #bo_w .bo_v_option label { color: var(--clarity-text-soft); font-size: .8rem; }

/* 링크 · 첨부: 스킨 style.css 가 라벨을 입력창 안쪽 40x38 아이콘 상자로
   절대배치해 두어, 글자를 넣으면 세로로 쪼개지고 입력창과 겹쳤다.
   배치를 풀어 라벨을 위로 올린다. */
body.clarity-page #bo_w :is(.bo_w_link label, .bo_w_flie .lb_icon) {
    position: static;
    width: auto;
    height: auto;
    line-height: 1;
    font-size: .78rem;
    text-align: left;
}
body.clarity-page #bo_w .bo_w_link .frm_input { padding-left: .8125rem; }
body.clarity-page #bo_w .bo_w_flie .frm_file { margin-top: 0; padding-left: .625rem; }
body.clarity-page #bo_w .bo_w_flie .file_wr {
    position: static;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
body.clarity-page #bo_w .bo_w_flie .frm_input { margin: .5rem 0 0; }
body.clarity-page #bo_w .bo_w_flie .file_del { position: static; top: auto; right: auto; }

/* 링크 · 첨부: 라벨을 위에 두고 입력을 아래로 */
body.clarity-page #bo_w :is(.bo_w_link, .bo_w_flie) { display: flex; flex-direction: column; }
body.clarity-page #bo_w .file_wr { display: flex; flex-direction: column; margin: 0 0 .5rem; }

/* 파일 입력: 브라우저 기본 위젯이 테마와 따로 놀았다. */
body.clarity-page #bo_w input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    padding: .5rem .625rem;
    border: 1px dashed var(--clarity-border-strong);
    border-radius: .625rem;
    background: var(--clarity-surface-soft);
    color: var(--clarity-muted);
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}
body.clarity-page #bo_w input[type="file"]::file-selector-button {
    margin-right: .625rem;
    padding: .375rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .14s ease;
}
body.clarity-page #bo_w input[type="file"]:hover { border-color: var(--clarity-primary); }
body.clarity-page #bo_w input[type="file"]:hover::file-selector-button { background: color-mix(in srgb, var(--clarity-primary) 18%, transparent); }
body.clarity-page #bo_w .file_del { display: inline-flex; align-items: center; gap: .375rem; margin-top: .4375rem; color: var(--clarity-muted); font-size: .76rem; }

/* 하단 버튼: 본문 쪽 규칙과 같게 오른쪽 정렬 + pill */
body.clarity-page #bo_w .btn_confirm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--clarity-border);
}
body.clarity-page #bo_w .btn_confirm .btn_cancel {
    display: inline-flex;
    height: 2.625rem;
    align-items: center;
    padding: 0 1.125rem;
    border: 1px solid var(--clarity-border);
    border-radius: 999px;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-size: .85rem;
    font-weight: 700;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
body.clarity-page #bo_w .btn_confirm .btn_cancel:hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}
body.clarity-page #bo_w .btn_confirm .btn_submit {
    height: 2.625rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .14s ease;
}
body.clarity-page #bo_w .btn_confirm .btn_submit:hover { background: var(--clarity-primary-hover); }

@media (max-width: 767px) {
    body.clarity-page #bo_w { padding: 1.125rem; }
    body.clarity-page #bo_w #autosave_wrapper { flex-wrap: wrap; }
    body.clarity-page #bo_w #btn_autosave { width: 100%; }
    body.clarity-page #bo_w textarea#wr_content { min-height: 14rem; }
    body.clarity-page #bo_w .btn_confirm > * { flex: 1; justify-content: center; }
}

/* ==========================================================================
   글쓰기 — 시안(비회원용·회원용 글쓰기) 적용
   폼을 네 덩이(작성자 정보 · 글 내용 · 링크와 첨부 · 자동등록방지)로 나누고
   라벨을 눈에 보이게 세운다. 예전에는 라벨이 전부 sound_only 라 입력칸만
   줄줄이 서 있었고, half_input 이 float 라 칸마다 들여쓰기가 어긋났다.
   치수는 시안대로, 색은 사이트 팔레트를 쓴다.
   ========================================================================== */

body.clarity-page #bo_w #fwrite { display: flex; flex-direction: column; gap: 1rem; width: 100% !important; }
body.clarity-page #bo_w .cw-card {
    border: 1px solid var(--clarity-border);
    border-radius: .875rem;
    background: var(--clarity-surface);
    box-shadow: none;
}
body.clarity-page #bo_w .cw-card > .card-body { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.75rem 2rem; }
body.clarity-page #bo_w .cw-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .625rem; }
body.clarity-page #bo_w .cw-card-head h2 { margin: 0; color: var(--clarity-text); font-size: .9375rem; font-weight: 700; letter-spacing: -.02em; }
body.clarity-page #bo_w .cw-card-head span { color: var(--clarity-muted); font-size: .78125rem; letter-spacing: -.01em; }

/* 회원 프로필 줄 */
/* 위의 .cw-card > .card-body 규칙이 더 구체적이라 column 이 이긴다.
   같은 깊이로 적어야 프로필 줄이 좌우로 갈린다. */
body.clarity-page #bo_w .cw-card > .cw-author-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
}
body.clarity-page #bo_w .cw-author { display: flex; min-width: 0; align-items: center; gap: .75rem; }
body.clarity-page #bo_w .cw-avatar {
    display: grid;
    width: 2.625rem;
    height: 2.625rem;
    flex: none;
    place-items: center;
    border-radius: 999px;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    font-size: 1rem;
    font-weight: 700;
}
body.clarity-page #bo_w .cw-author-text { display: flex; min-width: 0; flex-direction: column; gap: .25rem; }
body.clarity-page #bo_w .cw-author-name { display: flex; align-items: center; gap: .4375rem; color: var(--clarity-text); font-size: .9375rem; font-weight: 700; letter-spacing: -.02em; }
body.clarity-page #bo_w .cw-author-badge { border: 0; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: .6875rem; font-weight: 700; }
body.clarity-page #bo_w .cw-author-note { color: var(--clarity-muted); font-size: .78125rem; letter-spacing: -.01em; }

/* 라벨 + 입력 한 짝 */
body.clarity-page #bo_w .cw-field { display: flex; flex-direction: column; gap: .4375rem; }
body.clarity-page #bo_w .cw-field-label { display: flex; align-items: center; gap: .3125rem; color: var(--clarity-text-soft); font-size: .8125rem; font-weight: 600; letter-spacing: -.015em; }
body.clarity-page #bo_w .cw-field-label b { color: var(--clarity-danger, #b42318); font-size: .75rem; font-weight: 700; }
body.clarity-page #bo_w .cw-grid { display: grid; gap: 1.125rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.clarity-page #bo_w :is(.cw-field, .cw-inline-field) :is(input.input, select.select) { height: 2.75rem; font-size: .90625rem; }

/* 링크·첨부는 라벨을 왼쪽에 붙인다 */
body.clarity-page #bo_w .cw-inline-field { display: flex; align-items: center; gap: .75rem; }
body.clarity-page #bo_w .cw-inline-label { width: 3.25rem; flex: none; color: var(--clarity-muted); font-size: .78125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
body.clarity-page #bo_w .cw-file { display: flex; flex-direction: column; gap: .5rem; }
body.clarity-page #bo_w .cw-file-desc { margin-left: 4rem; }
body.clarity-page #bo_w .cw-file-del { margin-left: 4rem; }

/* 옵션 체크박스 */
body.clarity-page #bo_w .cw-options { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
body.clarity-page #bo_w .cw-options > li { margin: 0; padding: 0; }
body.clarity-page #bo_w .cw-opt { display: inline-flex; align-items: center; gap: .375rem; color: var(--clarity-text-soft); cursor: pointer; font-size: .8125rem; font-weight: 600; letter-spacing: -.015em; }

/* 맨 아래 줄 */
body.clarity-page #bo_w .cw-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; margin: 0; padding: 0; border: 0; }
body.clarity-page #bo_w .cw-actions-note { margin-right: auto; color: var(--clarity-muted); font-size: .78125rem; }
body.clarity-page #bo_w .cw-actions .btn { height: 2.75rem; min-height: 0; border-radius: .625rem; font-size: .875rem; font-weight: 700; }

@media (max-width: 40rem) {
    body.clarity-page #bo_w .cw-card > .card-body { padding: 1.25rem 1.125rem; }
    body.clarity-page #bo_w .cw-author-card { padding: 1.25rem 1.125rem; }
    body.clarity-page #bo_w .cw-grid { grid-template-columns: minmax(0, 1fr); }
    body.clarity-page #bo_w .cw-inline-field { flex-direction: column; align-items: stretch; gap: .375rem; }
    body.clarity-page #bo_w :is(.cw-file-desc, .cw-file-del) { margin-left: 0; }
    /* flex 항목이라 width:100% 만으로는 줄어든다. 한 줄을 통째로 차지하게 basis 로 준다. */
    body.clarity-page #bo_w .cw-actions-note { flex: 0 0 100%; margin: 0 0 .25rem; }
}

/* 자동등록방지 — 댓글 폼과 같은 모양으로 맞춘다.
   그림 · 음성듣기 · 새로고침 · 입력이 한 줄로 서고 안내는 아래 한 줄로 간다.
   (댓글 쪽 규칙은 board-view.skin 에서만 실리는 board-view-cards.css 에 있어
   이 화면에는 오지 않는다. 그래서 같은 값을 여기에 한 번 더 적는다.) */
body.clarity-page #bo_w .cw-captcha-card { padding: 1.25rem 1.5rem; }
body.clarity-page #bo_w #captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    margin: 0;
    border: 0;
    padding: 0;
}
body.clarity-page #bo_w #captcha legend {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    color: var(--clarity-text);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
body.clarity-page #bo_w #captcha_img {
    order: 1;
    width: auto;
    height: 3rem;
    flex: none;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface-soft);
}
body.clarity-page #bo_w :is(#captcha_mp3, #captcha_reload) {
    order: 2;
    display: inline-flex;
    height: 3rem;
    flex: none;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    cursor: pointer;
    padding-inline: .8125rem;
    font: inherit;
    font-size: .78125rem;
    font-weight: 600;
    white-space: nowrap;
}
body.clarity-page #bo_w :is(#captcha_mp3, #captcha_reload):hover { border-color: var(--clarity-border-strong); color: var(--clarity-text); }
body.clarity-page #bo_w #captcha_key {
    order: 3;
    height: 3rem;
    min-width: 8.75rem;
    flex: 1;
    box-sizing: border-box;
    border: 1px solid var(--clarity-border-strong);
    border-radius: .5rem;
    background: var(--clarity-surface-soft);
    padding-inline: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.0625rem;
    letter-spacing: .28em;
}
/* 모바일에서는 코어가 버튼 대신 <audio controls> 를 넣는다(m_captcha). */
body.clarity-page #bo_w #captcha_audio { order: 4; width: 100%; height: 2.25rem; }
body.clarity-page #bo_w #captcha_info { order: 5; width: 100%; color: var(--clarity-muted); font-size: .75rem; letter-spacing: -.01em; }

/* 첨부는 daisyUI file-input 을 쓴다. 레거시 점선 테두리를 걷어낸다. */
body.clarity-page #bo_w .cw-file .file-input { border-style: solid; height: 2.75rem; }