/* css/community.css — BuddyPlanner Unified Luxury Theme */
#screen-community {
  background: #f8fafc;
}

.community-header {
  padding: 16px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.community-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.4px;
}

.my-points {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: #d97706;
  background: #fffbf0;
  border: 1px solid #fef3c7;
  padding: 6px 12px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
}

/* Category Filter Pills */
.community-cats {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.community-cats::-webkit-scrollbar { display: none; }
.comm-cat-pill {
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comm-cat-pill.active {
  background: #04122d;
  color: #ffffff;
  border-color: #04122d;
  box-shadow: 0 3px 10px rgba(4,18,45,0.2);
}

.feed-list {
  padding: 0 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feed-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.author-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.author-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
}
.author-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #007aff;
  background: #eff6ff;
  padding: 2px 6px;
  border-radius: 6px;
}
.feed-time {
  font-size: 12px;
  color: #94a3b8;
}

.feed-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag-join {
  font-size: 11.5px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  padding: 3px 9px;
  border-radius: 6px;
}
.tag-course {
  font-size: 11.5px;
  font-weight: 700;
  color: #10b981;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  padding: 3px 9px;
  border-radius: 6px;
}

.feed-content {
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

.feed-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.btn-goodshot {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  padding: 8px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-goodshot:active {
  transform: scale(0.95);
}
.btn-goodshot.active {
  color: #007aff;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.btn-join {
  background: #04122d;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(4,18,45,0.15);
  transition: all 0.15s ease;
}
.btn-join:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* 정식 오픈 전 예시 안내 */
.comm-preview-notice { margin: 0 20px 14px; padding: 12px 14px; border-radius: 14px; background: #eff6ff; border: 1px solid #bfdbfe; display: flex; flex-direction: column; gap: 2px; }
.comm-preview-notice b { font-size: 14px; color: #1e3a8a; }
.comm-preview-notice span { font-size: 13px; color: #1e40af; }

/* ── 실제 커뮤니티 ── */
.cm-head-actions { display:flex; gap:6px; }
.cm-icon-btn { background:#fff; border:1px solid #e2e8f0; border-radius:9999px; padding:6px 12px; font-size:12.5px; font-weight:800; color:#334155; cursor:pointer; }
.cm-empty { background:#fff; border-radius:18px; padding:36px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; color:#64748b; font-size:13px; }
.cm-empty b { color:#0f172a; font-size:15px; }
.cm-empty.small { padding:20px; background:transparent; }
.cm-more { width:100%; padding:12px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; font-weight:800; color:#334155; cursor:pointer; }
.cm-fab { position:fixed; right:max(16px, calc(50% - var(--max-width, 480px) / 2 + 16px)); bottom:calc(var(--nav-h, 64px) + var(--safe-bottom, 0px) + 16px); z-index:20; background:#04122d; color:#fff; border:none; border-radius:9999px; padding:12px 18px; font-size:14px; font-weight:800; box-shadow:0 6px 18px rgba(4,18,45,0.3); cursor:pointer; }
.cm-avatar { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; }
.cm-more-btn { background:none; border:none; font-size:20px; color:#94a3b8; padding:4px 6px; cursor:pointer; line-height:1; }
.feed-content { white-space:pre-wrap; word-break:break-word; }
.tag-when { font-size:11.5px; font-weight:700; color:#7c3aed; background:#f5f3ff; border:1px solid #ede9fe; padding:3px 9px; border-radius:6px; }
.tag-closed { font-size:11.5px; font-weight:700; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; padding:3px 9px; border-radius:6px; }
.btn-join.cm-accepted { background:#059669; }
.btn-join.cm-pending { background:#fff; color:#334155; border:1px solid #cbd5e1; box-shadow:none; }
.btn-join.cm-disabled { background:#e2e8f0; color:#94a3b8; box-shadow:none; cursor:default; }
.cm-dot { display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:#ef4444; color:#fff; font-size:11px; line-height:18px; }
.cm-hidden { opacity:.65; }
.cm-hidden-note { font-size:12px; font-weight:700; color:#b45309; background:#fef3c7; border-radius:8px; padding:6px 10px; }
.cm-form { display:flex; flex-direction:column; gap:10px; text-align:left; }
.cm-form textarea, .cm-form input, .cm-form select { width:100%; box-sizing:border-box; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; padding:10px 12px; font-size:14px; font-family:inherit; color:#0f172a; }
.cm-form textarea { resize:vertical; min-height:80px; }
.cm-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:#64748b; flex:1; }
.cm-row { display:flex; gap:8px; }
#cm-join-fields { display:flex; flex-direction:column; gap:10px; }
.cm-seg { display:flex; flex-wrap:wrap; gap:6px; }
.cm-seg button { padding:7px 12px; border-radius:9999px; border:1px solid #e2e8f0; background:#fff; font-size:12.5px; font-weight:700; color:#64748b; cursor:pointer; }
.cm-seg button.on { background:#04122d; color:#fff; border-color:#04122d; }
.cm-hint { font-size:11.5px; color:#94a3b8; line-height:1.5; }
.cm-sum { font-size:13px; color:#334155; background:#f8fafc; border-radius:10px; padding:10px 12px; }
.cm-req { border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.cm-req-top { display:flex; justify-content:space-between; gap:8px; font-size:13.5px; color:#0f172a; }
.cm-req-msg { font-size:13px; color:#475569; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.cm-req-btns { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cm-st { font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:9999px; background:#f1f5f9; color:#64748b; white-space:nowrap; }
.cm-st.pending { background:#fef3c7; color:#b45309; }
.cm-st.accepted { background:#dcfce7; color:#047857; }
.cm-st.declined { background:#fee2e2; color:#b91c1c; }
.cm-link-btn { background:none; border:none; color:#94a3b8; font-size:12.5px; font-weight:700; text-decoration:underline; cursor:pointer; }
.cm-menu { display:flex; flex-direction:column; gap:6px; }
.cm-menu-item { width:100%; text-align:left; padding:13px 14px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; font-size:14.5px; font-weight:700; color:#0f172a; cursor:pointer; }
.cm-menu-item.danger { color:#dc2626; }
.cm-menu-item.muted { color:#94a3b8; text-align:center; border:none; }
.cm-menu-item[disabled] { opacity:.5; }
.cm-rules { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.55; color:#334155; list-style:decimal; }

/* ── 운영팀 글 ── */
.feed-card.cm-official { border: 1.5px solid #e8c77a; background: linear-gradient(180deg, #fffdf6, #ffffff 60%); box-shadow: 0 6px 18px rgba(184, 145, 63, .12); }
.cm-official-avatar { background: #111 url(../img/buddybirdie_app_icon.png) center/cover !important; }
.author-badge.cm-staff { color: #7a5a12; background: #fbefd0; }
.tag-pin { font-size: 12px; font-weight: 800; color: #7a5a12; background: #fbefd0; border-radius: 8px; padding: 4px 9px; }
.cm-form label.cm-official-toggle, .cm-official-toggle { display: flex; flex-direction: row; flex: none; align-items: center; gap: 10px; border: 1.5px solid #e8c77a; background: #fffbef; border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; cursor: pointer; text-align: left; }
.cm-official-toggle b { font-size: 14px; color: #3b2a06; }
.cm-official-toggle span:not(.cm-sw) { font-size: 12px; color: #8a6d2a; display: block; margin-top: 2px; line-height: 1.4; }
.cm-sw-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-sw { width: 44px; height: 26px; border-radius: 13px; background: #d6d3cc; position: relative; flex-shrink: 0; transition: background .2s; }
.cm-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cm-sw-input:checked + .cm-sw { background: #d4af37; }
.cm-sw-input:checked + .cm-sw::after { transform: translateX(18px); }