/* ============================================================================
   board.css — 파트너 요청 게시판(시안 1d) · 문의 답장(시안 2f) 전용
   2026-09-15 4차 리뉴얼("당근형") 2단계

   쓰는 화면
     partners.php          1d 파트너 요청 목록 · 필터
     partner-request.php   1d 요청 글 쓰기 · 수정 · 상세 + 이 요청에 문의하기
     my-inquiries.php      2f 받은 문의 · 보낸 문의 · 답장

   원칙
     공통 부품(.btn .card .chip .empty .field .note .pager .tabs)은 styles.css 것을 그대로 쓴다.
     여기에는 **이 화면들에만 있는 것**만 둔다. 부품을 다시 정의하지 않는다.
     ⚠️ 그림자 금지(모달·챗봇 전용) · 12px 미만 글자 금지 · 3차 토큰(--accent/--paper/--sand) 금지.
     ⚠️ transition 을 부품마다 따로 적지 않는다(styles.css 의 공통 규칙이 이미 건다).
     ⚠️ 면 호버는 @media (hover: hover) 안에서만 — 바탕 var(--surface) + 테두리 var(--line) 한 단계.

   불러오는 순서: styles.css → pages.css → apps.css(1d 껍데기) → **board.css**
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   §1. 1d 목록 — 필터 줄 + 요청 카드
   ════════════════════════════════════════════════════════════════════════════ */

/* 필터 칩 줄과 '＋ 요청 글 쓰기' 를 한 줄에. 좁아지면 버튼이 아래로 내려가 전폭이 된다. */
.pr-filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
/* 칩 줄은 **두 열을 가로지르는 첫 줄**이다.
   왼쪽 열(.ap-main) 안에 넣어 두면 왼쪽 카드만 칩 높이(48px)만큼 내려가서,
   오른쪽 '나와 맞는 업체' 카드와 윗변이 어긋난다(2026-09-17 사장님 지적).
   행 간격은 .ap-cols 의 gap(24px)이 준다 — margin-bottom 은 0 으로 되돌린다.
   정책자금(funding.php)도 필터를 두 열 위에 두는 같은 짜임이다. */
.ap-cols > .pr-filterbar { grid-column: 1 / -1; margin-bottom: 0; }
.pr-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pr-writebtn { flex: none; }

.pr-list { display: flex; flex-direction: column; gap: var(--gap-card); }

/* 요청 카드 — 시안 실측: padding 18 · 1px --line-2 · r16 · 흰 바탕 */
.pr-card { display: block; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); }
/* 마감형은 회색으로 눌러 놓고 제목만 남기는 축약형(본문·버튼·분야칩 없음) */
.pr-card--closed { background: var(--surface-2); }
/* 마감 카드는 안에 버튼이 없어 카드 전체가 링크다 → 면 호버를 건다 */
a.pr-card { color: inherit; text-decoration: none; }
@media (hover: hover) { a.pr-card:hover { border-color: var(--line); background: var(--surface); } }

.pr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-meta { font: 600 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }

.pr-title { margin-top: 11px; font: 800 var(--fs-h4) / var(--lh-title) var(--font); letter-spacing: var(--ls-title); word-break: keep-all; }
.pr-title a { color: inherit; text-decoration: none; }
/* 마우스가 있는 기기에서만 — 터치에서는 한 번 누르면 풀리지 않는다 */
@media (hover: hover) {
  .pr-title a:hover { text-decoration: underline; }
}
.pr-card--closed .pr-title { font-weight: 700; color: var(--ink-3); }

.pr-body { margin-top: 7px; font: 400 var(--fs-sm) / var(--lh-body) var(--font); color: var(--ink-2); word-break: keep-all; }
.pr-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* 시안 실측 38 — 인라인 style 로 주면 768 이하 '버튼 최소 44' 규칙을 이겨버려서 클래스로 둔다 */
.pr-actions > .btn { --btn-h: 38px; }
.pr-count { font: 500 var(--fs-xs) / 1.4 var(--font); color: var(--ink-3); }


/* ════════════════════════════════════════════════════════════════════════════
   §2. 1d 상세 — 글 한 장 + 작성자 조작 + 문의 블록
   ════════════════════════════════════════════════════════════════════════════ */

.pr-detail__title { margin-top: 12px; font: 800 var(--fs-h1-sm) / var(--lh-title) var(--font); letter-spacing: var(--ls-title); word-break: keep-all; }
.pr-detail__body { margin-top: 14px; font: 400 var(--fs-md) / var(--lh-body) var(--font); color: var(--ink); white-space: pre-line; word-break: keep-all; }
.pr-detail__stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-3); }
.pr-owner { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* 작성자가 보는 '이 요청에 온 문의' 요약 줄 */
.pr-own-inq { margin-top: 12px; }

/* 본문 글자 수 안내 */
.pr-form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.pr-form textarea { min-height: 180px; }


/* ════════════════════════════════════════════════════════════════════════════
   §3. 2f 답장 — 받은 문의 카드 안의 답장 실타래 + 답장 폼
   ════════════════════════════════════════════════════════════════════════════ */

/* 주고받은 답장 — 문의 본문 아래에 들여쓴 실타래로 쌓인다 */
.inq-thread { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.inq-reply-item__meta { font: 600 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); }
.inq-reply-item__body { margin-top: 5px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-2); white-space: pre-line; word-break: keep-all; }

/* 답장 쓰기 — <details> 를 버튼처럼 연다(JS 없이 동작).
   시안 2f 는 버튼이 한 줄이라 .inq-actions 안에 넣고, 펼쳐지면 그 줄을 통째로 차지한다. */
.inq-actions > .inq-write[open] { flex: 1 0 100%; }
.inq-write > summary { display: inline-flex; width: auto; list-style: none; cursor: pointer; }
.inq-write > summary::-webkit-details-marker { display: none; }
.inq-write[open] > summary { display: none; }
.inq-write__form { margin-top: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--card); }
.inq-write__form textarea { min-height: 96px; }
.inq-write__row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 받은 문의 / 보낸 문의 전환 — 카드 안쪽 기능 전환이라 세그먼트를 쓴다 */
.inq-box { margin-bottom: 14px; }
.inq-box .seg__item { text-decoration: none; }

/* 문의 한 건이 어느 파트너 요청에서 왔는지 */
.inq-from { margin-top: 8px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); }
.inq-from a { color: var(--carrot-ink); font-weight: 700; }


/* ════════════════════════════════════════════════════════════════════════════
   §4. 반응형
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 시안 제안: 필터 줄은 가로 스크롤, '＋ 요청 글 쓰기' 는 줄에서 빼서 전폭 버튼으로 */
  .pr-filterbar { flex-direction: column; align-items: stretch; }
  /* 가로 스크롤 금지 — 칩 3개라 줄바꿈으로 충분하다 */
  .pr-chips { flex-wrap: wrap; }
  .pr-chips > * { flex: none; }
  /* 칩 줄에서 빠져나와 단독 CTA 가 되므로 최소 44 로 올린다(.btn--xs 34 를 덮는다) */
  .pr-writebtn { width: 100%; --btn-h: 44px; }
  /* 요청 글 제목 — 글 상세로 들어가는 링크인데 글자 높이(19px)가 그대로 누르는 칸이었다.
     제목은 두 줄이 될 수 있어 높이를 못 박지 않고, 위아래 여백만 넉넉히 준다(2026-09-17 모바일 점검). */
  .pr-title a { display: inline-block; padding: 6px 0; }

  .pr-owner { margin-left: 0; width: 100%; }
  .pr-owner > .btn { flex: 1; }

  /* 모바일 최소 44 — pages.css 의 .inq-actions .btn(40) 보다 뒤에 와서 이긴다 */
  .pr-actions > .btn,
  .inq-actions .btn,
  .inq-write__row .btn { --btn-h: 44px; }
}

@media (max-width: 420px) {
  .pr-card { padding: 14px; }
  .pr-title { font-size: var(--fs-md); }
  .pr-detail__title { font-size: var(--fs-h2); }
  .pr-actions > .btn { width: 100%; }
  .inq-write > summary { width: 100%; }
  .inq-write__row > .btn { flex: 1; }
}

/* 아직 안 본 답장 — 왼쪽에 주황 줄 하나로만 표시한다(글자를 덮지 않게). */
.inq-reply-item.is-fresh {
  border-left: 3px solid var(--carrot-ink);
  padding-left: 11px; margin-left: -14px;
}
.inq-reply-item__new { color: var(--carrot-ink); font-weight: 800; }


/* ════════════════════════════════════════════════════════════════════════════
   자유게시판 (board.php, 2026-10-08)
   머리글: 공지사항 · 우리 매장 홍보 · 자유 소통 · 이벤트 · 나눔 · 양도 — 칩 색은 includes/board.php BD_CAT_CHIP
   ════════════════════════════════════════════════════════════════════════════ */
.bd-flash { margin-bottom: 14px; }
.bd-bar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.bd-write { flex: none; gap: 6px; }
.bd-search { margin-bottom: 14px; }

/* 목록 — 한 줄에 머리글 · 제목 · 댓글 수, 아래에 쓴 사람 · 때 · 조회 */
.bd-list { border-top: 1px solid var(--line-2); }
.bd-row { border-bottom: 1px solid var(--line-2); }
.bd-row__a { display: flex; flex-direction: column; gap: 5px; padding: 14px 6px; color: var(--ink); }
.bd-row__a:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: -2px; }
@media (hover: hover) { .bd-row__a:hover { background: var(--surface); } .bd-row__a:hover .bd-row__title { text-decoration: underline; text-underline-offset: 3px; } }
.bd-row--pin { background: var(--tint); }
.bd-row--pin .bd-row__title { font-weight: 800; }
.bd-row__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-row__top > .chip { flex: none; }
.bd-row__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-md) / 1.4 var(--font); }
.bd-row__cnt { flex: none; font: 800 var(--fs-xs) / 1 var(--font); color: var(--carrot-ink); }
.bd-row__pic { flex: none; display: inline-flex; color: var(--ink-4); }
.bd-row__meta { font: 400 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); overflow-wrap: anywhere; }
.bd-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.bd-pager__now { font: 600 var(--fs-xs) / 1 var(--font); color: var(--ink-3); }

/* 글쓰기 */
.bd-form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }   /* 위 「← 목록으로」 와 띄운다 */
.bd-form textarea[name=body] { min-height: 220px; }
.bd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-cat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  font: 500 var(--fs-xs) / 1.3 var(--font); color: var(--ink-2); cursor: pointer;
}
.bd-cat input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--carrot-ink); }
.bd-cat:has(input:checked) { border-color: var(--carrot-ink); background: var(--tint); color: var(--ink); font-weight: 700; }
@media (hover: hover) { .bd-cat:hover { border-color: var(--line-hover); } }
.bd-keep { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bd-keep__item { display: flex; flex-direction: column; gap: 4px; width: 96px; font: 500 var(--fs-meta) / 1.4 var(--font); color: var(--ink-2); cursor: pointer; }
.bd-keep__item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-btn); border: 1px solid var(--line-2); }
.bd-keep__item span { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.bd-msg { padding: 12px 14px; border-radius: var(--r-btn); background: var(--err-tint); font: 600 var(--fs-xs) / 1.6 var(--font); color: var(--danger); word-break: keep-all; }

/* 글 보기 */
.bd-post__head { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.bd-post__title { margin-top: 10px; font: 800 var(--fs-h2) / 1.4 var(--font); letter-spacing: var(--ls-title); word-break: keep-all; overflow-wrap: anywhere; }
.bd-post__meta { margin-top: 6px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); }
.bd-post__meta b { font-weight: 700; color: var(--ink-2); }
.bd-post__body { margin-top: 18px; font: 400 var(--fs-md) / 1.8 var(--font); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.bd-post__body a, .bd-c__body a { color: var(--carrot-ink); text-decoration: underline; word-break: break-all; }
.bd-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.bd-photo { display: block; aspect-ratio: 1; border-radius: var(--r-btn); overflow: hidden; background: var(--ph-a); cursor: zoom-in; }
.bd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-photo:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; }
.bd-post__own { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* 댓글 */
.bd-comments { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.bd-comments__h { font: 800 var(--fs-lg) / 1.4 var(--font); }
.bd-clist { margin-top: 10px; }
.bd-c { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.bd-c.is-hidden { opacity: .55; }
.bd-c__meta { font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); }
.bd-c__meta b { font-weight: 700; color: var(--ink-2); }
.bd-c__op { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); background: var(--tint); color: var(--carrot-ink); font: 700 var(--fs-mini) / 1.6 var(--font); }
.bd-c__body { margin-top: 4px; font: 400 var(--fs-sm) / 1.7 var(--font); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.bd-c__act { display: flex; gap: 12px; margin-top: 4px; }
.bd-c__act .btn { min-height: 32px; }
.bd-comments__none, .bd-comments__login { margin-top: 10px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-3); }
.bd-comments__login a { color: var(--carrot-ink); font-weight: 700; }
.bd-cform { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bd-cform__act { display: flex; justify-content: flex-end; }

@media (max-width: 768px) {
  .bd-bar { flex-direction: column; align-items: stretch; }
  .bd-write { align-self: flex-end; }
  .bd-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}