@charset "utf-8";
/* ==========================================================================
   우리의집 테마 — 게시판 (목록 3종 · 읽기 · 댓글 · 쓰기)
   ========================================================================== */

/* ============================================================== 보드 헤더 */
.oh-bo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oh-sp-4);
  padding: var(--oh-sp-7) 0 var(--oh-sp-5);
}
.oh-bo-head__title h2 { font-size: var(--oh-fs-24); letter-spacing: -.03em; }
.oh-bo-head__title p { margin-top: var(--oh-sp-2); font-size: var(--oh-fs-13); }
.oh-bo-head__act { display: flex; gap: var(--oh-sp-2); flex: 0 0 auto; }

/* 게시판 제목이 페이지 타이틀과 중복되므로 코어 타이틀은 숨긴다 */
.oh-main > .oh-container > .oh-page-title:has(+ #bo_list) { display: none; }

.oh-bo-cate { margin-bottom: var(--oh-sp-5); }
/* 코어가 <li><a> 로 뿌리는 카테고리 옵션을 칩으로 만든다 */
.oh-bo-cate .oh-chip-list a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: var(--oh-sp-4);
  border: 1px solid var(--oh-border-strong);
  border-radius: var(--oh-r-full);
  background: var(--oh-bg);
  font-size: var(--oh-fs-13);
  font-weight: var(--oh-fw-medium);
  color: var(--oh-text-2);
  white-space: nowrap;
}
.oh-bo-cate .oh-chip-list a:hover { border-color: var(--oh-text-3); color: var(--oh-text-1); }
.oh-bo-cate .oh-chip-list li.on a,
.oh-bo-cate .oh-chip-list a.on {
  background: var(--oh-text-1);
  border-color: var(--oh-text-1);
  color: var(--oh-bg);
}

.oh-bo-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oh-sp-4);
  padding: var(--oh-sp-3) var(--oh-sp-4);
  margin-bottom: var(--oh-sp-4);
  background: var(--oh-surface);
  border-radius: var(--oh-r-md);
}
.oh-bo-foot { margin-top: var(--oh-sp-6); }

/* ============================================================== 기본 목록 */
.oh-bolist { border-top: 1px solid var(--oh-border); }
.oh-bolist__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--oh-sp-3);
  padding-left: calc(var(--depth, 0) * 16px);
  border-bottom: 1px solid var(--oh-divider);
  transition: background var(--oh-t-fast);
}
.oh-bolist__item:hover { background: var(--oh-surface); }
.oh-bolist__item.is-notice { background: var(--oh-primary-weak); }
.oh-bolist__item.is-current { box-shadow: inset 3px 0 0 var(--oh-primary); }
.oh-bolist__chk { padding: var(--oh-sp-5) 0 0 var(--oh-sp-3); }

.oh-bolist__link {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-4);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--oh-sp-4) var(--oh-sp-2);
}
.oh-bolist__thumb {
  flex: 0 0 auto;
  width: 116px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--oh-r-md);
  background: var(--oh-skeleton);
}
.oh-bolist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oh-bolist__main { display: block; flex: 1 1 auto; min-width: 0; }
.oh-bolist__top { display: flex; flex-wrap: wrap; gap: var(--oh-sp-1); }
.oh-bolist__top:empty { display: none; }
.oh-bolist__subject {
  display: block;
  margin-top: var(--oh-sp-2);
  font-size: var(--oh-fs-16);
  font-weight: var(--oh-fw-semibold);
  line-height: var(--oh-lh-tight);
  color: var(--oh-text-1);
}
.oh-bolist__cmt {
  display: inline-block;
  margin-left: var(--oh-sp-1);
  font-size: var(--oh-fs-13);
  font-weight: var(--oh-fw-bold);
  font-style: normal;
  color: var(--oh-primary);
}
.oh-bolist__excerpt {
  display: block;
  margin-top: var(--oh-sp-2);
  font-size: var(--oh-fs-13);
  color: var(--oh-text-2);
}
.oh-bolist .oh-card__meta { margin-top: var(--oh-sp-3); }

@media (max-width: 767px) {
  .oh-bolist__link { gap: var(--oh-sp-3); padding: var(--oh-sp-4) 0; }
  .oh-bolist__thumb { width: 88px; }
  .oh-bolist__subject { font-size: var(--oh-fs-14); }
  .oh-bolist__excerpt { display: none; }
}

/* ============================================================== 카드 피드 */
.oh-feed__item { position: relative; min-width: 0; }
.oh-feed__item.is-notice .oh-card__title::before {
  content: '공지';
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  border-radius: var(--oh-r-xs);
  background: var(--oh-primary-weak);
  color: var(--oh-primary-hover);
  font-size: var(--oh-fs-11);
  font-weight: var(--oh-fw-bold);
}
.oh-feed__chk {
  position: absolute;
  top: var(--oh-sp-2);
  left: var(--oh-sp-2);
  z-index: 2;
  padding: 4px;
  border-radius: var(--oh-r-sm);
  background: var(--oh-elevated);
}

/* ============================================================== QnA */
.oh-qna { border-top: 2px solid var(--oh-text-1); }
.oh-qna__item {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-4);
  padding: var(--oh-sp-5) var(--oh-sp-2);
  border-bottom: 1px solid var(--oh-divider);
}
.oh-qna__item:hover { background: var(--oh-surface); }
.oh-qna__state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 28px;
  border: 1px solid var(--oh-border-strong);
  border-radius: var(--oh-r-full);
  font-size: var(--oh-fs-12);
  font-weight: var(--oh-fw-semibold);
  color: var(--oh-text-3);
}
.oh-qna__state.is-done {
  border-color: var(--oh-primary);
  background: var(--oh-primary-weak);
  color: var(--oh-primary-hover);
}
.oh-qna__body { flex: 1 1 auto; min-width: 0; }
.oh-qna__subject { font-size: var(--oh-fs-16); font-weight: var(--oh-fw-semibold); color: var(--oh-text-1); }
.oh-qna__excerpt { margin-top: var(--oh-sp-2); font-size: var(--oh-fs-13); color: var(--oh-text-2); }
.oh-qna__cnt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  font-size: var(--oh-fs-11);
  color: var(--oh-text-3);
}
.oh-qna__cnt strong { font-size: var(--oh-fs-18); color: var(--oh-text-1); }
@media (max-width: 767px) {
  .oh-qna__item { gap: var(--oh-sp-3); padding-inline: 0; }
  .oh-qna__state { width: 62px; height: 24px; font-size: var(--oh-fs-11); }
  .oh-qna__subject { font-size: var(--oh-fs-14); }
  .oh-qna__excerpt { display: none; }
}

/* ============================================================== 검색 오버레이 */
.oh-bo-sch { position: fixed; inset: 0; z-index: var(--oh-z-modal); }
.oh-bo-sch[hidden] { display: none; }
.oh-bo-sch__dim { position: absolute; inset: 0; background: var(--oh-overlay); }
.oh-bo-sch__box {
  position: absolute;
  left: 50%; top: 20%;
  translate: -50% 0;
  width: min(620px, 92vw);
  padding: var(--oh-sp-6);
  background: var(--oh-elevated);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-shadow-3);
}
.oh-bo-sch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--oh-sp-4);
}
.oh-bo-sch__head h3 { font-size: var(--oh-fs-18); }

/* ============================================================== 읽기 */
.oh-view { padding-top: var(--oh-sp-6); }
.oh-view__main { max-width: 780px; margin-inline: auto; }
.oh-view__head { padding-bottom: var(--oh-sp-5); border-bottom: 1px solid var(--oh-border); }
.oh-view__title {
  margin-top: var(--oh-sp-3);
  font-size: var(--oh-fs-30);
  line-height: var(--oh-lh-tight);
  letter-spacing: -.03em;
}
.oh-view__byline {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-3);
  margin-top: var(--oh-sp-5);
}
.oh-view__byline-txt { flex: 1 1 auto; min-width: 0; }
.oh-view__byline-txt strong { font-size: var(--oh-fs-14); }
.oh-view__byline-txt p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oh-sp-3);
  margin-top: 2px;
  font-size: var(--oh-fs-12);
}
.oh-view__byline-txt p span,
.oh-view__byline-txt p a { display: inline-flex; align-items: center; gap: 3px; }
.oh-view__tools { display: flex; gap: var(--oh-sp-2); flex: 0 0 auto; }

.oh-menu { position: relative; }
.oh-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: none;
  min-width: 150px;
  padding: var(--oh-sp-2);
  background: var(--oh-elevated);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-md);
  box-shadow: var(--oh-shadow-2);
}
.oh-menu__list a {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-2);
  padding: var(--oh-sp-2) var(--oh-sp-3);
  border-radius: var(--oh-r-sm);
  font-size: var(--oh-fs-14);
  white-space: nowrap;
}
.oh-menu__list a:hover { background: var(--oh-surface); }

.oh-view__body { padding-block: var(--oh-sp-7); }
.oh-view__imgs { display: grid; gap: var(--oh-sp-3); margin-bottom: var(--oh-sp-6); }
.oh-view__imgs img { width: 100%; height: auto; border-radius: var(--oh-r-md); }
.oh-view__con {
  font-size: var(--oh-fs-16);
  line-height: 1.85;
  color: var(--oh-text-1);
  word-break: break-word;
}
.oh-view__con img { height: auto; border-radius: var(--oh-r-md); margin-block: var(--oh-sp-4); }
.oh-view__con p { margin-block: var(--oh-sp-4); }
.oh-view__con a { color: var(--oh-primary-hover); text-decoration: underline; }
.oh-view__con blockquote {
  margin: var(--oh-sp-5) 0;
  padding: var(--oh-sp-4) var(--oh-sp-5);
  border-left: 3px solid var(--oh-primary);
  background: var(--oh-surface);
  border-radius: 0 var(--oh-r-md) var(--oh-r-md) 0;
}
.oh-view__con table { margin-block: var(--oh-sp-4); font-size: var(--oh-fs-14); }
.oh-view__con th, .oh-view__con td { padding: var(--oh-sp-2) var(--oh-sp-3); border: 1px solid var(--oh-border); }
.oh-view__sign { margin-top: var(--oh-sp-6); padding-top: var(--oh-sp-4); border-top: 1px dashed var(--oh-border); font-size: var(--oh-fs-13); color: var(--oh-text-3); }

.oh-view__files, .oh-view__links { margin-bottom: var(--oh-sp-4); }
.oh-view__files li + li, .oh-view__links li + li { margin-top: var(--oh-sp-2); }
.oh-view__files a, .oh-view__links a {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-2);
  font-size: var(--oh-fs-14);
}
.oh-view__files strong, .oh-view__links strong { font-weight: var(--oh-fw-medium); }

.oh-view__flash {
  display: none;
  padding: var(--oh-sp-2) var(--oh-sp-3);
  border-radius: var(--oh-r-sm);
  background: var(--oh-text-1);
  color: var(--oh-bg);
  font-size: var(--oh-fs-12);
}
.oh-view__sns { display: flex; align-items: center; gap: var(--oh-sp-2); }
.oh-view__sns a { display: inline-flex; }

.oh-view__nb {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oh-sp-3);
  margin-top: var(--oh-sp-7);
}
.oh-view__nb-item {
  display: block;
  padding: var(--oh-sp-4);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-md);
}
.oh-view__nb-item:hover { border-color: var(--oh-primary); }
.oh-view__nb-lb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--oh-fs-12);
  color: var(--oh-text-3);
}
.oh-view__nb-tit { display: block; margin-block: var(--oh-sp-2) 4px; font-size: var(--oh-fs-14); font-weight: var(--oh-fw-medium); }
.oh-view__foot { margin-top: var(--oh-sp-6); }

@media (max-width: 767px) {
  .oh-view__title { font-size: var(--oh-fs-20); }
  .oh-view__con { font-size: var(--oh-fs-15); }
  .oh-view__nb { grid-template-columns: 1fr; }
}

/* ---- 피드형 읽기: 넓은 화면에서 좌 사진 + 우 정보 ---- */
@media (min-width: 1024px) {
  .oh-view--feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--oh-sp-8);
    align-items: start;
    max-width: 1440px;
  }
  .oh-view--feed .oh-view__gallery { position: sticky; top: calc(var(--oh-header-h) + var(--oh-gnb-h) + 24px); }
  .oh-view--feed .oh-view__main { max-width: none; margin: 0; }
}
.oh-view__gallery { display: grid; gap: var(--oh-sp-3); }
.oh-view__gallery img { width: 100%; height: auto; border-radius: var(--oh-r-lg); }

/* ============================================================== 댓글 */
.oh-cmt { margin-top: var(--oh-sp-9); padding-top: var(--oh-sp-6); border-top: 1px solid var(--oh-border); }
.oh-cmt__title { font-size: var(--oh-fs-18); }
.oh-cmt__title strong { color: var(--oh-primary); }
.oh-cmt__empty {
  display: grid;
  place-items: center;
  gap: var(--oh-sp-2);
  padding: var(--oh-sp-9) 0;
  color: var(--oh-text-3);
  font-size: var(--oh-fs-14);
}
.oh-cmt__list { margin-top: var(--oh-sp-4); }
.oh-cmt__item {
  display: flex;
  gap: var(--oh-sp-3);
  padding: var(--oh-sp-4) 0;
  margin-left: calc(var(--depth, 0) * 28px);
  border-top: 1px solid var(--oh-divider);
}
.oh-cmt__item.is-reply { position: relative; }
.oh-cmt__item.is-reply::before {
  content: '';
  position: absolute;
  left: -16px; top: 24px;
  width: 10px; height: 10px;
  border-left: 1.5px solid var(--oh-border-strong);
  border-bottom: 1.5px solid var(--oh-border-strong);
  border-bottom-left-radius: 3px;
}
.oh-cmt__item.is-best {
  padding: var(--oh-sp-4);
  border: 1px solid var(--oh-primary);
  border-radius: var(--oh-r-md);
  background: var(--oh-primary-weak);
}
.oh-cmt__body { flex: 1 1 auto; min-width: 0; }
.oh-cmt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oh-sp-2);
  font-size: var(--oh-fs-12);
  color: var(--oh-text-3);
}
.oh-cmt__meta strong { font-size: var(--oh-fs-13); color: var(--oh-text-1); }
.oh-cmt__text {
  margin-top: var(--oh-sp-2);
  font-size: var(--oh-fs-14);
  line-height: var(--oh-lh-loose);
  color: var(--oh-text-1);
  word-break: break-word;
}
.oh-cmt__act { display: flex; gap: var(--oh-sp-3); margin-top: var(--oh-sp-2); font-size: var(--oh-fs-12); }
.oh-cmt__act a { color: var(--oh-text-3); }
.oh-cmt__act a:hover { color: var(--oh-primary); }

/* 댓글 쓰기 */
.oh-cmtw {
  margin-top: var(--oh-sp-5);
  padding: var(--oh-sp-4);
  background: var(--oh-surface);
  border-radius: var(--oh-r-lg);
}
.oh-cmtw__box { position: relative; }
.oh-cmtw__ta { min-height: 96px; background: var(--oh-bg); }
.oh-cmtw__count {
  position: absolute;
  right: var(--oh-sp-3);
  bottom: var(--oh-sp-3);
  font-size: var(--oh-fs-11);
  font-weight: var(--oh-fw-medium);
  color: var(--oh-text-3);
}
.oh-cmtw__guest { display: flex; gap: var(--oh-sp-2); margin-top: var(--oh-sp-3); }
.oh-cmtw__guest .oh-input { max-width: 200px; }
.oh-cmtw__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oh-sp-3);
  margin-top: var(--oh-sp-3);
}
/* 답글/수정 폼이 들어갈 자리 */
span.bo_vc_w { display: none; }
span.bo_vc_w .oh-cmtw { margin-top: var(--oh-sp-3); }

@media (max-width: 767px) {
  .oh-cmtw__guest { flex-direction: column; }
  .oh-cmtw__guest .oh-input { max-width: none; }
}

/* ============================================================== 글쓰기 */
.oh-write { max-width: 900px; padding-top: var(--oh-sp-6); }
.oh-write__title { padding-bottom: var(--oh-sp-5); font-size: var(--oh-fs-24); }
.oh-write__panel + .oh-write__panel { margin-top: var(--oh-sp-4); }
.oh-write__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--oh-sp-4); }
.oh-write__opts { margin-bottom: 0; }
.oh-write__editor textarea,
.oh-write__editor .cke,
.oh-write__editor .note-editor { width: 100% !important; }
.oh-write__editor textarea {
  min-height: 320px;
  padding: var(--oh-sp-4);
  border: 1px solid var(--oh-border-strong);
  border-radius: var(--oh-r-sm);
  background: var(--oh-bg);
  color: var(--oh-text-1);
  font-family: var(--oh-font-sans);
  font-size: var(--oh-fs-15);
  line-height: var(--oh-lh-loose);
}
.oh-write__files { display: grid; gap: var(--oh-sp-3); margin-top: var(--oh-sp-4); }
.oh-write__file { display: grid; gap: var(--oh-sp-2); }
.oh-file { padding: var(--oh-sp-2) var(--oh-sp-3); min-height: 44px; }
.oh-write__foot { margin-top: var(--oh-sp-6); }
.oh-autosave {
  display: none;
  margin-top: var(--oh-sp-3);
  padding: var(--oh-sp-4);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-md);
  background: var(--oh-elevated);
}
.oh-autosave ul { margin-block: var(--oh-sp-3); }
.oh-autosave li { padding: var(--oh-sp-2) 0; border-bottom: 1px solid var(--oh-divider); font-size: var(--oh-fs-13); }
@media (max-width: 767px) { .oh-write__grid { grid-template-columns: 1fr; } }

/* ============================================================== 코어 잔재 정리 */
#bo_list .tbl_head01, #bo_v .tbl_head01 { font-size: var(--oh-fs-14); }
.cke_top, .cke_bottom { background: var(--oh-surface) !important; }
[data-theme="dark"] .cke_contents,
[data-theme="dark"] .note-editable { background: var(--oh-bg) !important; color: var(--oh-text-1) !important; }