/* 온지 게시판(FluxBoard) — 공지사항 · 매거진 · 이벤트. onji.css 토큰만 쓴다. */

/* 페이지 머리 */
.board-hero{ background:var(--bg-soft); border-bottom:1px solid var(--brand-line); padding:var(--sp-16) 0 var(--sp-12); }
.board-hero__title{ font-size:32px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.board-hero__lead{ margin-top:var(--sp-3); font-size:16px; color:var(--text-sub); line-height:1.7; max-width:640px; }
.board-wrap{ padding:var(--sp-12) 0 var(--sp-20); }

.ob{ max-width:960px; margin:0 auto; }
.ob--card{ max-width:none; }

/* 검색·건수 줄 */
.ob__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding-bottom:var(--sp-4); border-bottom:2px solid var(--brand); }
.ob__count{ font-size:14px; color:var(--text-sub); }
.ob__count b{ color:var(--brand); font-weight:700; font-variant-numeric:tabular-nums; }
.ob__search form{ display:flex; gap:var(--sp-2); }
.ob__search input[type="text"],
.ob__search input[type="search"]{
	min-height:44px; padding:0 var(--sp-4); border:1px solid var(--line); border-radius:var(--r-full);
	font-size:14px; background:var(--bg); min-width:0; width:200px;
}
.ob__search input[type="text"]:focus,
.ob__search input[type="search"]:focus{ border-color:var(--brand); outline:none; }
.ob__search button,
.ob__search input[type="submit"]{
	min-height:44px; padding:0 var(--sp-6); border-radius:var(--r-full);
	background:var(--brand); color:var(--text-inv); font-size:14px; font-weight:600; transition:background var(--transition);
}
.ob__search button:hover,
.ob__search input[type="submit"]:hover{ background:var(--brand-deep); }

/* 목록형(공지사항) */
.ob-rows{ border-bottom:1px solid var(--line); }
.ob-row{ display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:var(--sp-4); min-height:64px; padding:var(--sp-3) var(--sp-2); border-top:1px solid var(--line); transition:background var(--transition); }
.ob-row:first-child{ border-top:0; }
.ob-row:hover{ background:var(--bg-soft); }
.ob-row__no{ font-size:14px; color:var(--text-dim); text-align:center; font-variant-numeric:tabular-nums; }
.ob-row__title{ font-size:16px; font-weight:500; line-height:1.5; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-row__title:hover{ color:var(--brand); }
.ob-row__date{ font-size:13px; color:var(--text-sub); font-variant-numeric:tabular-nums; }
.ob-row--pin{ background:var(--bg-soft); }
.ob-row--pin .ob-row__title{ font-weight:700; }
.ob-pin{ font-style:normal; display:inline-block; padding:2px var(--sp-2); border-radius:var(--r-sm); background:var(--brand); color:var(--text-inv); font-size:12px; font-weight:700; }
.ob-new{ font-style:normal; display:inline-block; margin-left:var(--sp-2); padding:1px 6px; border-radius:var(--r-sm); background:var(--gold); color:var(--text-inv); font-size:11px; font-weight:700; vertical-align:middle; }

/* 카드형(매거진·이벤트) */
.ob-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-12) var(--sp-6); }
.ob-card__link{ display:flex; flex-direction:column; gap:var(--sp-4); height:100%; }
.ob-card__media{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--r-md); background:var(--bg-soft); }
.ob-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ob-card__link:hover .ob-card__media img{ transform:scale(1.03); }
.ob-card__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--brand-tint); color:var(--brand-line); font-size:28px; font-weight:700; letter-spacing:.3em; }
.ob-card__body{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ob-card__date{ font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.ob-card__title{ font-size:18px; font-weight:700; line-height:1.4; color:var(--text); }
.ob-card__link:hover .ob-card__title{ color:var(--brand); }
.ob-card__excerpt{ font-size:14px; line-height:1.7; color:var(--text-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 첫 글은 두 칸 폭 가로 배치로 키운다 */
.ob-card--lead{ grid-column:1 / -1; }
.ob-card--lead .ob-card__link{ flex-direction:row; align-items:center; gap:var(--sp-8); }
.ob-card--lead .ob-card__media{ flex:0 0 58%; aspect-ratio:16 / 10; }
.ob-card--lead .ob-card__title{ font-size:28px; line-height:1.3; }
.ob-card--lead .ob-card__excerpt{ font-size:15px; -webkit-line-clamp:4; }

/* 빈 상태 */
.ob-empty{ padding:var(--sp-16) var(--sp-6); text-align:center; border:1px dashed var(--brand-line); border-radius:var(--r-lg); background:var(--bg-soft); }
.ob-empty__title{ font-size:18px; font-weight:700; }
.ob-empty__text{ margin:var(--sp-2) 0 var(--sp-6); font-size:14px; color:var(--text-sub); }

.ob__foot{ display:flex; justify-content:flex-end; margin-top:var(--sp-6); }

/* 상세 */
.ob-post{ border-top:2px solid var(--brand); }
.ob-post__head{ padding:var(--sp-8) 0 var(--sp-6); border-bottom:1px solid var(--line); }
.ob-post__board{ font-size:13px; font-weight:700; color:var(--gold); letter-spacing:.04em; }
.ob-post__title{ margin-top:var(--sp-2); font-size:28px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.ob-post__meta{ margin-top:var(--sp-3); font-size:14px; color:var(--text-sub); font-variant-numeric:tabular-nums; }
.ob-post__body{ padding:var(--sp-8) 0 var(--sp-12); font-size:16px; line-height:1.9; color:var(--text); border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.ob-post__body p+p{ margin-top:var(--sp-4); }
.ob-post__body img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:var(--sp-4) 0; }
.ob-post__body a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

/* FluxBoard 기본 부품(이전/다음글·페이지네이션·액션)을 온지 톤으로 */
.ob .fluxboard-pagination, .ob .fluxboard-post-nav{ margin-top:var(--sp-8); }
.ob .fluxboard-pagination a, .ob .fluxboard-pagination span{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-full); font-size:14px; }
.ob .fluxboard-pagination .current,
.ob .fluxboard-pagination .is-current{ background:var(--brand); color:var(--text-inv); }
.ob .fluxboard-post-nav a:hover{ color:var(--brand); }
.ob a:focus-visible, .ob button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

@media (max-width:1024px){
	.ob-cards{ grid-template-columns:repeat(2, 1fr); }
	.ob-card--lead .ob-card__link{ gap:var(--sp-6); }
	.ob-card--lead .ob-card__title{ font-size:24px; }
}
@media (max-width:768px){
	.board-hero{ padding:var(--sp-12) 0 var(--sp-8); }
	.board-hero__title{ font-size:26px; }
	.board-wrap{ padding:var(--sp-8) 0 var(--sp-16); }
	.ob__bar{ flex-direction:column; align-items:stretch; }
	.ob__search input[type="text"], .ob__search input[type="search"]{ width:100%; flex:1; }
	.ob-row{ grid-template-columns:1fr auto; gap:var(--sp-1) var(--sp-3); }
	.ob-row__no{ display:none; }
	.ob-row--pin .ob-row__no{ display:block; grid-column:1 / -1; text-align:left; }
	.ob-row__title{ white-space:normal; }
	.ob-card--lead .ob-card__link{ flex-direction:column; align-items:stretch; }
	.ob-card--lead .ob-card__media{ flex:none; }
	.ob-post__title{ font-size:24px; }
}
@media (max-width:480px){
	.ob-cards{ grid-template-columns:1fr; gap:var(--sp-8); }
	.ob-card--lead .ob-card__title{ font-size:20px; }
	.ob-post__body{ font-size:15px; }
}

/* =====================================================================
   게시판 3종 디자인 보강 (2026-10-07, specs/2026-10-07-main-mobile-board-design)
   썸네일 비율은 PC·모바일 동일(일반 4:3, 첫 글 16:10) — 폭만 바뀐다.
   ===================================================================== */
.board-hero, .board-wrap{ word-break:keep-all; overflow-wrap:break-word; }
.board-hero__title, .ob-card__title, .ob-post__title{ text-wrap:balance; }

/* 머리 — 영문 eyebrow + 제목 + 금색 짧은 선, 가운데 정렬 */
.board-hero{ text-align:center; border-bottom:0; }
.board-hero__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--gold); }
.board-hero__title{ margin-top:var(--sp-3); font-size:40px; letter-spacing:-.02em; }
.board-hero__title::after{
  content:''; display:block; width:32px; height:2px; margin:var(--sp-4) auto 0; background:var(--gold);
}
.board-hero__lead{ margin:var(--sp-4) auto 0; }

/* 목록형 — 행 위계 */
.ob-row__title{ display:block; }
.ob-pin{ font-size:11px; }

/* 카드형 — 날짜·제목·요약 위계 */
.ob-card__date{ font-size:12px; letter-spacing:.04em; color:var(--text-sub); }
.ob-card__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ob-card--lead .ob-card__title{ -webkit-line-clamp:3; }

/* 상세 — 사진 바로 아래 캡션은 작은 회색 캡션으로 */
.ob-post__body p:has(> img) + p > em:only-child{
  display:block; margin-top:calc(var(--sp-3) * -1);
  font-size:12px; line-height:1.6; font-style:normal; color:var(--text-sub);
}

/* 상세 — 이전/다음·목록 (FluxBoard 기본 부품을 온지 톤으로) */
.ob-post__body{ border-bottom:0; }
.ob .fluxboard-board-view__nav{
  margin-top:var(--sp-8); border:0; border-radius:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.ob .fluxboard-board-view__nav-row{ gap:var(--sp-4); min-height:56px; padding:0 var(--sp-2); border-bottom-color:var(--line); }
.ob .fluxboard-board-view__nav-label{ font-size:13px; color:var(--text-sub); }
.ob .fluxboard-board-view__nav-link{
  flex:1; min-width:0; display:block; padding:var(--sp-3) 0;
  font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ob .fluxboard-board-view__nav-link:hover{ color:var(--brand); text-decoration:none; }
.ob .fluxboard-board-view__footer{ justify-content:center; gap:var(--sp-2); padding:var(--sp-8) 0 0; }
.ob .fluxboard-board-view__footer-right:empty{ display:none; }
.ob .fluxboard-board-view__list-btn{
  position:relative; min-height:40px; padding:0 var(--sp-8);
  border:1px solid var(--brand); border-radius:var(--r-full);
  background:var(--bg); color:var(--brand); font-size:14px; font-weight:700; font-family:inherit;
}
.ob .fluxboard-board-view__list-btn::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);
}
.ob .fluxboard-board-view__list-btn:hover{ background:var(--brand); color:var(--text-inv); border-color:var(--brand); }

@media (max-width:768px){
  .board-hero{ padding:var(--sp-12) 0 var(--sp-8); }
  .board-hero__title{ font-size:28px; }
  .board-hero__title::after{ margin-top:var(--sp-3); }
  .board-hero__lead{ font-size:14px; }

  /* 검색 — 버튼은 작게, 터치 영역 44px 유지 */
  .ob__search input[type="text"],
  .ob__search input[type="search"]{ min-height:40px; }
  .ob__search button,
  .ob__search input[type="submit"]{ position:relative; min-height:40px; padding:0 var(--sp-4); }
  .ob__search button::after{ content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }

  /* 공지 — 제목 아래 날짜 */
  .ob-row{ grid-template-columns:1fr; gap:var(--sp-1); min-height:64px; padding:var(--sp-4) var(--sp-1); }
  .ob-row--pin .ob-row__no{ grid-column:auto; }
  .ob-row__title{ font-size:15px; }
  .ob-row__date{ font-size:12px; }

  .ob-post__head{ padding:var(--sp-6) 0 var(--sp-4); }
  .ob .fluxboard-board-view__nav-row{ padding:0; }
  .ob .fluxboard-board-view__nav-link{ font-size:14px; }
}

/* 좁은 화면 — 첫 글만 큰 카드, 나머지는 썸네일(4:3 그대로) + 글 가로 배치 */
@media (max-width:600px){
  .ob-cards{ grid-template-columns:1fr; gap:var(--sp-6); }
  .ob-card:not(.ob-card--lead) .ob-card__link{ flex-direction:row; align-items:flex-start; gap:var(--sp-4); }
  .ob-card:not(.ob-card--lead) .ob-card__media{ flex:0 0 40%; aspect-ratio:4 / 3; border-radius:var(--r-sm); }
  .ob-card:not(.ob-card--lead) .ob-card__body{ flex:1; min-width:0; gap:var(--sp-1); }
  .ob-card:not(.ob-card--lead) .ob-card__title{ font-size:15px; line-height:1.45; }
  .ob-card:not(.ob-card--lead) .ob-card__excerpt{ font-size:13px; line-height:1.6; }
  .ob-card--lead .ob-card__title{ font-size:20px; }
  .ob-card--lead + .ob-card{ padding-top:var(--sp-6); border-top:1px solid var(--line); }
}