/* ============================================================
   ENDOLPHIN COMMUNITY — 게시판 공용 모양 (board.css)
   갤러리 · 콘텐츠 · 공지가 함께 씁니다. TALK 은 따로입니다.
   ⚠️ 색은 전부 theme.css 의 값을 씁니다. 여기서 새 색을 만들지 않습니다.
   ★ 2026-09-26 — --cm-d · --cm-s 는 커뮤니티 메인(소통공간/index.html)에만 정의돼 있어서
     게시판 페이지에서는 값이 비었습니다 → 단추(.btn)가 '흰 글씨 + 투명 배경' 으로
     안 보였습니다(글쓰기·올리기·남기기). 뒤에 hub-ui 의 --w-pink 계열을 대신 값으로 붙였습니다.
     메인처럼 --cm-* 를 정의한 페이지는 그 값을 그대로 씁니다.
   ============================================================ */

/* ── 머리 ── */
.bh{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:26px 0 18px; }
.bh-back{ font-size:13px; font-weight:800; color:var(--w-ink3); }
.bh-back:hover{ color:var(--cm-d, var(--w-pink-d)); }
.bh h1{ font-family:'Jua',sans-serif; font-weight:400; font-size:26px;
  color:var(--w-ink); flex:1 1 auto; }

/* ── 단추 ── */
.btn{ font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
  padding:9px 16px; border-radius:999px; border:1.5px solid transparent;
  background:var(--cm-d, var(--w-pink-d)); color:#fff; }
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.ghost{ background:var(--w-bg2); color:var(--w-ink2); border-color:var(--w-line); }
.btn.ghost:hover{ color:var(--cm-d, var(--w-pink-d)); border-color:var(--cm-d, var(--w-pink-d)); }
.btn.like{ background:var(--cm-s, var(--w-pink-s)); color:var(--cm-d, var(--w-pink-d)); }
.btn.back{ margin-bottom:14px; }

/* 올리는 중 점 */
.sp-dot{ display:inline-block; width:9px; height:9px; border-radius:50%;
  background:currentColor; animation:bdot .9s ease-in-out infinite; }
@keyframes bdot{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ── 사람 표시 ──
   ⚠️ 뱃지는 서버가 준 is_admin·is_streamer 로만 정해집니다. */
.av{ width:22px; height:22px; border-radius:50%; object-fit:cover;
  background:var(--w-bg2); flex:0 0 auto; }
.nk{ font-size:12.5px; font-weight:800; color:var(--w-ink2); }
.bd{ font-size:10.5px; font-weight:900; padding:2px 7px; border-radius:999px; }
.bd.own{ background:var(--cm-d, var(--w-pink-d)); color:#fff; }
.bd.str{ background:var(--cm-s, var(--w-pink-s)); color:var(--cm-d, var(--w-pink-d)); }
.sp{ flex:1 1 auto; }
.cnt{ font-size:12px; color:var(--w-ink3); font-weight:700; }

/* ── 격자 (갤러리) ── */
.ggrid{ display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.gcard{ display:block; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; padding:0; overflow:hidden; border-radius:16px;
  background:var(--w-card); border:1.5px solid var(--w-line); }
.gcard:hover{ border-color:var(--cm-d, var(--w-pink-d)); }
.gth{ display:block; aspect-ratio:4/3; background:var(--w-bg2);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gth img{ width:100%; height:100%; object-fit:cover; }
.gno{ font-size:30px; opacity:.4; }
.gb{ display:block; padding:11px 13px 13px; }
.gt{ display:block; font-size:14px; font-weight:800; color:var(--w-ink);
  line-height:1.4; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.gm{ display:flex; align-items:center; gap:6px; margin-top:8px; }

/* ── 줄 (콘텐츠 · 공지) ── */
.llist{ display:flex; flex-direction:column; gap:8px; }
.lcard{ display:flex; align-items:flex-start; gap:11px; width:100%;
  text-align:left; cursor:pointer; font-family:inherit;
  padding:13px 15px; border-radius:14px;
  background:var(--w-card); border:1.5px solid var(--w-line); }
.lcard:hover{ border-color:var(--cm-d, var(--w-pink-d)); }
.lcat{ flex:0 0 auto; font-size:10.5px; font-weight:900; padding:3px 9px;
  border-radius:999px; background:var(--cm-s, var(--w-pink-s)); color:var(--cm-d, var(--w-pink-d)); margin-top:2px; }
.lb{ flex:1 1 auto; min-width:0; }
.lt{ display:block; font-size:14.5px; font-weight:800; color:var(--w-ink);
  line-height:1.45; overflow-wrap:anywhere; }
.lm{ display:flex; align-items:center; gap:6px; margin-top:7px; flex-wrap:wrap; }

/* ── 글 하나 ── */
.detail{ padding-bottom:20px; }
.dh{ padding-bottom:14px; border-bottom:1.5px solid var(--w-line); }
.dh h2{ font-family:'Jua',sans-serif; font-weight:400; font-size:23px;
  color:var(--w-ink); margin:7px 0 0; line-height:1.4; overflow-wrap:anywhere; }
.dm{ display:flex; align-items:center; gap:7px; margin-top:11px; flex-wrap:wrap; }
.dmedia{ display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.dmedia img, .dmedia video{ width:100%; border-radius:14px;
  border:1.5px solid var(--w-line); }
.dbody{ font-size:15px; line-height:1.75; color:var(--w-ink);
  margin:16px 0 20px; overflow-wrap:anywhere; }
.dacts{ display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1.5px solid var(--w-line); }

/* ── 댓글 ── */
.cms{ margin-top:20px; }
.cms-h{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px;
  color:var(--w-ink); margin-bottom:10px; }
.cms-h em{ font-style:normal; font-size:14px; color:var(--w-ink3); }
.cm{ padding:11px 13px; border-radius:13px; margin-bottom:7px;
  background:var(--w-card); border:1.5px solid var(--w-line); }
.cm-h{ display:flex; align-items:center; gap:6px; }
.cm-b{ font-size:14px; line-height:1.6; color:var(--w-ink); margin-top:6px;
  overflow-wrap:anywhere; }
.cmf{ display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.cmf textarea{ flex:1 1 auto; font-family:inherit; font-size:14px;
  padding:10px 12px; border-radius:12px; resize:vertical;
  background:var(--w-card); border:1.5px solid var(--w-line); color:var(--w-ink); }
.cmf textarea:focus{ outline:none; border-color:var(--cm-d, var(--w-pink-d)); }

/* ── 글쓰기 ── */
.wf{ padding:18px 18px 20px; border-radius:18px; margin-bottom:20px;
  background:var(--w-card); border:1.5px solid var(--w-line); }
.wf-h{ font-family:'Jua',sans-serif; font-weight:400; font-size:19px;
  color:var(--w-ink); margin-bottom:14px; }
.wf-l{ display:block; font-size:12.5px; font-weight:800; color:var(--w-ink2);
  margin-bottom:12px; }
.wf-l input, .wf-l select, .wf-l textarea{ display:block; width:100%;
  font-family:inherit; font-size:14px; margin-top:6px;
  padding:10px 12px; border-radius:12px; resize:vertical;
  background:var(--w-bg); border:1.5px solid var(--w-line); color:var(--w-ink); }
.wf-l input:focus, .wf-l select:focus, .wf-l textarea:focus{
  outline:none; border-color:var(--cm-d, var(--w-pink-d)); }
.wf-hint{ display:block; font-size:11.5px; font-weight:600;
  color:var(--w-ink3); margin-top:5px; }
.wf-picked{ font-size:12.5px; font-weight:700; color:var(--cm-d, var(--w-pink-d));
  margin:-6px 0 12px; }
.wf-err{ font-size:13px; font-weight:700; color:#c0392b;
  padding:9px 12px; border-radius:10px; margin-bottom:12px;
  background:#fdecea; border:1.5px solid #f5c6c0; }
.wf-a{ display:flex; gap:8px; }

/* ── v2 추가 (2026-09-16) ── */
.gone{ color:var(--w-ink3) !important; font-weight:600 !important; }
.btn.like.on{ background:var(--cm-d, var(--w-pink-d)); color:#fff; }
.btn.like.ro{ cursor:default; }
.lnk{ font-family:inherit; font-size:12px; font-weight:800; cursor:pointer;
  background:none; border:0; color:var(--w-ink3); padding:2px 0; }
.lnk:hover{ color:var(--cm-d, var(--w-pink-d)); }
.cm-a{ margin-top:5px; }
.wf-opt{ font-weight:600; color:var(--w-ink3); }
.note{ font-size:13.5px; line-height:1.7; color:var(--w-ink2);
  padding:12px 14px; border-radius:13px; margin-bottom:14px;
  background:var(--w-bg2); border:1.5px solid var(--w-line); }

/* ── 빈 화면 ── */
.empty{ padding:46px 16px; text-align:center;
  font-size:15px; font-weight:700; color:var(--w-ink2); }
.empty span{ display:block; margin-top:7px;
  font-size:13px; font-weight:500; color:var(--w-ink3); }
.empty.sm{ padding:22px 12px; font-size:13.5px; font-weight:600; }
.morebox{ display:flex; justify-content:center; padding:20px 0 6px; }

@media (max-width:700px){
  .bh h1{ font-size:22px; }
  .ggrid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .dh h2{ font-size:20px; }
  .wf{ padding:15px 14px 17px; }
}

/* ══ 2026-09-26 — 추천 상태 배지 · 관리자 상태 바꾸기 · 링크 미리보기 ══════ */
.stb{ display:inline-flex; align-items:center; vertical-align:2px; margin-left:7px;
  font-size:10.5px; font-weight:900; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.stb.ok{ color:#1f7a4d; background:#e3f6ec; }
.stb.rv{ color:var(--w-ink2); background:var(--w-bg2); }
html[data-theme="dark"] .stb.ok{ color:#8fe0b5; background:#1b3328; }
.dh .stb{ margin-left:6px; }
.btn.res{ display:inline-flex; margin:0 0 18px; text-decoration:none; }

.adm{ margin:0 0 18px; padding:14px 15px 15px; border-radius:14px;
  border:1.5px dashed var(--w-line2); background:var(--w-bg2); }
.adm-h{ font-size:13.5px; font-weight:900; color:var(--w-ink); }
.adm-h small{ display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--w-ink3); }
.adm-st{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:11px; }
.adm-st i{ font-style:normal; font-size:11px; color:var(--w-ink3); }
.adm-b{ font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  padding:6px 11px; border-radius:999px; background:var(--w-card);
  border:1.5px solid var(--w-line); color:var(--w-ink2); }
.adm-b[aria-pressed="true"]{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff5f9e,#ff8ab8); }
.adm-l{ display:block; margin-top:11px; font-size:12.5px; font-weight:800; color:var(--w-ink2); }
.adm-l small{ font-weight:600; color:var(--w-ink3); }
.adm-l input{ display:block; width:100%; margin-top:5px; padding:9px 11px; border-radius:10px;
  font-family:inherit; font-size:13.5px; color:var(--w-ink);
  background:var(--w-card); border:1.5px solid var(--w-line); }
.adm-a{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.adm-msg{ font-size:12.5px; color:var(--w-ink3); }

.dbody a.blink{ color:var(--cm-d, var(--w-pink-d)); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.lpv{ display:flex; flex-direction:column; gap:9px; margin:-6px 0 20px; }
.lpv-yt, .lpv-ln{ display:flex; align-items:center; gap:12px; padding:9px; border-radius:14px;
  background:var(--w-card); border:1.5px solid var(--w-line); text-decoration:none; color:inherit; transition:.15s; }
.lpv-yt:hover, .lpv-ln:hover{ border-color:var(--cm-d, var(--w-pink-d)); }
.lpv-th{ position:relative; flex:0 0 auto; width:150px; aspect-ratio:16/9; border-radius:10px;
  overflow:hidden; background:var(--w-bg2); }
.lpv-th img{ width:100%; height:100%; object-fit:cover; }
.lpv-th i{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:15px; color:#fff; background:rgba(0,0,0,.28); }
.lpv-ln > i{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-style:normal; font-size:20px; background:var(--w-bg2); }
.lpv-b{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lpv-b b{ font-size:13.5px; font-weight:800; color:var(--w-ink); }
.lpv-b span{ font-size:12px; color:var(--w-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lpv-ln em{ flex:0 0 auto; font-style:normal; font-size:12px; font-weight:800; color:var(--w-ink3); }
@media (max-width:700px){
  .lpv-th{ width:118px; }
}

/* ══ 2026-09-27 — 콘텐츠 추천 4종: 종류 고르기 · 종류 탭 · 추천 정보 ══════ */
.wf-cats{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.wf-cat, .ltab{ font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:8px 13px; border-radius:999px; background:var(--w-card);
  border:1.5px solid var(--w-line); color:var(--w-ink2); }
.wf-cat[aria-checked="true"], .ltab[aria-pressed="true"]{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff5f9e,#ff8ab8); }
.ltabs{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; }
.ltab{ padding:7px 12px; font-size:12.5px; }
.lsub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:4px;
  font-size:12px; font-weight:600; color:var(--w-ink2); }
.lsub i{ font-style:normal; color:var(--w-ink3); }
.lcard{ align-items:center; }
.lref{ position:relative; flex:0 0 auto; width:96px; aspect-ratio:16/9; border-radius:10px;
  overflow:hidden; background:var(--w-bg2); }
.lref img{ width:100%; height:100%; object-fit:cover; }
.lref i{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:12px; color:#fff; background:rgba(0,0,0,.25); }
.dinfo{ margin:16px 0 0; padding:12px 14px; border-radius:14px; background:var(--w-bg2);
  display:flex; flex-direction:column; gap:6px; }
.dinfo > div{ display:flex; gap:10px; font-size:14px; line-height:1.5; }
.dinfo dt{ flex:0 0 96px; font-weight:800; color:var(--w-ink2); }
.dinfo dd{ flex:1 1 auto; min-width:0; margin:0; color:var(--w-ink); overflow-wrap:anywhere; }
.dinfo a.blink{ color:var(--cm-d, var(--w-pink-d)); text-decoration:underline; text-underline-offset:2px; }
.dlab{ margin:16px 0 -10px; font-size:12.5px; font-weight:800; color:var(--w-ink3); }
@media (max-width:700px){
  .lref{ width:60px; border-radius:8px; }       /* 폰 — 글자 자리를 먼저 */
  .lcard{ gap:9px; padding:12px 12px; }
  .lsub{ font-size:11.5px; }
  .dinfo dt{ flex-basis:84px; }
}

/* ══ 콘텐츠 추천 사진 첨부 (2026-10 v2) — 미리보기 · 빼기 · 지우기 표시 ══ */
.wf-phs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin-top:6px; }
.wf-ph{ position:relative; aspect-ratio:1/1; margin:0; border-radius:12px; overflow:hidden;
  background:var(--w-bg2); border:1.5px solid var(--w-line); }
.wf-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.wf-ph figcaption{ position:absolute; left:6px; bottom:6px; font-size:10px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.55); padding:1px 7px; border-radius:999px; }
.wf-ph.new{ border-color:var(--cm, var(--w-pink)); }
.wf-ph.rm img{ opacity:.35; filter:grayscale(1); }
.wf-ph-x{ position:absolute; right:5px; top:5px; min-width:24px; height:24px; padding:0 6px; border:0; cursor:pointer;
  border-radius:999px; font-size:12px; font-weight:800; color:#fff; background:rgba(0,0,0,.6); }
.wf-ph-x.undo{ font-size:10.5px; background:var(--cm-d, var(--w-pink-d)); }
.wf-ph-x:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.wf-ph.add{ display:flex; align-items:center; justify-content:center; cursor:pointer; border-style:dashed;
  color:var(--w-ink3); font-size:12.5px; font-weight:800; text-align:center; line-height:1.4; }
.wf-ph.add:hover{ color:var(--cm-d, var(--w-pink-d)); border-color:var(--cm, var(--w-pink)); }
.wf-ph.add input[type="file"]{ display:none !important; }   /* .wf-l input 공통 스타일이 hidden 을 덮지 않게 */