/**
 * 게시판·검색 SNS 카드 레이아웃 (반응형)
 */
#container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px 80px;
}

#bo_list,
#bo_v,
#bo_w,
#faq_wrap,
#qa_list {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--md-sys-color-surface-container, #1d211d);
  overflow: hidden;
  margin-top: 12px;
}

#bo_list .tbl_head01,
#bo_list .tbl_wrap {
  border: none;
}

#bo_list thead th {
  background: var(--md-sys-color-surface-container-high, #272b27) !important;
  color: var(--md-sys-color-on-surface-variant, #c2c8bd) !important;
  font-weight: 500;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

#bo_list tbody tr {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

#bo_list tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

#bo_list .td_subject a {
  font-size: 15px;
  line-height: 1.4;
}

.bo_fx {
  padding: 12px 0;
}

.btn_bo_user .btn,
#bo_list .btn_bo_sch {
  border-radius: 9999px !important;
}

@media (max-width: 767px) {
  #bo_list .tbl_head01 thead {
    display: none;
  }
  #bo_list tbody tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  #bo_list tbody td {
    display: block;
    border: none !important;
    padding: 2px 0 !important;
    text-align: left !important;
  }
  #bo_list .td_num,
  #bo_list .td_chk {
    display: none !important;
  }
  #bo_list .td_subject {
    font-weight: 600;
    margin-bottom: 4px;
  }
  #bo_list .td_name {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant, #8c9388);
  }
}

body:not(.sns-home-page) {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

body.sns-home-page #ft_wr {
  display: none;
}

body.sns-home-page #ft {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  text-align: center;
}

body.sns-home-page #ft_copy {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #8c9388);
}

/* —— 글 보기 (SNS 포스트) —— */
#bo_v {
  width: 100% !important;
  max-width: 680px;
  margin: 12px auto;
}

#bo_v header {
  padding: 16px 16px 0;
}

#bo_v_title .bo_v_tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  display: block;
  margin-top: 6px;
}

#bo_v_info {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#bo_v_info .profile_info {
  display: flex;
  gap: 12px;
  align-items: center;
}

#bo_v_info .pf_img img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

#bo_v_info .profile_info_ct {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant, #c2c8bd);
}

#bo_v_info .profile_info_ct strong {
  color: var(--md-sys-color-on-surface, #e2e3de);
  font-size: 15px;
}

#bo_v_atc {
  padding: 16px;
  font-size: 15px;
  line-height: 1.65;
}

#bo_v_atc img {
  max-width: 100%;
  border-radius: 12px;
  margin: 8px 0;
}

#bo_v_act {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#bo_v_act a,
#bo_v_act button {
  border-radius: 9999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

/* —— 댓글 —— */
#bo_vc {
  padding: 8px 12px 16px;
}

#bo_vc h2 {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 4px;
  margin: 0;
}

#bo_vc article {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--md-sys-color-surface-container-high, #272b27);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#bo_vc .cm_wrap {
  flex: 1;
  min-width: 0;
}

#bo_vc .member,
#bo_vc .guest {
  font-weight: 600;
  font-size: 14px;
}

#bo_vc .bo_vc_hdinfo {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant, #8c9388);
  margin-left: 8px;
}

#bo_vc .cmt_contents {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

#bo_vc_w {
  margin: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--md-sys-color-surface-container-high, #272b27);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#bo_vc_w textarea {
  border-radius: 12px !important;
  min-height: 72px;
  background: var(--md-sys-color-surface-container, #1d211d) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--md-sys-color-on-surface, #e2e3de) !important;
}

#bo_vc_w .btn_confirm button {
  border-radius: 9999px !important;
  background: var(--md-sys-color-primary, #9fd89f) !important;
  color: var(--md-sys-color-on-primary, #003910) !important;
}

/* —— 글쓰기 / 수정 —— */
#bo_w {
  max-width: 680px;
  margin: 12px auto;
  width: 100% !important;
}

#bo_w #fwrite {
  width: 100% !important;
  padding: 0;
}

#bo_w .write_div,
#bo_w .bo_w_tit,
#bo_w .bo_w_info {
  padding: 12px 16px;
}

#bo_w .frm_input,
#bo_w select,
#bo_w textarea#wr_content {
  width: 100% !important;
  box-sizing: border-box;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: var(--md-sys-color-surface-container-high, #272b27) !important;
  color: var(--md-sys-color-on-surface, #e2e3de) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
}

#bo_w #wr_subject {
  font-size: 18px !important;
  font-weight: 600;
}

#bo_w .write_div label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant, #c2c8bd);
  margin-bottom: 6px;
}

#bo_w .bo_w_option {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#bo_w .btn_confirm {
  display: flex;
  gap: 10px;
  padding: 16px;
}

#bo_w .btn_cancel {
  flex: 1;
  text-align: center;
  padding: 14px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  color: var(--md-sys-color-on-surface-variant, #c2c8bd) !important;
}

#bo_w .btn_submit {
  flex: 2;
  padding: 14px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  background: var(--md-sys-color-primary, #9fd89f) !important;
  color: var(--md-sys-color-on-primary, #003910) !important;
  border: none !important;
}

#bo_w .file_wr {
  margin: 8px 16px;
  padding: 12px;
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-high, #272b27);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}