/* 초보맘카페 — 주제 게시판(목록/상세) 스타일 · tb-* 네임스페이스

 * 기존 board 자산(wrap/crumb/bd-alert/bd-empty)과 함께 사용. 신규 파일이라 캐시 버전 영향 없음. */



.tb-page { --tb-gold:#B8893A; --tb-ink:#1A1714; --tb-sub:#6B7280; --tb-line:#E7E2DA; --tb-bg:#FBF9F5; }



/* 헤더 */

.tb-head { margin: 8px 0 22px; }

.tb-head .tb-kicker { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--tb-gold); font-weight:800; margin:0 0 6px; }

.tb-head h1 { font-size:30px; line-height:1.2; letter-spacing:-.03em; font-weight:900; color:var(--tb-ink); margin:0; }

.tb-head .tb-lead { margin:10px 0 0; color:var(--tb-sub); font-size:14.5px; line-height:1.75; max-width:60ch; }



/* 게시판 카드 그리드 */

.tb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }

.tb-card {

  position:relative; display:flex; flex-direction:column; gap:8px;

  border:1px solid var(--tb-line); border-radius:16px; background:#fff;

  padding:18px 18px 16px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;

}

.tb-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(26,23,20,.08); border-color:#DCD3C6; }

.tb-card-link { position:absolute; inset:0; border-radius:16px; z-index:1; }

.tb-card-top { display:flex; align-items:center; gap:8px; }

.tb-card-badge {

  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 9px;

  border-radius:10px; background:var(--tb-bg); color:var(--tb-gold); font-weight:800; font-size:15px;

}

.tb-card-name { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--tb-ink); margin:0; }

.tb-joined-tag { font-size:11.5px; font-weight:800; color:#047857; background:#ECFDF5; border-radius:999px; padding:3px 9px; }

.tb-card-desc { margin:2px 0 0; color:var(--tb-sub); font-size:13.5px; line-height:1.6; min-height:2.6em;

  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.tb-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }

.tb-card-stats { color:var(--tb-sub); font-size:12.5px; }

.tb-card-stats b { color:var(--tb-ink); font-weight:700; }



/* 단골가입 버튼 */

.tb-follow-btn {

  position:relative; z-index:2; cursor:pointer; border:1px solid var(--tb-gold);

  background:var(--tb-gold); color:#fff; font-weight:800; font-size:13px;

  border-radius:999px; padding:7px 15px; line-height:1; transition:background .15s ease, color .15s ease, border-color .15s ease;

  white-space:nowrap;

}

.tb-follow-btn:hover { background:#A2782F; border-color:#A2782F; }

.tb-follow-btn.is-joined { background:#fff; color:var(--tb-gold); }

.tb-follow-btn.is-joined::after { content:" ✓"; }

.tb-follow-btn.is-joined:hover { background:#FEF2F2; color:#B91C1C; border-color:#F3C8C8; }

.tb-follow-btn.is-joined:hover [data-role="follow-label"]::after { content:" 해제"; }

.tb-follow-btn:disabled { opacity:.6; cursor:default; }



/* 상세 헤더 */

.tb-board-head { border:1px solid var(--tb-line); border-radius:18px; background:#fff; padding:22px 22px 20px; margin:8px 0 18px; }

.tb-board-head h1 { font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--tb-ink); margin:0; }

.tb-board-head .tb-board-desc { margin:10px 0 0; color:var(--tb-sub); font-size:14px; line-height:1.7; }

.tb-board-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:14px; color:var(--tb-sub); font-size:13px; }

.tb-board-meta b { color:var(--tb-ink); }

.tb-board-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.tb-board-actions .tb-follow-btn { font-size:14px; padding:10px 20px; }

.tb-write-btn {

  display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none;

  border:1px solid var(--tb-ink); background:var(--tb-ink); color:#fff; font-weight:800; font-size:14px;

  border-radius:999px; padding:10px 20px; line-height:1; transition:opacity .15s ease;

}

.tb-write-btn:hover { opacity:.88; }

.tb-write-hint { color:var(--tb-sub); font-size:13px; align-self:center; }

.tb-mgr-tag { font-size:11.5px; font-weight:800; color:#7C3AED; background:#F5F3FF; border-radius:999px; padding:3px 9px; }



/* 글 말머리 배지 (목록 재사용) */

.tb-tag { display:inline-block; font-size:11.5px; font-weight:800; color:var(--tb-gold); background:var(--tb-bg);

  border:1px solid var(--tb-line); border-radius:999px; padding:2px 9px; margin-right:6px; }



@media (max-width:520px) {

  .tb-head h1 { font-size:25px; }

  .tb-grid { grid-template-columns:1fr; }

}



/* 글쓰기 폼 */

.tb-write-head { margin: 8px 0 18px; }

.tb-write-title { font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--tb-ink); margin:0; }

.tb-write-sub { margin:8px 0 0; color:var(--tb-sub); font-size:13.5px; }

.tb-form { display:flex; flex-direction:column; gap:16px; }

.tb-field { display:flex; flex-direction:column; gap:7px; }

.tb-label { font-size:13px; font-weight:800; color:var(--tb-ink); }

.tb-input, .tb-select, .tb-textarea {

  width:100%; box-sizing:border-box; border:1px solid var(--tb-line); border-radius:12px;

  background:#fff; color:var(--tb-ink); font:inherit; font-size:15px; padding:12px 14px;

  transition:border-color .15s ease, box-shadow .15s ease;

}

.tb-input:focus, .tb-select:focus, .tb-textarea:focus {

  outline:none; border-color:var(--tb-gold); box-shadow:0 0 0 3px rgba(184,137,58,.14);

}

.tb-select { max-width:220px; }

.tb-textarea { resize:vertical; min-height:280px; line-height:1.75; }

.tb-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px; }

.tb-cancel { text-decoration:none; color:var(--tb-sub); font-weight:700; font-size:14px; padding:11px 18px; border-radius:999px; }

.tb-cancel:hover { color:var(--tb-ink); background:var(--tb-bg); }

.tb-submit {

  cursor:pointer; border:1px solid var(--tb-gold); background:var(--tb-gold); color:#fff;

  font-weight:800; font-size:15px; border-radius:999px; padding:11px 26px; transition:background .15s ease, border-color .15s ease;

}

.tb-submit:hover { background:#A2782F; border-color:#A2782F; }

@media (max-width:520px) { .tb-select { max-width:none; } }



/* 섹션 제목 (내 단골 게시판 / 다른 게시판) */

.tb-section-title { font-size: 18px; font-weight: 800; color: var(--tb-ink); margin: 22px 0 12px; letter-spacing: -.02em; }

.tb-section-title:first-of-type { margin-top: 6px; }



/* 홈 카드 바로가기 표시 (팔로우 버튼 대신) */

.tb-card-go { font-size: 13px; font-weight: 800; color: var(--tb-gold); white-space: nowrap; }



/* =====================================================================

 * 홈 메인 비중 — 카페 게시판 피처 밴드 (#boards-home.tb-feature)

 *   .hm-band 문법을 따라 톤 다운된 배경 밴드 + 촘촘한 카드 그리드(많은 카페 노출).

 *   팔레트 변수(--paper*/--line/--gold-grad)는 soomter-maison.css :root 전역값을 사용합니다.

 * ===================================================================== */

.tb-feature{position:relative;overflow:hidden;

  background:linear-gradient(180deg,var(--paper-2,#FCF8EF) 0%,var(--paper,#FBF6EA) 100%);

  border-top:1px solid var(--line,rgba(36,26,18,.10));

  border-bottom:1px solid var(--line,rgba(36,26,18,.10));

  overflow-anchor:none}

.tb-feature::before{content:"";position:absolute;inset:auto -140px -120px auto;width:340px;height:340px;border-radius:50%;

  background:radial-gradient(circle,rgba(230,200,121,.20),transparent 68%);pointer-events:none}

.tb-feature .wrap{position:relative;z-index:2}

/* 카페가 많이 보이도록 촘촘한 자동 채움 그리드 */

.tb-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:13px;margin-top:4px}

.tb-feature .tb-card{background:#fff}

.tb-feature-cta{display:flex;justify-content:center;margin-top:28px}

.tb-feature-more{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 26px;border-radius:999px;

  font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;

  background:var(--gold-grad,linear-gradient(135deg,#E6C879 0%,#B08327 48%,#8C5E18 100%));

  box-shadow:0 12px 28px rgba(176,131,39,.26);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}

.tb-feature-more:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(176,131,39,.34);filter:brightness(1.03)}

.tb-feature-more .ar{font-size:13px}

@media(max-width:720px){

  .tb-feature-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}

  .tb-feature .tb-card{padding:14px 14px 13px}

  .tb-feature-more{min-height:44px;padding:0 22px;font-size:14px}

}

@media(max-width:430px){

  .tb-feature-grid{grid-template-columns:1fr 1fr;gap:10px}

  .tb-feature .tb-card-name{font-size:15.5px}

}



/* 헤더 우측 — 카페 게시판 바로가기 CTA (index 마스트헤드) */

.mast-board-cta{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 15px;border-radius:999px;

  font-size:13px;font-weight:800;letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;

  background:var(--gold-grad,linear-gradient(135deg,#E6C879 0%,#B08327 48%,#8C5E18 100%));

  box-shadow:0 8px 20px rgba(176,131,39,.24);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}

.mast-board-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(176,131,39,.32);filter:brightness(1.03)}

.mast-board-cta .ic{font-size:12px;line-height:1;opacity:.95}

@media(max-width:780px){.mast-board-cta{padding:0 12px;font-size:12px}}



/* 히어로 — 커뮤니티(카페 게시판) CTA. 금색 아웃라인으로 큐레이션 primary(테라코타)와 구분. */

.btn-board{color:var(--gold-3,#9A6F1E);background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold,#B08327),0 6px 18px rgba(176,131,39,.12)}

.btn-board:hover{transform:translateY(-3px);color:#fff;background:var(--gold-grad,linear-gradient(135deg,#E6C879 0%,#B08327 48%,#8C5E18 100%));box-shadow:0 16px 36px rgba(176,131,39,.30)}

.btn-board .ic{font-size:13px;line-height:1}


/* ===== /boards 상단 타이틀 이미지(매스트헤드) — v4 ===== */
.tb-masthead { max-width: 680px; margin: 0 auto 14px; }
.tb-masthead svg { display: block; width: 100%; height: auto; }

/* ===== 카드 내 초보맘카페 매니저 프로필(작게, 좌측) — v4 ===== */
.tb-card-mgr { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tb-card-mgr-ava {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: linear-gradient(135deg, #C9A24B, #B8893A); color: #fff;
  font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(184,137,58,.4);
}
.tb-card-mgr-name {
  font-size: 11.5px; font-weight: 600; color: var(--tb-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== 초보맘카페 상세 헤더: 연결된 카페 메인이미지(매거진 B스타일 폴라로이드, 우측) — v4 ===== */
.tb-board-head.has-photo { display: flex; gap: 22px; align-items: flex-start; }
.tb-board-head-main { flex: 1 1 auto; min-width: 0; }
.tb-board-head-photo { flex: 0 0 auto; width: 196px; display: flex; justify-content: center; padding-top: 2px; }
.tb-board-head-photo .polaroid-big {
  position: relative; background: #FCF8EF; padding: 13px 13px 34px;
  border: 1px solid rgba(42,31,21,.08); border-radius: 6px;
  box-shadow: 0 14px 30px rgba(42,31,21,.14), 0 3px 8px rgba(42,31,21,.08);
  transform: rotate(2deg); width: 100%; max-width: 196px; margin: 0;
}
.tb-board-head-photo .polaroid-big-img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px;
  background: linear-gradient(135deg, #F2E8D2, #B8893A);
}
.tb-board-head-photo .polaroid-big-cap {
  position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--tb-sub);
}
.tb-board-head-photo .polaroid-big-tape {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 84px; height: 20px; border-radius: 2px;
  background: rgba(184,137,58,.55);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.28) 4px, rgba(255,255,255,.28) 8px);
  box-shadow: 0 3px 8px rgba(76,55,28,.16);
}
@media (max-width: 720px) {
  .tb-board-head.has-photo { flex-direction: column; }
  .tb-board-head-photo { width: 100%; justify-content: flex-start; padding-top: 6px; }
  .tb-board-head-photo .polaroid-big { max-width: 172px; transform: rotate(1.5deg); }
}

/* ===== v5: 매니저칩 → 연결된 카페 운영자(사진 지원) + 상세 운영자 프로필 ===== */
.tb-card-mgr-ava { overflow: hidden; }
.tb-card-mgr-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tb-cafe-op {
  display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--tb-line); text-decoration: none; color: inherit;
}
.tb-cafe-op-ava {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #C9A24B, #B8893A); color: #fff;
  font-size: 16px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(184,137,58,.35);
}
.tb-cafe-op-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-cafe-op-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-cafe-op-name { font-size: 14px; font-weight: 800; color: var(--tb-ink); line-height: 1.35; }
.tb-cafe-op-from { font-weight: 600; color: var(--tb-gold); font-size: 12.5px; }
.tb-cafe-op-bio {
  font-size: 12.5px; color: var(--tb-sub); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-cafe-op:hover .tb-cafe-op-name { color: var(--tb-gold); }

/* 단골 등록 결과: 권한과 독립된 관심 게시판 저장 안내 */
.tb-follow-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);margin:0;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 5px 24px #0002;font-size:14px;line-height:1.6}
.tb-follow-notice[hidden]{display:none}
@media(max-width:699px){.tb-follow-notice{bottom:calc(72px + env(safe-area-inset-bottom))}}