@charset "utf-8";
/* 밤나라 질문답변(bn-qna) 스킨 — 자기완결 CSS. 전부 #bn-qna 로 스코프.
   토큰(--pink 등)은 theme/default.css :root 에 정의됨. default.css 는 수정하지 않는다(팀 design 소유). */

#bn-qna{max-width:var(--wide,1180px);margin:0 auto;color:var(--text,#242124);
  font-family:inherit;line-height:1.6}
#bn-qna *{box-sizing:border-box}

/* ===== 1차 CTA 버튼 (계약 §2 공통 스펙) ===== */
#bn-qna .qna-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:50px;padding:0 24px;border:0;border-radius:var(--radius-md,16px);
  background:var(--grad,linear-gradient(135deg,#ff4f9a,#ff7a8a));color:#fff;
  font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 20px rgba(231,53,130,.30);transition:.15s}
#bn-qna .qna-cta:hover{filter:brightness(1.05);transform:translateY(-2px);color:#fff;
  box-shadow:0 12px 26px rgba(231,53,130,.38)}

/* 보조(취소) 버튼 — 흰 배경 + 핑크 글씨 + 보더 */
#bn-qna .qna-cancel{display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 20px;border:1px solid var(--pink-line,#f3c4d8);border-radius:var(--radius-sm,12px);
  background:#fff;color:var(--pink-strong,#e73582);font-weight:700;font-size:14px;
  text-decoration:none;transition:.15s}
#bn-qna .qna-cancel:hover{border-color:var(--pink,#ff4f9a);background:var(--pink-soft,#ffe1ee)}

/* ===== 히어로 / CTA 영역 ===== */
#bn-qna .qna-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:32px 30px;margin-bottom:22px;border-radius:var(--radius-lg,22px);
  background:linear-gradient(135deg,var(--pink-soft,#ffe1ee),#fff);
  border:1px solid var(--pink-line,#f3c4d8)}
#bn-qna .qna-hero-tit{font-size:28px;font-weight:850;color:var(--text,#242124);margin:0 0 6px;
  letter-spacing:-.4px}
#bn-qna .qna-hero-desc{font-size:15px;color:var(--text-soft,#51464d);margin:0}

/* ===== 상단 바: 총건수 + 관리옵션 ===== */
#bn-qna .qna-bar{display:flex;align-items:center;justify-content:space-between;
  margin:0 0 14px;min-height:24px}
#bn-qna .qna-total{font-size:12px;color:var(--muted,#8a7b84)}
#bn-qna .qna-admin{position:relative}
#bn-qna .qna-bar .btn_more_opt{border:1px solid var(--line,#f1d7e2);background:#fff;
  color:var(--muted,#8a7b84);border-radius:10px;width:34px;height:30px;cursor:pointer}
#bn-qna .more_opt.is_list_btn{display:none;position:absolute;right:0;top:36px;z-index:20;
  background:#fff;border:1px solid var(--line,#f1d7e2);border-radius:12px;
  box-shadow:0 10px 28px rgba(231,53,130,.14);list-style:none;margin:0;padding:6px;min-width:130px}
#bn-qna .more_opt.is_list_btn button{display:block;width:100%;text-align:left;border:0;
  background:none;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;
  color:var(--text,#242124)}
#bn-qna .more_opt.is_list_btn button:hover{background:var(--pink-soft,#ffe1ee);color:var(--pink-strong,#e73582)}

/* ===== 질문 카드 피드 그리드 ===== */
#bn-qna .qna-feed{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:1000px){#bn-qna .qna-feed{grid-template-columns:repeat(3,1fr)}}

#bn-qna .qna-card{position:relative;background:var(--surface,#fff);border:1px solid var(--line,#f1d7e2);
  border-radius:var(--radius-lg,22px);transition:.15s;overflow:hidden;
  box-shadow:var(--shadow,0 12px 32px rgba(231,53,130,.10))}
#bn-qna .qna-card:hover{border-color:var(--pink,#ff4f9a);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(231,53,130,.16)}
#bn-qna .qna-card.is-notice{border-color:var(--pink-line,#f3c4d8);background:var(--surface-pink,#fff5f9)}

#bn-qna .qna-card-link{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;
  text-decoration:none;color:inherit;height:100%}

/* 뱃지 영역 (질문 + 답변상태) */
#bn-qna .qna-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#bn-qna .qna-badge{display:inline-block;background:var(--pink-soft,#ffe1ee);color:var(--pink-strong,#e73582);
  border:1px solid var(--pink-line,#f3c4d8);
  font-size:12.5px;font-weight:750;line-height:1;padding:6px 11px;border-radius:var(--radius-pill,999px)}
#bn-qna .qna-badge.is-notice{background:var(--pink,#ff4f9a);color:#fff;border-color:var(--pink,#ff4f9a)}

/* 답변상태 뱃지 */
#bn-qna .qna-status{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:750;
  line-height:1;padding:6px 10px;border-radius:var(--radius-pill,999px)}
#bn-qna .qna-status.answered{background:var(--pink,#ff4f9a);color:#fff}
#bn-qna .qna-status.waiting{background:#fff;color:var(--muted,#8a7b84);border:1px solid var(--line,#f1d7e2)}

#bn-qna .qna-tit{font-size:18px;font-weight:800;color:var(--text,#242124);line-height:1.4;
  letter-spacing:-.025em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1 0 auto}
#bn-qna .qna-card:hover .qna-tit{color:var(--pink-strong,#e73582)}
#bn-qna .qna-new{display:inline-block;background:var(--pink,#ff4f9a);color:#fff;font-size:10px;
  font-weight:800;font-style:normal;padding:1px 5px;border-radius:5px;margin-left:5px;vertical-align:middle}

#bn-qna .qna-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;
  color:var(--muted,#8a7b84);margin-top:auto;padding-top:8px;
  border-top:1px solid var(--line,#f1d7e2)}
#bn-qna .qna-meta i{margin-right:2px}
#bn-qna .qna-meta .qna-cmt{color:var(--pink-strong,#e73582);font-weight:700}

/* 체크박스(관리) */
#bn-qna .qna-chk{position:absolute;top:10px;right:10px;z-index:5}

/* 빈 상태 */
#bn-qna .qna-empty{padding:10px 0}

/* 페이지네이션 */
#bn-qna .qna-paging{margin:26px 0 6px;text-align:center}
#bn-qna .qna-paging .pg_wrap{display:inline-block}
#bn-qna .qna-paging .pg a,#bn-qna .qna-paging .pg strong{display:inline-flex;align-items:center;
  justify-content:center;min-width:40px;height:40px;padding:0 6px;margin:0 2px;border-radius:10px;
  border:1px solid var(--line,#f1d7e2);background:#fff;color:var(--text,#242124);font-weight:700}
#bn-qna .qna-paging .pg a:hover{border-color:var(--pink,#ff4f9a);color:var(--pink-strong,#e73582)}
#bn-qna .qna-paging .pg strong,#bn-qna .qna-paging .pg .sound_only+strong,
#bn-qna .qna-paging .pg_current{background:var(--pink,#ff4f9a);border-color:var(--pink,#ff4f9a);color:#fff}

/* 하단 CTA */
#bn-qna .qna-bottom-cta{text-align:center;margin:18px 0 4px}

/* ===== 하단 접힘 검색 ===== */
#bn-qna .qna-sch-wrap{margin-top:26px;text-align:center}
#bn-qna .qna-sch-toggle{border:1px solid var(--line,#f1d7e2);background:#fff;
  color:var(--muted,#8a7b84);font-weight:700;font-size:13px;padding:9px 18px;
  border-radius:var(--radius-pill,999px);cursor:pointer}
#bn-qna .qna-sch-toggle:hover{border-color:var(--pink-line,#f3c4d8);color:var(--pink-strong,#e73582)}
#bn-qna .qna-sch-panel{margin:14px auto 0;max-width:560px;display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center}
#bn-qna .qna-sch-panel select,#bn-qna .qna-sch-input{height:44px;border:1px solid var(--line,#f1d7e2);
  border-radius:12px;padding:0 14px;font-size:14px;background:#fff;color:var(--text,#242124)}
#bn-qna .qna-sch-input{flex:1;min-width:160px}
#bn-qna .qna-sch-input:focus,#bn-qna .qna-sch-panel select:focus{outline:0;border-color:var(--pink,#ff4f9a)}
#bn-qna .qna-sch-btn{height:44px;padding:0 20px;border:0;border-radius:12px;
  background:var(--pink,#ff4f9a);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
#bn-qna .qna-sch-btn:hover{background:var(--pink-strong,#e73582)}

/* =========================================================
   WRITE — 질문 작성 폼 (흰 카드)
   ========================================================= */
#bn-qna.qna-write-wrap{max-width:var(--read,860px)}
#bn-qna .qna-write-head{margin-bottom:18px}
#bn-qna .qna-write-tit{font-size:26px;font-weight:850;color:var(--text,#242124);margin:0 0 8px}
#bn-qna .qna-write-guide{font-size:14px;color:var(--text-soft,#51464d);margin:0;
  background:var(--pink-soft,#ffe1ee);border:1px solid var(--pink-line,#f3c4d8);
  border-radius:12px;padding:12px 16px}

#bn-qna .qna-form{width:100%!important;background:var(--surface,#fff);border:1px solid var(--line,#f1d7e2);
  border-radius:var(--radius-md,16px);padding:26px 26px 24px;box-shadow:var(--shadow,0 12px 32px rgba(231,53,130,.10))}
#bn-qna .qna-field{margin-bottom:18px}
#bn-qna .qna-field>label,#bn-qna .qna-opt-label{display:block;font-weight:700;font-size:14px;
  color:var(--text,#242124);margin-bottom:7px}
#bn-qna .qna-req{color:var(--pink,#ff4f9a);font-size:12px;font-weight:700;font-style:normal;margin-left:4px}

#bn-qna .qna-input,#bn-qna .qna-select,#bn-qna .qna-textarea{width:100%;
  border:1px solid var(--line,#f1d7e2);border-radius:12px;background:#fff;
  color:var(--text,#242124);font-size:15px;font-family:inherit;padding:0 14px;height:48px}
#bn-qna .qna-textarea{height:auto;padding:13px 14px;line-height:1.6;resize:vertical;min-height:170px}
#bn-qna .qna-input:focus,#bn-qna .qna-select:focus,#bn-qna .qna-textarea:focus{outline:0;
  border-color:var(--pink,#ff4f9a);box-shadow:0 0 0 3px rgba(255,79,154,.12)}
#bn-qna .qna-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238a7b84' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:36px}

#bn-qna .qna-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#bn-qna .qna-grid2 .qna-field{margin-bottom:18px}

#bn-qna .qna-help{font-size:12px;color:var(--muted,#8a7b84);margin:7px 0 0}
#bn-qna .qna-help strong{color:var(--pink-strong,#e73582)}

/* 옵션(공지/비밀/메일) — 작게 */
#bn-qna .qna-options{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
#bn-qna .qna-options li{font-size:14px;color:var(--text,#242124)}

/* 자동등록방지 — 하단 작게 */
#bn-qna .qna-captcha{transform:scale(.95);transform-origin:left center}

/* autosave 위젯 */
#bn-qna #autosave_wrapper{position:relative}
#bn-qna #btn_autosave{margin-top:8px;border:1px solid var(--line,#f1d7e2);background:#fff;
  color:var(--muted,#8a7b84);border-radius:10px;padding:7px 12px;font-size:12px;cursor:pointer}

/* 폼 버튼 */
#bn-qna .qna-btns{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line,#f1d7e2)}

/* =========================================================
   VIEW — 질문 상세
   ========================================================= */
#bn-qna.qna-view{max-width:var(--read,860px)}
#bn-qna .qna-v-head{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line,#f1d7e2)}
#bn-qna .qna-v-head .qna-badges{margin-bottom:12px}
#bn-qna .qna-v-tit{font-size:28px;font-weight:850;color:var(--text,#242124);margin:0 0 14px;
  line-height:1.32;letter-spacing:-.4px}
#bn-qna .qna-v-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted,#8a7b84)}
#bn-qna .qna-v-meta a{color:var(--muted,#8a7b84)}
#bn-qna .qna-v-meta a:hover{color:var(--pink-strong,#e73582)}
#bn-qna .qna-v-meta i{margin-right:3px}

#bn-qna .qna-v-body{background:var(--surface,#fff);border:1px solid var(--line,#f1d7e2);border-radius:var(--radius-md,16px);
  padding:26px 28px;box-shadow:var(--shadow,0 12px 32px rgba(231,53,130,.10))}
#bn-qna .qna-v-img{margin-bottom:18px}
#bn-qna .qna-v-img img{max-width:100%;height:auto;border-radius:10px}
#bn-qna .qna-v-con{font-size:16px;line-height:1.8;color:var(--text-soft,#51464d);
  word-break:break-word;white-space:normal}
#bn-qna .qna-v-con img{max-width:100%;height:auto;border-radius:8px}
#bn-qna .qna-v-sign{margin-top:16px;font-size:13px;color:var(--muted,#8a7b84)}

/* 추천/비추천 */
#bn-qna .qna-v-act{display:flex;gap:12px;justify-content:center;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line,#f1d7e2)}
#bn-qna .qna-v-act .bo_v_act_gng,#bn-qna .qna-v-act>span{display:inline-flex;align-items:center}
#bn-qna .qna-v-act a,#bn-qna .qna-v-act>span>span,#bn-qna .qna-v-act .bo_v_good,#bn-qna .qna-v-act .bo_v_nogood{
  display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:var(--radius-pill,999px);
  border:1px solid var(--pink-line,#f3c4d8);background:#fff;color:var(--pink-strong,#e73582);
  font-weight:700;font-size:14px;text-decoration:none}
#bn-qna .qna-v-act a:hover{background:var(--pink-soft,#ffe1ee);border-color:var(--pink,#ff4f9a)}
#bn-qna .qna-v-act .bo_v_nogood{color:var(--muted,#8a7b84);border-color:var(--line,#f1d7e2)}
#bn-qna .qna-v-act strong{color:var(--pink,#ff4f9a)}
#bn-qna #bo_v_act_good,#bn-qna #bo_v_act_nogood{display:block;width:100%;text-align:center;
  font-size:13px;color:var(--pink-strong,#e73582);margin-top:6px}

/* 첨부파일 */
#bn-qna .qna-v-file{margin-top:18px;background:#fff;border:1px solid var(--line,#f1d7e2);
  border-radius:12px;padding:16px 20px}
#bn-qna .qna-v-file h2{font-size:14px;font-weight:700;color:var(--text,#242124);margin:0 0 10px}
#bn-qna .qna-v-file ul{list-style:none;margin:0;padding:0}
#bn-qna .qna-v-file li{font-size:14px;padding:6px 0}
#bn-qna .qna-v-file a{color:var(--pink-strong,#e73582)}
#bn-qna .bo_v_file_cnt{font-size:12px;color:var(--muted,#8a7b84)}

/* 이전/다음글 */
#bn-qna .qna-v-nb{list-style:none;margin:22px 0 0;padding:0;border:1px solid var(--line,#f1d7e2);
  border-radius:12px;overflow:hidden}
#bn-qna .qna-v-nb li{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:14px}
#bn-qna .qna-v-nb li+li{border-top:1px solid var(--line,#f1d7e2)}
#bn-qna .qna-v-nb .nb_tit{color:var(--muted,#8a7b84);font-size:12px;white-space:nowrap;font-weight:700}
#bn-qna .qna-v-nb a{color:var(--text,#242124);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bn-qna .qna-v-nb a:hover{color:var(--pink-strong,#e73582)}

/* 하단 액션 */
#bn-qna .qna-v-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:24px 0 8px;position:relative;flex-wrap:wrap}
#bn-qna .qna-v-actions-main{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#bn-qna .qna-v-manage{position:relative}
#bn-qna .qna-v-manage .btn_more_opt{border:1px solid var(--line,#f1d7e2);background:#fff;
  color:var(--muted,#8a7b84);border-radius:12px;width:46px;height:46px;cursor:pointer}
#bn-qna .more_opt.is_view_btn{display:none;position:absolute;right:0;bottom:54px;z-index:20;
  background:#fff;border:1px solid var(--line,#f1d7e2);border-radius:12px;
  box-shadow:0 10px 28px rgba(231,53,130,.14);list-style:none;margin:0;padding:6px;min-width:130px}
#bn-qna .more_opt.is_view_btn li a{display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-radius:8px;font-size:14px;color:var(--text,#242124);text-decoration:none}
#bn-qna .more_opt.is_view_btn li a:hover{background:var(--pink-soft,#ffe1ee);color:var(--pink-strong,#e73582)}

/* =========================================================
   COMMENTS — 답변 · 이용자 반응
   ========================================================= */
#bn-qna .cmt_btn{display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  border:1px solid var(--line,#f1d7e2);background:#fff;border-radius:var(--radius-pill,999px);
  padding:10px 20px;font-size:14px;color:var(--text,#242124);cursor:pointer;font-weight:700}
#bn-qna .cmt_btn b{color:var(--pink-strong,#e73582)}
#bn-qna .cmt_btn:hover{border-color:var(--pink-line,#f3c4d8)}

#bn-qna #bo_vc{margin-top:18px}
#bn-qna .qna-comments-tit{font-size:18px;font-weight:800;color:var(--text,#242124);
  margin:0 0 16px;padding-left:12px;border-left:4px solid var(--pink,#ff4f9a)}

#bn-qna #bo_vc article{display:flex;gap:12px;background:#fff;border:1px solid var(--line,#f1d7e2);
  border-radius:12px;padding:16px 18px;margin-bottom:12px}
#bn-qna #bo_vc article .pf_img{display:none}
#bn-qna #bo_vc .cm_wrap{flex:1;min-width:0}
#bn-qna #bo_vc header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
#bn-qna #bo_vc header h2{font-size:14px;font-weight:700;color:var(--text,#242124);margin:0}
#bn-qna #bo_vc .bo_vc_hdinfo{font-size:12px;color:var(--muted,#8a7b84)}
#bn-qna #bo_vc .cmt_contents{font-size:15px;line-height:1.7;color:var(--text-soft,#51464d)}
#bn-qna #bo_vc .cmt_contents p{margin:0}

#bn-qna .bo_vl_opt{position:relative}
#bn-qna .btn_cm_opt{border:1px solid var(--line,#f1d7e2);background:#fff;color:var(--muted,#8a7b84);
  border-radius:8px;width:30px;height:30px;cursor:pointer}
#bn-qna .bo_vc_act{display:none;position:absolute;right:0;top:34px;z-index:15;list-style:none;
  margin:0;padding:6px;background:#fff;border:1px solid var(--line,#f1d7e2);border-radius:10px;
  box-shadow:0 8px 22px rgba(231,53,130,.14);min-width:90px}
#bn-qna .bo_vc_act li a{display:block;padding:8px 12px;border-radius:7px;font-size:13px;
  color:var(--text,#242124);text-decoration:none}
#bn-qna .bo_vc_act li a:hover{background:var(--pink-soft,#ffe1ee);color:var(--pink-strong,#e73582)}

#bn-qna #bo_vc_empty{text-align:center;padding:30px 0;color:var(--text-soft,#51464d)}
#bn-qna #bo_vc_empty p{margin:0;font-size:14px;line-height:1.7}

/* 답변 작성 폼 */
#bn-qna .qna-comment-w{margin-top:18px;background:#fff;border:1px solid var(--line,#f1d7e2);
  border-radius:12px;padding:18px 20px}
#bn-qna .qna-comment-w textarea{width:100%;border:1px solid var(--line,#f1d7e2);border-radius:10px;
  padding:12px 14px;font-size:15px;font-family:inherit;line-height:1.6;min-height:96px;resize:vertical}
#bn-qna .qna-comment-w textarea:focus{outline:0;border-color:var(--pink,#ff4f9a);
  box-shadow:0 0 0 3px rgba(255,79,154,.12)}
#bn-qna .qna-comment-w .bo_vc_w_wr{margin-top:12px}
#bn-qna .qna-comment-w .bo_vc_w_info{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
#bn-qna .qna-comment-w .frm_input{height:44px;border:1px solid var(--line,#f1d7e2);border-radius:10px;
  padding:0 14px;font-size:14px}
#bn-qna .qna-comment-w .frm_input:focus{outline:0;border-color:var(--pink,#ff4f9a)}
#bn-qna .qna-comment-w .btn_confirm{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#bn-qna .qna-comment-w .secret_cm{font-size:13px;color:var(--muted,#8a7b84)}
#bn-qna .qna-comment-w .btn_submit{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 22px;border:0;border-radius:14px;
  background:var(--grad,linear-gradient(135deg,#ff4f9a,#ff7a8a));color:#fff;font-weight:800;
  font-size:14px;cursor:pointer}
#bn-qna .qna-comment-w .btn_submit:hover{filter:brightness(1.05)}
#bn-qna .qna-comment-w #char_cnt{font-size:12px;color:var(--muted,#8a7b84);display:block;margin-bottom:4px}

/* ===== 모바일 ===== */
@media (max-width:768px){
  #bn-qna .qna-hero{padding:24px 20px;flex-direction:column;align-items:stretch;text-align:center}
  #bn-qna .qna-hero-tit{font-size:24px}
  #bn-qna .qna-cta{width:100%}
  #bn-qna .qna-feed{grid-template-columns:1fr}
  #bn-qna .qna-grid2{grid-template-columns:1fr}
  #bn-qna .qna-form{padding:20px 18px}
  #bn-qna .qna-v-tit{font-size:23px}
  #bn-qna .qna-v-body{padding:20px 18px}
  #bn-qna .qna-btns{flex-direction:column-reverse}
  #bn-qna .qna-btns .qna-cta,#bn-qna .qna-btns .qna-cancel{width:100%}
  #bn-qna .qna-v-actions-main{width:100%}
  #bn-qna .qna-v-actions-main .qna-cta,#bn-qna .qna-v-actions-main .qna-cancel{flex:1}
}