/**
 * HC Community Pro v2 — 메인 스타일시트
 *
 * 📁 위치: wp-content/plugins/hc-community-pro/assets/css/hc-community.css
 *
 * 기반: joyn-kr-demo_2.html CSS 전체 이식
 * 설계 가이드: 02-joyn-design-guide_v4_4.md v4.4 준수
 *   - 아이콘: Remix Icon(ri-*) 단일 사용
 *   - 폰트: 테마 핸들 의존 (플러그인 자체 CDN 등록 금지)
 *   - 반응형: clamp() 우선, 미디어 쿼리 2~3개
 *   - form font-size: 16px 고정 (iOS Auto-Zoom 방지)
 */

/* ================================================
   CSS 변수 (디자인 토큰)
   ================================================ */
.hcp-wrap {
  --space-xs: clamp(0.2rem, 0.1rem + 0.3vw, 0.4rem);
  --space-sm: clamp(0.45rem, 0.25rem + 0.55vw, 0.85rem);
  --space-md: clamp(0.85rem, 0.5rem + 0.9vw, 1.35rem);
  --space-lg: clamp(1.2rem, 0.7rem + 1.4vw, 1.9rem);
  --space-xl: clamp(1.8rem, 1rem + 2vw, 3rem);

  --text-xs:   clamp(0.68rem, 0.63rem + 0.12vw, 0.76rem);
  --text-sm:   clamp(0.79rem, 0.74rem + 0.16vw, 0.88rem);
  --text-base: clamp(0.88rem, 0.83rem + 0.18vw, 0.98rem);
  --text-lg:   clamp(1.02rem, 0.94rem + 0.26vw, 1.2rem);
  --text-xl:   clamp(1.18rem, 1.04rem + 0.42vw, 1.46rem);
  --text-2xl:  clamp(1.46rem, 1.18rem + 0.84vw, 2rem);
  --text-3xl:  clamp(1.9rem, 1.46rem + 1.3vw, 2.8rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* 브랜드 — 딥 인디고 + 골드 */
  --brand:       #3B2FD9;
  --brand-mid:   #4F46E5;
  --brand-lite:  #EEF2FF;
  --brand-dark:  #2921A8;
  --gold:        #D97706;
  --gold-lite:   #FFFBEB;
  --gold-bright: #F59E0B;
  --rose:        #E11D48;
  --rose-lite:   #FFF1F2;
  --teal:        #0D9488;
  --teal-lite:   #F0FDFA;
  --green:       #16A34A;
  --green-lite:  #F0FDF4;
  --sky:         #0284C7;
  --sky-lite:    #F0F9FF;
  --amber:       #B45309;
  --amber-lite:  #FEF3C7;

  /* 서피스 */
  --bg:      #F0F2F9;
  --surface: #FFFFFF;
  --surf2:   #F7F8FC;
  --sb-bg:   #16142E;
  --sb-hover: rgba(255,255,255,0.055);
  --sb-act:  rgba(79,70,229,0.22);

  /* 텍스트 */
  --tx1: #0F0E28;
  --tx2: #4B5563;
  --tx3: #9CA3AF;
  --txw: rgba(255,255,255,0.82);
  --txd: rgba(255,255,255,0.38);

  /* 보더 */
  --bdr: rgba(0,0,0,0.07);

  /* 그림자 */
  --sh-sm:    0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:    0 4px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04);
  --sh-lg:    0 16px 48px rgba(0,0,0,0.15);
  --sh-brand: 0 4px 18px rgba(59,47,217,0.22);

  --sb-w: 244px;
  --tb-h: 56px;
}

.hcp-wrap *, .hcp-wrap *::before, .hcp-wrap *::after {
  box-sizing: border-box;
}
.hcp-wrap {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-base);
  color: var(--tx1);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hcp-wrap a { color: inherit; text-decoration: none; }
.hcp-wrap button { cursor: pointer; border: none; background: none; font-family: inherit; }
.hcp-wrap [class^="ri-"], .hcp-wrap [class*=" ri-"] {
  font-size: inherit; vertical-align: middle; line-height: 1;
}

/* ================================================
   SHELL / 레이아웃
   ================================================ */

/* ── SIDEBAR ── */
.hcp-wrap .sidebar {
  width: var(--sb-w);
  background: var(--sb-bg);
  position: fixed; top: 0; left: 0; height: 100vh;
  display: flex; flex-direction: column;
  /* 테마 스티키 헤더·서브메뉴(≈9999)·hc-joyn-menu(9991+)보다 낮게 — 상단바/사이드가 홈 메뉴를 덮지 않음 */
  z-index: 3; overflow-y: auto; overflow-x: hidden;
}
.hcp-wrap .sb-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; gap: 10px;
}
.hcp-wrap .sb-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--brand), #7C3AED);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand); flex-shrink: 0;
}
.hcp-wrap .sb-logo i { font-size: 1.2rem; color: #fff; }
.hcp-wrap .sb-brand-name { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.hcp-wrap .sb-brand-sub {
  display: block; font-size: 0.6rem; color: var(--txd);
  letter-spacing: 0.05em; text-transform: uppercase; margin-top: 1px;
}
.hcp-wrap .sb-sec { padding: 14px 10px 4px; }
.hcp-wrap .sb-sec-lbl {
  font-size: 0.6rem; font-weight: 600; color: var(--txd);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 8px; margin-bottom: 5px; display: block;
}
.hcp-wrap .ni {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--txw); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; margin-bottom: 1px; transition: background 0.14s, color 0.14s;
  position: relative;
}
.hcp-wrap .ni:hover { background: var(--sb-hover); }
.hcp-wrap .ni.on { background: var(--sb-act); color: #fff; }
.hcp-wrap .ni.on i { color: #A5B4FC; }
.hcp-wrap .ni i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; color: var(--txd); }
.hcp-wrap .ni-badge {
  margin-left: auto; background: var(--rose); color: #fff;
  font-size: 0.58rem; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-full); min-width: 17px; text-align: center;
}
.hcp-wrap .ni-cnt { margin-left: auto; font-size: 0.63rem; color: var(--txd); }
.hcp-wrap .sb-user {
  margin-top: auto; padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hcp-wrap .sb-user-card {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.13s;
}
.hcp-wrap .sb-user-card:hover { background: var(--sb-hover); }
.hcp-wrap .sb-uname { display: block; font-size: 0.8rem; font-weight: 600; color: #fff; }
.hcp-wrap .sb-urole { display: block; font-size: 0.62rem; color: var(--txd); }

/* ── MAIN ── */
.hcp-wrap .main {
  margin-left: var(--sb-w);
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* ── TOPBAR ── */
.hcp-wrap .topbar {
  height: var(--tb-h); background: var(--surface);
  border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center;
  padding: 0 var(--space-lg); gap: var(--space-md);
  /* sticky 유지하되 사이트 헤더 드롭다운·hc-joyn-menu보다 낮은 스택 (사이드바 3보다 한 단계 아래) */
  position: sticky; top: 0; z-index: 2;
}
.hcp-wrap .tb-title { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.025em; flex: 1; }
.hcp-wrap .tb-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg); border-radius: var(--radius-full);
  padding: 6px 14px; border: 1px solid transparent;
  min-width: min(240px, 26vw); transition: border-color 0.14s;
}
.hcp-wrap .tb-search:focus-within { border-color: var(--brand-mid); }
.hcp-wrap .tb-search i { color: var(--tx3); font-size: 0.9rem; }
/* ⚠️ form 요소: 16px 고정 (iOS Auto-Zoom 방지) */
.hcp-wrap input,
.hcp-wrap select,
.hcp-wrap textarea {
  font-size: 16px;
  touch-action: manipulation;
}
.hcp-wrap .tb-search input {
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 16px; color: var(--tx1); flex: 1;
}
.hcp-wrap .tb-search input::placeholder { color: var(--tx3); }
.hcp-wrap .tb-acts { display: flex; align-items: center; gap: 3px; }
.hcp-wrap .tb-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx2); font-size: 1.05rem; position: relative;
  transition: background 0.13s;
}
.hcp-wrap .tb-btn:hover { background: var(--bg); color: var(--tx1); }
.hcp-wrap .tb-btn .dot {
  width: 7px; height: 7px; background: var(--rose);
  border-radius: 50%; position: absolute; top: 6px; right: 6px;
  border: 2px solid var(--surface);
}
.hcp-wrap .tb-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #7C3AED);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.76rem; font-weight: 800; cursor: pointer;
}

/* ── PAGE WRAP ── */
.hcp-wrap .page-wrap {
  flex: 1;
  padding: var(--space-lg);
  max-width: 1100px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.hcp-wrap .page { display: none; }
.hcp-wrap .page.on { display: block; }

/* ================================================
   버튼
   ================================================ */
.hcp-wrap .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px; font-family: inherit;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-sm); transition: all 0.14s; white-space: nowrap;
}
.hcp-wrap .btn i { font-size: 1em; }
.hcp-wrap .btn-brand  { background: var(--brand-mid); color: #fff; border: none; box-shadow: var(--sh-brand); }
.hcp-wrap .btn-brand:hover  { background: var(--brand-dark); }
.hcp-wrap .btn-gold   { background: var(--gold-bright); color: #fff; border: none; }
.hcp-wrap .btn-gold:hover   { background: var(--gold); }
.hcp-wrap .btn-rose   { background: var(--rose); color: #fff; border: none; }
.hcp-wrap .btn-rose:hover   { background: #be123c; }
.hcp-wrap .btn-teal   { background: var(--teal); color: #fff; border: none; }
.hcp-wrap .btn-outline { background: transparent; color: var(--tx2); border: 1px solid var(--bdr); }
.hcp-wrap .btn-outline:hover { background: var(--bg); color: var(--tx1); }
.hcp-wrap .btn-ghost  { background: transparent; color: var(--tx2); border: none; padding: 5px 10px; }
.hcp-wrap .btn-ghost:hover  { background: var(--bg); color: var(--tx1); }
.hcp-wrap .btn-sm  { padding: 5px 12px; font-size: var(--text-xs); }
.hcp-wrap .btn-xs  { padding: 3px 8px; font-size: 0.66rem; }

/* ================================================
   카드 / 서피스
   ================================================ */
.hcp-wrap .card {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--bdr); box-shadow: var(--sh-sm); overflow: hidden;
}
.hcp-wrap .card-pad { padding: var(--space-md); }
.hcp-wrap .card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md); border-bottom: 1px solid var(--bdr);
}
.hcp-wrap .card-hdr-title { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hcp-wrap .card-hdr-title i { color: var(--brand-mid); }

/* ================================================
   배지 / 아바타
   ================================================ */
.hcp-wrap .bdg {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
}
.hcp-wrap .bdg i { font-size: 0.75em; }
.hcp-wrap .bd-brand    { background: var(--brand-lite); color: var(--brand); }
.hcp-wrap .bd-gold     { background: var(--gold-lite);  color: var(--gold); }
.hcp-wrap .bd-rose     { background: var(--rose-lite);  color: var(--rose); }
.hcp-wrap .bd-teal     { background: var(--teal-lite);  color: var(--teal); }
.hcp-wrap .bd-green    { background: var(--green-lite); color: var(--green); }
.hcp-wrap .bd-sky      { background: var(--sky-lite);   color: var(--sky); }
.hcp-wrap .bd-amber    { background: var(--amber-lite); color: var(--amber); }
.hcp-wrap .bd-muted    { background: var(--bg); color: var(--tx3); border: 1px solid var(--bdr); }
.hcp-wrap .bd-verified { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #fff; }

/* 아바타: 테마(astra-child 등) flex/width 오버라이드에 찌그러지지 않도록 aspect-ratio·min 고정 */
.hcp-wrap .av {
  border-radius: 50%;
  flex: 0 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  position: relative;
  box-sizing: border-box;
}
.hcp-wrap .av-28 { width:28px; height:28px; min-width:28px; min-height:28px; font-size:0.65rem; }
.hcp-wrap .av-32 { width:32px; height:32px; min-width:32px; min-height:32px; font-size:0.7rem; }
.hcp-wrap .av-36 { width:36px; height:36px; min-width:36px; min-height:36px; font-size:0.75rem; }
.hcp-wrap .av-40 { width:40px; height:40px; min-width:40px; min-height:40px; font-size:0.84rem; }
.hcp-wrap .av-48 { width:48px; height:48px; min-width:48px; min-height:48px; font-size:0.98rem; }
.hcp-wrap .av-56 { width:56px; height:56px; min-width:56px; min-height:56px; font-size:1.1rem; }
.hcp-wrap .av-80 { width:80px; height:80px; min-width:80px; min-height:80px; font-size:1.55rem; }
.hcp-wrap .av-96 { width:96px; height:96px; min-width:96px; min-height:96px; font-size:1.9rem; }
.hcp-wrap .g1 { background: linear-gradient(135deg,#3B2FD9,#7C3AED); }
.hcp-wrap .g2 { background: linear-gradient(135deg,#0EA5E9,#0284C7); }
.hcp-wrap .g3 { background: linear-gradient(135deg,#16A34A,#0D9488); }
.hcp-wrap .g4 { background: linear-gradient(135deg,#D97706,#EF4444); }
.hcp-wrap .g5 { background: linear-gradient(135deg,#EC4899,#F43F5E); }
.hcp-wrap .g6 { background: linear-gradient(135deg,#8B5CF6,#3B82F6); }
.hcp-wrap .g7 { background: linear-gradient(135deg,#F59E0B,#10B981); }
.hcp-wrap .g8 { background: linear-gradient(135deg,#0F766E,#0EA5E9); }

/* ================================================
   폼 공통 요소 — 16px 고정 (iOS Auto-Zoom 방지)
   ================================================ */
.hcp-wrap .hcp-input,
.hcp-wrap .hcp-select,
.hcp-wrap .compose-field,
.hcp-wrap .dm-subject,
.hcp-wrap .dm-textarea,
.hcp-wrap .prayer-ta,
.hcp-wrap .chat-input,
.hcp-wrap .msg-srch input {
  font-size: 16px !important;
  touch-action: manipulation;
}
.hcp-wrap .hcp-input {
  width: 100%; background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--radius-md); padding: 9px 12px;
  font-family: inherit; outline: none; transition: border-color 0.13s; color: var(--tx1);
}
.hcp-wrap .hcp-input:focus { border-color: var(--brand-mid); background: var(--surface); }
.hcp-wrap .hcp-input::placeholder { color: var(--tx3); }
.hcp-wrap .hcp-select {
  background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--radius-md); padding: 7px 12px;
  font-family: inherit; outline: none; cursor: pointer; color: var(--tx1);
}
.hcp-wrap .hcp-label {
  display: block; font-size: var(--text-xs); font-weight: 600; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}

/* ================================================
   YouTube 모달
   ================================================ */
#hcp-yt-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: var(--space-md);
}
#hcp-yt-overlay.open { display: flex; }
.hcp-wrap .yt-modal-box {
  background: #000; border-radius: var(--radius-lg); overflow: hidden;
  width: min(800px, 96vw); box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  position: relative; animation: hcpYtUp 0.22s ease-out;
}
@keyframes hcpYtUp {
  from { opacity:0; transform: translateY(24px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.hcp-wrap .yt-modal-topbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #0f0f0f; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hcp-wrap .yt-modal-title {
  flex: 1; font-size: var(--text-sm); font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hcp-wrap .yt-close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 1.05rem;
  background: rgba(255,255,255,0.08); transition: background 0.13s, color 0.13s; flex-shrink: 0;
}
.hcp-wrap .yt-close-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.hcp-wrap .yt-frame-wrap {
  position: relative; width: 100%; padding-bottom: 56.25%; background: #000;
}
.hcp-wrap .yt-frame-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.hcp-wrap .yt-modal-meta {
  padding: 10px 14px 12px; background: #0f0f0f;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 10px;
}
.hcp-wrap .yt-modal-channel { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.hcp-wrap .yt-modal-actions { display: flex; gap: 6px; margin-left: auto; }
.hcp-wrap .yt-action-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 11px;
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600;
  color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.09); transition: background 0.13s;
}
.hcp-wrap .yt-action-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.hcp-wrap .yt-open-link {
  display: flex; align-items: center; gap: 5px; font-size: var(--text-xs);
  color: rgba(255,255,255,0.4); padding: 5px 10px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.05); transition: all 0.13s;
}
.hcp-wrap .yt-open-link:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); }

/* YouTube 썸네일 카드 */
.hcp-wrap .yt-thumb-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; background: #000; margin: 10px var(--space-md) 0;
}
.hcp-wrap .yt-thumb-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: opacity 0.2s; }
.hcp-wrap .yt-thumb-card:hover .yt-thumb-img { opacity: 0.85; }
.hcp-wrap .yt-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.22); transition: background 0.2s;
}
.hcp-wrap .yt-thumb-card:hover .yt-play-overlay { background: rgba(0,0,0,0.42); }
.hcp-wrap .yt-play-btn-big {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; transition: transform 0.18s, background 0.18s;
  border: 2px solid rgba(255,255,255,0.25);
}
.hcp-wrap .yt-thumb-card:hover .yt-play-btn-big { transform: scale(1.1); background: #FF0000; border-color: #FF0000; }
.hcp-wrap .yt-thumb-duration {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(0,0,0,0.78); color: #fff;
  font-size: 0.68rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.hcp-wrap .yt-thumb-label {
  position: absolute; top: 8px; left: 8px;
  background: #FF0000; color: #fff; font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}

/* ================================================
   피드 페이지
   ================================================ */
.hcp-wrap .feed-layout {
  display: grid; grid-template-columns: 1fr 294px; gap: var(--space-md); align-items: start;
}
.hcp-wrap .feed-tabs {
  display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--bdr);
  border-radius: var(--radius-full); padding: 3px; width: fit-content; max-width: 100%;
  flex-wrap: wrap; margin-bottom: var(--space-md);
}
.hcp-wrap .f-tab {
  padding: 5px 15px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; color: var(--tx3); cursor: pointer; transition: all 0.13s;
}
.hcp-wrap .f-tab.on { background: var(--brand-mid); color: #fff; }
.hcp-wrap .compose { margin-bottom: var(--space-md); }
.hcp-wrap .compose-inner { display: flex; gap: 11px; padding: var(--space-md); }
.hcp-wrap .compose-right { flex: 1; min-width: 0; }
.hcp-wrap .compose-field {
  width: 100%; background: var(--bg); border: 1.5px solid var(--bdr);
  border-radius: var(--radius-md); padding: 10px 13px;
  font-family: inherit; color: var(--tx1); resize: none; min-height: 50px;
  transition: border-color 0.14s; line-height: 1.55;
}
.hcp-wrap .compose-field:focus { outline: none; border-color: var(--brand-mid); background: var(--surface); }
.hcp-wrap .compose-field::placeholder { color: var(--tx3); }
.hcp-wrap .compose-bar {
  display: flex; align-items: center; gap: 2px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bdr); flex-wrap: wrap;
}
.hcp-wrap .ca {
  display: flex; align-items: center; gap: 4px; padding: 4px 9px;
  border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--tx3); font-weight: 500;
  cursor: pointer; transition: all 0.12s;
}
.hcp-wrap .ca:hover { background: var(--bg); color: var(--tx2); }
.hcp-wrap .ca i { font-size: 0.95rem; }
.hcp-wrap .post { margin-bottom: var(--space-md); transition: box-shadow 0.14s; }
.hcp-wrap .post:hover { box-shadow: var(--sh-md); }
.hcp-wrap .post-hdr { display: flex; align-items: center; gap: 10px; padding: var(--space-md) var(--space-md) 0; }
.hcp-wrap .post-meta { flex: 1; min-width: 0; }
.hcp-wrap .post-author { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hcp-wrap .post-info { font-size: var(--text-xs); color: var(--tx3); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.hcp-wrap .post-body {
  padding: 8px var(--space-md) 0;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--tx2);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hcp-wrap .post-body img,
.hcp-wrap .post-body video { max-width: 100%; height: auto; }
.hcp-wrap .post-body iframe { max-width: 100%; }
.hcp-wrap .post-verse { margin: 9px var(--space-md) 0; background: linear-gradient(135deg,var(--brand-lite),var(--gold-lite)); border-left: 3px solid var(--brand-mid); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 9px 13px; }
.hcp-wrap .post-verse-ref { font-size: var(--text-xs); color: var(--brand); font-weight: 700; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.hcp-wrap .post-verse-text { font-size: var(--text-sm); color: var(--tx2); line-height: 1.7; font-style: italic; }
.hcp-wrap .post-footer { display: flex; align-items: center; padding: 7px var(--space-md); gap: 1px; }
.hcp-wrap .post-author-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; flex-wrap: wrap; }
.hcp-wrap .post-av-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.hcp-wrap .post-av-wrap:hover .av { opacity: 0.88; }
.hcp-wrap .pa { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--tx3); font-weight: 500; cursor: pointer; transition: all 0.12s; }
.hcp-wrap .pa:hover { background: var(--bg); color: var(--tx2); }
.hcp-wrap .pa.liked { color: var(--rose); }
.hcp-wrap .pa i { font-size: 1rem; }

/* ── 오른쪽 위젯 ── */
.hcp-wrap .wid { margin-bottom: var(--space-md); }
.hcp-wrap .wid-hdr { font-size: var(--text-sm); font-weight: 700; padding: var(--space-md) var(--space-md) 9px; display: flex; align-items: center; justify-content: space-between; }
.hcp-wrap .wid-hdr-left { display: flex; align-items: center; gap: 6px; }
.hcp-wrap .wid-hdr-left i { color: var(--brand-mid); }
.hcp-wrap .live-box { background: linear-gradient(135deg,#16142E,#2D2A60); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-md); border: 1px solid rgba(255,255,255,0.06); }
.hcp-wrap .live-label { font-size: var(--text-xs); color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.hcp-wrap .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; flex-shrink: 0; animation: hcpLp 1.6s ease-in-out infinite; }
@keyframes hcpLp { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hcp-wrap .live-num { font-size: var(--text-3xl); font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.hcp-wrap .live-sub { font-size: var(--text-xs); color: rgba(255,255,255,0.38); margin-top: 3px; }
.hcp-wrap .on-row { display: flex; align-items: center; gap: 9px; padding: 7px var(--space-md); }
.hcp-wrap .on-name { font-size: var(--text-sm); flex: 1; }

/* ================================================
   회원 탐색 페이지
   ================================================ */
.hcp-wrap .members-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hcp-wrap .st-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--bdr); padding: var(--space-md); display: flex; align-items: flex-start; gap: 11px; }
.hcp-wrap .st-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.hcp-wrap .si-brand { background: var(--brand-lite); color: var(--brand-mid); }
.hcp-wrap .si-green { background: var(--green-lite); color: var(--green); }
.hcp-wrap .si-gold  { background: var(--gold-lite);  color: var(--gold); }
.hcp-wrap .si-rose  { background: var(--rose-lite);  color: var(--rose); }
.hcp-wrap .st-lbl { font-size: var(--text-xs); color: var(--tx3); margin-bottom: 1px; }
.hcp-wrap .st-num { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.hcp-wrap .st-chg { font-size: var(--text-xs); color: var(--green); display: flex; align-items: center; gap: 2px; margin-top: 1px; }
.hcp-wrap .region-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.hcp-wrap .rpill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--tx2); cursor: pointer; transition: all 0.13s; }
.hcp-wrap .rpill.on, .hcp-wrap .rpill:hover { background: var(--brand-lite); border-color: var(--brand-mid); color: var(--brand); }
.hcp-wrap .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: var(--space-sm); }
.hcp-wrap .mc { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--bdr); padding: var(--space-md); text-align: center; cursor: pointer; transition: all 0.18s; }
.hcp-wrap .mc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.hcp-wrap .mc .av { margin: 0 auto 9px; }
.hcp-wrap .mc-name { font-size: var(--text-sm); font-weight: 700; margin-bottom: 2px; }
.hcp-wrap .mc-loc { font-size: var(--text-xs); color: var(--tx3); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.hcp-wrap .mc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 10px; }
.hcp-wrap .mc-acts { display: flex; gap: 6px; }
.hcp-wrap .mc-acts .btn { flex: 1; font-size: 0.66rem; padding: 5px 6px; }

/* ================================================
   그룹 페이지
   ================================================ */
.hcp-wrap .groups-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); gap: var(--space-sm); flex-wrap: wrap; }
.hcp-wrap .groups-hdr h2 { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -0.03em; }
.hcp-wrap .groups-hdr p { color: var(--tx3); font-size: var(--text-sm); margin-top: 3px; }
.hcp-wrap .gcat-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.hcp-wrap .gcat { display: flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; color: var(--tx2); border: 1px solid var(--bdr); background: var(--surface); cursor: pointer; transition: all 0.13s; }
.hcp-wrap .gcat:hover { background: var(--bg); }
.hcp-wrap .gcat.on { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
.hcp-wrap .gcat i { font-size: 0.88rem; }
.hcp-wrap .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--space-md); }
.hcp-wrap .gc { cursor: pointer; transition: all 0.18s; }
.hcp-wrap .gc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.hcp-wrap .gc-cover { height: 82px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hcp-wrap .gc-cover i { font-size: 2.1rem; color: rgba(255,255,255,0.42); }
.hcp-wrap .gc-body { padding: var(--space-md); }
.hcp-wrap .gc-cat { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); margin-bottom: 4px; }
.hcp-wrap .gc-name { font-size: var(--text-base); font-weight: 800; margin-bottom: 4px; }
.hcp-wrap .gc-desc { font-size: var(--text-xs); color: var(--tx3); line-height: 1.55; margin-bottom: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcp-wrap .gc-footer { padding: 8px var(--space-md); border-top: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.hcp-wrap .gc-footer-link { cursor: pointer; }
.hcp-wrap .gc-footer-link:hover { text-decoration: none; color: inherit; }
.hcp-wrap .gc-footer-actions { flex-shrink: 0; }
.hcp-wrap .gc-members { display: flex; align-items: center; }
.hcp-wrap .gc-members .av { border: 2px solid var(--surface); margin-right: -5px; }
.hcp-wrap .gc-mem-cnt { font-size: var(--text-xs); color: var(--tx3); margin-left: 10px; }
/* 그룹 상세: .page-wrap(1100px) 안에서 목록·피드와 동일한 가로 폭 */
.hcp-wrap .gc-single { width: 100%; max-width: 100%; box-sizing: border-box; }
.hcp-wrap .gc-single:hover { transform: none; box-shadow: var(--sh-md); }

/* ================================================
   찬양 페이지
   ================================================ */
.hcp-wrap .worship-layout { display: grid; grid-template-columns: 1fr 270px; gap: var(--space-md); }
.hcp-wrap .now-playing-card { background: linear-gradient(135deg,#0F0E28,#2D2A60); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-md); position: relative; overflow: hidden; }
.hcp-wrap .now-playing-card::after { content:''; position:absolute; right:-30px; top:-50px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle,rgba(245,158,11,0.13),transparent 70%); }
.hcp-wrap .np-header { margin-bottom: var(--space-md); }
.hcp-wrap .np-header h2 { font-size: var(--text-2xl); font-weight: 900; color: #fff; letter-spacing: -0.03em; }
.hcp-wrap .np-header p { font-size: var(--text-sm); color: rgba(255,255,255,0.45); margin-top: 3px; }
.hcp-wrap .np-body { background: rgba(255,255,255,0.06); border-radius: var(--radius-md); padding: var(--space-md); border: 1px solid rgba(255,255,255,0.07); position: relative; z-index: 1; }
.hcp-wrap .np-lbl { font-size: var(--text-xs); color: rgba(255,255,255,0.38); display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.hcp-wrap .np-song { font-size: var(--text-base); font-weight: 700; color: #fff; }
.hcp-wrap .np-artist { font-size: var(--text-xs); color: rgba(255,255,255,0.48); margin-top: 2px; }
.hcp-wrap .np-track { height: 3px; background: rgba(255,255,255,0.14); border-radius: 99px; margin: 10px 0 4px; }
.hcp-wrap .np-fill { width: 34%; height: 100%; background: var(--gold-bright); border-radius: 99px; }
.hcp-wrap .np-times { display: flex; justify-content: space-between; font-size: 0.62rem; color: rgba(255,255,255,0.32); }
.hcp-wrap .np-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hcp-wrap .np-btn { color: rgba(255,255,255,0.48); font-size: 1rem; cursor: pointer; transition: color 0.13s; }
.hcp-wrap .np-btn:hover { color: #fff; }
.hcp-wrap .np-btn.main { font-size: 1.45rem; color: #fff; }
.hcp-wrap .np-listeners { margin-left: auto; font-size: var(--text-xs); color: rgba(255,255,255,0.32); display:flex; align-items:center; gap:4px; }
.hcp-wrap .worship-item { margin-bottom: var(--space-sm); cursor: pointer; transition: box-shadow 0.14s; }
.hcp-wrap .worship-item:hover { box-shadow: var(--sh-md); }
.hcp-wrap .wi-inner { display: flex; align-items: center; gap: 11px; padding: var(--space-sm) var(--space-md); }
.hcp-wrap .wi-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; color: rgba(255,255,255,0.65); position: relative; }
.hcp-wrap .wi-thumb-badge { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #FF0000; display: flex; align-items: center; justify-content: center; }
.hcp-wrap .wi-thumb-badge i { font-size: 0.5rem; color: #fff; }
.hcp-wrap .wi-info { flex: 1; min-width: 0; }
.hcp-wrap .wi-title { font-size: var(--text-sm); font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcp-wrap .wi-meta { font-size: var(--text-xs); color: var(--tx3); display:flex; align-items:center; gap:6px; margin-top:2px; }
.hcp-wrap .wi-play { color: var(--tx3); font-size: 1.4rem; flex-shrink: 0; transition: color 0.13s; }
.hcp-wrap .worship-item:hover .wi-play { color: var(--brand-mid); }

/* ================================================
   기도벽
   ================================================ */
.hcp-wrap .prayer-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-md); align-items: start; }
.hcp-wrap .prayer-banner { background: linear-gradient(135deg,#16142E 0%,#2D2A60 55%,#16142E 100%); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); position: relative; overflow: hidden; }
.hcp-wrap .prayer-banner::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle,rgba(79,70,229,0.28) 0%,transparent 70%); }
.hcp-wrap .prayer-banner-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hcp-wrap .p-card { margin-bottom: var(--space-md); transition: box-shadow 0.14s; }
.hcp-wrap .p-card:hover { box-shadow: var(--sh-md); }
.hcp-wrap .p-hdr { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-md) var(--space-md) 0; }
.hcp-wrap .p-meta { flex: 1; }
.hcp-wrap .p-author { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.hcp-wrap .p-time { font-size: var(--text-xs); color: var(--tx3); margin-top: 1px; display: flex; align-items: center; gap: 3px; }
.hcp-wrap .p-answered { background: linear-gradient(135deg,var(--green),var(--teal)); color: #fff; font-size: var(--text-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.hcp-wrap .p-content { padding: 8px var(--space-md); font-size: var(--text-sm); line-height: 1.75; color: var(--tx2); }
.hcp-wrap .p-footer { padding: 8px var(--space-md); border-top: 1px solid var(--bdr); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hcp-wrap .pray-btn { display: flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; border: 1.5px solid var(--rose); color: var(--rose); background: transparent; transition: all 0.14s; }
.hcp-wrap .pray-btn:hover, .hcp-wrap .pray-btn.on { background: var(--rose); color: #fff; }
.hcp-wrap .pray-cnt { font-size: var(--text-xs); color: var(--tx3); margin-right: auto; }

/* ================================================
   프로필 팝업 (테마 무관 — joyn-kr-demo_2.html 기준)
   #hcp-prof-popup 단일 루트로 스코프·변수 격리
   ================================================ */
#hcp-prof-popup {
  /* 디자인 토큰 재정의: 테마 CSS 변수 침범 방지 */
  --hcp-pp-surface: #FFFFFF;
  --hcp-pp-surf2: #F7F8FC;
  --hcp-pp-bdr: rgba(0,0,0,0.07);
  --hcp-pp-tx1: #0F0E28;
  --hcp-pp-tx2: #4B5563;
  --hcp-pp-tx3: #9CA3AF;
  --hcp-pp-brand: #4F46E5;
  --hcp-pp-brand-dark: #2921A8;
  --hcp-pp-bg: #F0F2F9;
  --hcp-pp-green: #16A34A;
  --hcp-pp-radius-sm: 8px;
  --hcp-pp-radius-md: 14px;
  --hcp-pp-radius-lg: 20px;
  --hcp-pp-text-xs: 0.76rem;
  --hcp-pp-text-sm: 0.88rem;
  --hcp-pp-text-base: 0.98rem;
  --hcp-pp-sh-brand: 0 4px 18px rgba(59,47,217,0.22);

  display: none;
  position: fixed;
  z-index: 9999;
  width: 300px;
  background: var(--hcp-pp-surface);
  border-radius: var(--hcp-pp-radius-lg);
  border: 1px solid var(--hcp-pp-bdr);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  animation: hcpPpFadeIn 0.16s ease-out;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--hcp-pp-text-base);
  color: var(--hcp-pp-tx1);
  line-height: 1.6;
  box-sizing: border-box;
}
#hcp-prof-popup *,
#hcp-prof-popup *::before,
#hcp-prof-popup *::after {
  box-sizing: border-box;
}
@keyframes hcpPpFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#hcp-prof-popup.open { display: block; }

#hcp-prof-popup .pp-cover {
  height: 64px;
  position: relative;
}
#hcp-prof-popup .pp-cover-inner {
  height: 100%;
  border-radius: 0;
}
#hcp-prof-popup .pp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
}
#hcp-prof-popup .pp-close:hover {
  background: rgba(0,0,0,0.55);
}

#hcp-prof-popup .pp-av-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 14px;
  margin-top: -24px;
  margin-bottom: 8px;
}
#hcp-prof-popup .pp-av-wrap .av {
  border: 3px solid var(--hcp-pp-surface);
  flex-shrink: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
#hcp-prof-popup .pp-av-wrap .av-56 {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  font-size: 1.1rem;
}
#hcp-prof-popup .pp-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--hcp-pp-surface);
  position: absolute;
  bottom: 2px;
  right: 2px;
}
#hcp-prof-popup .pp-online-dot.on { background: var(--hcp-pp-green); }
#hcp-prof-popup .pp-online-dot.off { background: var(--hcp-pp-tx3); }

#hcp-prof-popup .pp-quick-acts {
  display: flex;
  gap: 6px;
}
#hcp-prof-popup .pp-quick-acts .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--hcp-pp-text-xs);
  font-weight: 600;
  border-radius: var(--hcp-pp-radius-sm);
  transition: all 0.14s;
  white-space: nowrap;
  cursor: pointer;
}
#hcp-prof-popup .pp-quick-acts .btn i { font-size: 1em; }
#hcp-prof-popup .pp-quick-acts .btn-outline {
  background: transparent;
  color: var(--hcp-pp-tx2);
  border: 1px solid var(--hcp-pp-bdr);
}
#hcp-prof-popup .pp-quick-acts .btn-outline:hover {
  background: var(--hcp-pp-bg);
  color: var(--hcp-pp-tx1);
}
#hcp-prof-popup .pp-quick-acts .btn-brand {
  background: var(--hcp-pp-brand);
  color: #fff;
  border: none;
  box-shadow: var(--hcp-pp-sh-brand);
}
#hcp-prof-popup .pp-quick-acts .btn-brand:hover {
  background: var(--hcp-pp-brand-dark);
}

#hcp-prof-popup .pp-body {
  padding: 0 14px 12px;
}
#hcp-prof-popup .pp-name {
  font-size: var(--hcp-pp-text-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  color: var(--hcp-pp-tx1);
}
#hcp-prof-popup .pp-role {
  font-size: var(--hcp-pp-text-xs);
  color: var(--hcp-pp-tx3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#hcp-prof-popup .pp-role i {
  font-size: 0.75rem;
}
#hcp-prof-popup .pp-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 7px 0;
}
#hcp-prof-popup .pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hcp-pp-bdr);
  border-radius: var(--hcp-pp-radius-md);
  overflow: hidden;
  margin: 10px 0;
}
#hcp-prof-popup .pp-stat {
  background: var(--hcp-pp-surface);
  padding: 8px 4px;
  text-align: center;
}
#hcp-prof-popup .pp-stat-num {
  font-size: var(--hcp-pp-text-sm);
  font-weight: 800;
  color: var(--hcp-pp-tx1);
}
#hcp-prof-popup .pp-stat-lbl {
  font-size: 0.62rem;
  color: var(--hcp-pp-tx3);
}
#hcp-prof-popup .pp-preview {
  background: var(--hcp-pp-surf2);
  border-radius: var(--hcp-pp-radius-sm);
  padding: 8px 10px;
  margin: 8px 0;
  font-size: var(--hcp-pp-text-xs);
  color: var(--hcp-pp-tx2);
  line-height: 1.6;
  border-left: 3px solid var(--hcp-pp-brand);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#hcp-prof-popup .bdg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--hcp-pp-text-xs);
  font-weight: 600;
}
#hcp-prof-popup .bd-verified {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff;
}
#hcp-prof-popup .g1 { background: linear-gradient(135deg, #3B2FD9, #7C3AED); }
#hcp-prof-popup .g2 { background: linear-gradient(135deg, #0EA5E9, #0284C7); }
#hcp-prof-popup .g3 { background: linear-gradient(135deg, #16A34A, #0D9488); }
#hcp-prof-popup .g4 { background: linear-gradient(135deg, #D97706, #EF4444); }
#hcp-prof-popup .g5 { background: linear-gradient(135deg, #EC4899, #F43F5E); }
#hcp-prof-popup .g6 { background: linear-gradient(135deg, #8B5CF6, #3B82F6); }
#hcp-prof-popup .g7 { background: linear-gradient(135deg, #F59E0B, #10B981); }
#hcp-prof-popup .g8 { background: linear-gradient(135deg, #0F766E, #0EA5E9); }

/* ================================================
   쪽지 모달
   ================================================ */
#hcp-dm-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: var(--space-md); }
#hcp-dm-overlay.open { display: flex; }
.hcp-wrap .dm-modal { background: var(--surface); border-radius: var(--radius-xl); width: min(480px,96vw); box-shadow: var(--sh-lg); overflow: hidden; animation: hcpDmSlide 0.2s ease-out; }
@keyframes hcpDmSlide { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.hcp-wrap .dm-header { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--bdr); }
.hcp-wrap .dm-header-info { flex: 1; }
.hcp-wrap .dm-header-title { font-size: var(--text-base); font-weight: 700; }
.hcp-wrap .dm-header-sub { font-size: var(--text-xs); color: var(--tx3); margin-top: 1px; }
.hcp-wrap .dm-close { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--tx2); font-size: 1rem; cursor: pointer; transition: background 0.12s; }
.hcp-wrap .dm-close:hover { background: var(--bdr); }
.hcp-wrap .dm-body { padding: 16px 18px; }
.hcp-wrap .dm-to-row { display: flex; align-items: center; gap: 9px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--radius-md); padding: 9px 12px; margin-bottom: 10px; }
.hcp-wrap .dm-to-label { font-size: var(--text-xs); color: var(--tx3); font-weight: 600; width: 28px; flex-shrink: 0; }
.hcp-wrap .dm-to-name { font-size: var(--text-sm); font-weight: 600; flex: 1; }
.hcp-wrap .dm-subject { width: 100%; background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--radius-md); padding: 9px 12px; font-family: inherit; outline: none; transition: border-color 0.13s; margin-bottom: 10px; color: var(--tx1); }
.hcp-wrap .dm-subject:focus { border-color: var(--brand-mid); background: var(--surface); }
.hcp-wrap .dm-textarea { width: 100%; background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--radius-md); padding: 11px 12px; font-family: inherit; resize: none; min-height: 130px; outline: none; transition: border-color 0.13s; line-height: 1.65; color: var(--tx1); }
.hcp-wrap .dm-textarea:focus { border-color: var(--brand-mid); background: var(--surface); }
.hcp-wrap .dm-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 16px; border-top: 1px solid var(--bdr); }
.hcp-wrap .dm-tools { display: flex; gap: 4px; }
.hcp-wrap .dm-tool-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 1rem; transition: background 0.12s; }
.hcp-wrap .dm-tool-btn:hover { background: var(--bg); color: var(--tx2); }
.hcp-wrap .dm-char-count { font-size: var(--text-xs); color: var(--tx3); }
.hcp-wrap .dm-actions { display: flex; gap: 7px; align-items: center; }

/* ================================================
   토스트 알림
   ================================================ */
.dm-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1a1a2e; color: #fff; padding: 10px 18px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--sh-lg); opacity: 0; transition: all 0.3s ease;
  z-index: 999; pointer-events: none; white-space: nowrap;
}
.dm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dm-toast i { color: var(--green); font-size: 1rem; }

/* ================================================
   공통 오버레이 모달 (그룹·기도·게시글 작성)
   ================================================ */
#hcp-compose-overlay,
#hcp-group-create-overlay,
#hcp-prayer-create-overlay {
  display: none; position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: var(--space-md);
}
#hcp-compose-overlay.open,
#hcp-group-create-overlay.open,
#hcp-prayer-create-overlay.open { display: flex; }
.hcp-wrap .hcp-modal-box {
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--sh-lg); overflow: hidden; animation: hcpModalIn 0.2s ease-out;
}
@keyframes hcpModalIn { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.hcp-wrap .hcp-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--bdr);
}

/* ================================================
   프로필 페이지
   ================================================ */
.hcp-wrap .profile-layout { display: grid; grid-template-columns: 290px 1fr; gap: var(--space-md); align-items: start; }
.hcp-wrap .profile-cover { height: 96px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hcp-wrap .profile-body { padding: 0 var(--space-md) var(--space-md); text-align: center; }
.hcp-wrap .profile-av-wrap { display:flex; justify-content:center; margin-top:-36px; margin-bottom:10px; }
.hcp-wrap .profile-av-wrap .av { border:3px solid var(--surface); }
.hcp-wrap .prof-name { font-size: var(--text-xl); font-weight: 800; letter-spacing:-0.02em; margin-bottom:2px; }
.hcp-wrap .prof-role { font-size: var(--text-xs); color: var(--tx3); margin-bottom:9px; }
.hcp-wrap .prof-badges { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:13px; }
.hcp-wrap .prof-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background: var(--bdr); border-radius: var(--radius-md); overflow:hidden; margin-bottom:13px; }
.hcp-wrap .ps-cell { background: var(--surface); padding:9px 6px; text-align:center; }
.hcp-wrap .ps-num { font-size: var(--text-lg); font-weight:800; }
.hcp-wrap .ps-lbl { font-size: var(--text-xs); color: var(--tx3); }
.hcp-wrap .prof-acts { display:flex; gap:7px; }
.hcp-wrap .prof-acts .btn { flex:1; }
.hcp-wrap .prof-info { padding: var(--space-md); border-top: 1px solid var(--bdr); }
.hcp-wrap .prof-info-ttl { font-size: var(--text-xs); font-weight:700; color: var(--tx3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.hcp-wrap .prof-info-row { display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size: var(--text-sm); }
.hcp-wrap .prof-info-row i { color: var(--tx3); font-size:0.88rem; width:15px; text-align:center; }
.hcp-wrap .profile-tabs { display:flex; border-bottom:2px solid var(--bdr); margin-bottom: var(--space-md); }
.hcp-wrap .ptab { padding:9px 18px; font-size: var(--text-sm); font-weight:600; color: var(--tx3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.13s; display:flex; align-items:center; gap:5px; }
.hcp-wrap .ptab.on { color: var(--brand-mid); border-bottom-color: var(--brand-mid); }

/* ================================================
   로그인 안내
   ================================================ */
.hcp-login-required {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; text-align: center; color: var(--tx3);
  font-size: var(--text-sm);
}

/* ================================================
   반응형 — 레이아웃 구조 변경만 (2개 미디어 쿼리)
   설계 가이드: 미디어 쿼리 2~3개 max
   ================================================ */
@media (max-width: 1080px) {
  .hcp-wrap .feed-layout,
  .hcp-wrap .prayer-layout,
  .hcp-wrap .worship-layout { grid-template-columns: 1fr; }
  .hcp-wrap .feed-right,
  .hcp-wrap .prayer-right,
  .hcp-wrap .worship-right { display: none; }
  .hcp-wrap .profile-layout { grid-template-columns: 1fr; }
  .hcp-wrap .members-stats { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .hcp-wrap .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
  .hcp-wrap .sidebar.open { transform: translateX(0); }
  .hcp-wrap .main { margin-left: 0; }
  .hcp-wrap .tb-search { display: none; }
  .hcp-wrap .groups-grid { grid-template-columns: 1fr; }
  .hcp-wrap .members-stats { grid-template-columns: repeat(2,1fr); }
  .hcp-wrap .page-wrap { padding: var(--space-md) clamp(10px, 3vw, var(--space-lg)); }
}

/* ================================================
   그룹 셸: joyn-members-pro 마이페이지 동일 하단 네비 (모바일만)
   ================================================ */
@media (min-width: 769px) {
  #jmp-mypage-bottom-nav.hcp-shell-bottom-nav {
    display: none !important;
  }
}
@media (max-width: 768px) {
  body.hcp-group-shell-nav .hcp-wrap > .main {
    padding-bottom: 72px;
  }
}

/* ================================================================
   Groups v2.1 — 모달 시스템 & 반응형 전면 수정
   ================================================================ */

/* ── 공용 모달 오버레이 ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15,14,40,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }

/* ── 모달 박스 ── */
.modal-overlay .modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--sh-lg);
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: modalSlideIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  margin: auto;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── 모달 헤더 ── */
.modal-overlay .modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bdr);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-overlay .modal-hdr-title {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-overlay .modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--tx3);
  transition: all 0.13s;
  flex-shrink: 0;
}
.modal-overlay .modal-close:hover { background: var(--bdr); color: var(--tx1); }

/* ── 모달 바디 ── */
.modal-overlay .modal-body {
  padding: 20px;
}

/* ── 모달 푸터 ── */
.modal-overlay .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--bdr);
  background: var(--surf2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ── form-label ── */
.modal-overlay .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: 6px;
}

/* ── 글쓰기 타입 탭 (가로 강제) ── */
.write-type-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.write-type-tabs::-webkit-scrollbar { display: none; }
.write-type-tabs .wtt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  border: 1px solid var(--bdr);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  flex-shrink: 0;
}
.write-type-tabs .wtt.on { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }

/* ── 그룹 목록 툴바 (검색+정렬 가로) ── */
.hcp-wrap .groups-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-md);
  align-items: center;
}
.hcp-wrap .groups-toolbar .search-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-md);
  padding: 0 12px;
  transition: border-color 0.13s;
}
.hcp-wrap .groups-toolbar .search-box:focus-within { border-color: var(--brand-mid); }
.hcp-wrap .groups-toolbar .search-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 16px; /* iOS zoom 방지 */
  padding: 10px 0;
  color: var(--tx1);
}
.hcp-wrap .groups-toolbar .search-box input::placeholder { color: var(--tx3); }
.hcp-wrap .groups-toolbar select {
  font-size: 16px;
  padding: 10px 12px;
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--tx1);
  min-width: 100px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.13s;
  appearance: auto;
}
.hcp-wrap .groups-toolbar select:focus { border-color: var(--brand-mid); }

/* ── 그룹 목록 헤더 ── */
.hcp-wrap .groups-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.hcp-wrap .groups-hdr h2 { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -0.03em; }
.hcp-wrap .groups-hdr p { color: var(--tx3); font-size: var(--text-sm); margin-top: 3px; }
.hcp-wrap .groups-hdr-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ── 카테고리 필터 가로 스크롤 ── */
.hcp-wrap .gcat-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: var(--space-md);
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hcp-wrap .gcat-row::-webkit-scrollbar { display: none; }
.hcp-wrap .gcat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  border: 1.5px solid var(--bdr);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hcp-wrap .gcat:hover { background: var(--bg); }
.hcp-wrap .gcat.on { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
.hcp-wrap .gcat i { font-size: 0.9rem; }

/* ── 그룹 그리드 ── */
.hcp-wrap .groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr));
  gap: var(--space-md);
}

/* ── 그룹 카드 ── */
.hcp-wrap .gc {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.hcp-wrap .gc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.hcp-wrap .gc-cover {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.hcp-wrap .gc-cover i { font-size: 2.2rem; color: rgba(255,255,255,0.4); }
.hcp-wrap .gc-body { padding: var(--space-md); }
.hcp-wrap .gc-cat {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx3);
  margin-bottom: 4px;
}
.hcp-wrap .gc-name { font-size: var(--text-base); font-weight: 800; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hcp-wrap .gc-desc {
  font-size: var(--text-xs);
  color: var(--tx3);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcp-wrap .gc-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.hcp-wrap .gc-stat { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--tx3); }
.hcp-wrap .gc-stat i { font-size: 0.8rem; }
.hcp-wrap .gc-footer {
  padding: 10px var(--space-md);
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.hcp-wrap .gc-members { display: flex; align-items: center; }
.hcp-wrap .gc-members .av { border: 2px solid var(--surface); margin-right: -6px; }
.hcp-wrap .gc-mem-cnt { font-size: var(--text-xs); color: var(--tx3); margin-left: 14px; }
.hcp-wrap .gc-footer-actions { flex-shrink: 0; }
.hcp-wrap .gc-card-link { text-decoration: none; color: inherit; display: block; }
.hcp-wrap .gc-footer-link { cursor: pointer; text-decoration: none; color: inherit; display: flex; align-items: center; flex: 1; min-width: 0; }

/* ── 섹션 레이블 ── */
.hcp-wrap .section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: 700;
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--tx2);
}

/* ── 그룹 상세 레이아웃 ── */
.hcp-wrap .gs-layout {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.hcp-wrap .gs-body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-md);
  align-items: start;
}
.hcp-wrap .gs-main { min-width: 0; }
.hcp-wrap .gs-sidebar { position: sticky; top: 16px; }

/* ── 히어로 ── */
.hcp-wrap .gs-hero {
  border-radius: var(--radius-xl);
  padding: clamp(16px,4vw,28px) clamp(16px,4vw,24px);
  display: flex;
  align-items: center;
  gap: clamp(10px,2vw,16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
}
.hcp-wrap .gs-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}
.hcp-wrap .gs-hero > * { position: relative; z-index: 1; }
.hcp-wrap .gs-hero-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  flex-shrink: 0;
}
.hcp-wrap .gs-hero-info { flex: 1; min-width: 0; }
.hcp-wrap .gs-hero-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 4px;
}
.hcp-wrap .gs-hero-name {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.hcp-wrap .gs-hero-meta {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
  flex-wrap: wrap;
}
.hcp-wrap .gs-hero-meta span { display: flex; align-items: center; gap: 4px; }
.hcp-wrap .gs-hero-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.hcp-wrap .gs-hero-action {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.hcp-wrap .gs-hero-action:hover { background: rgba(255,255,255,0.35); }

/* ── 액션 바 ── */
.hcp-wrap .gs-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

/* ── 탭 (가로 스크롤) ── */
.hcp-wrap .gs-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--space-sm);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hcp-wrap .gs-tabs::-webkit-scrollbar { display: none; }
.hcp-wrap .gs-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--bdr);
}
.hcp-wrap .gs-tab:hover { background: var(--bg); }
.hcp-wrap .gs-tab.on { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
.hcp-wrap .gs-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0 4px;
  background: var(--rose);
  color: #fff;
}

/* ── 탭 컨텐츠 ── */
.hcp-wrap .gs-tc { animation: fadeIn 0.15s ease-out; }
.hcp-wrap .gs-tc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: 8px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 글쓰기 박스 ── */
.hcp-wrap .gwrite { padding: var(--space-md); overflow: hidden; }
.hcp-wrap .gwrite-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-sm); }
.hcp-wrap .gwrite-ph {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--tx3);
  cursor: pointer;
  transition: border-color 0.13s;
}
.hcp-wrap .gwrite-ph:hover { border-color: var(--brand-mid); }
.hcp-wrap .gwrite-actions {
  display: flex;
  gap: 2px;
  border-top: 1px solid var(--bdr);
  padding-top: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.hcp-wrap .gwrite-actions::-webkit-scrollbar { display: none; }
.hcp-wrap .gfa {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hcp-wrap .gfa:hover { background: var(--bg); color: var(--brand-mid); }
.hcp-wrap .gfa i { font-size: 1rem; }

/* ── 피드 포스트 ── */
.hcp-wrap .gp-card { transition: box-shadow 0.13s; }
.hcp-wrap .gp-card:hover { box-shadow: var(--sh-md); }
.hcp-wrap .gpa { cursor: pointer; }

/* ── 공지 ── */
.hcp-wrap .ann-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 8px;
}
.hcp-wrap .ann-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.hcp-wrap .ann-body { flex: 1; min-width: 0; }
.hcp-wrap .ann-title { font-size: var(--text-sm); margin-bottom: 3px; }
.hcp-wrap .ann-meta { font-size: var(--text-xs); color: var(--tx3); }

/* ── 일정 ── */
.hcp-wrap .ev-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 8px;
}
.hcp-wrap .ev-date { text-align: center; min-width: 44px; flex-shrink: 0; }
.hcp-wrap .ev-day { font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--brand-mid); }
.hcp-wrap .ev-month { font-size: var(--text-xs); color: var(--tx3); }
.hcp-wrap .ev-body { flex: 1; min-width: 0; }
.hcp-wrap .ev-title { font-size: var(--text-sm); margin-bottom: 4px; }
.hcp-wrap .ev-meta { font-size: var(--text-xs); color: var(--tx3); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.hcp-wrap .ev-rsvp { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ── 멤버 탭 ── */
.hcp-wrap .mbf-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.hcp-wrap .mbf {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--tx2);
  border: 1.5px solid var(--bdr);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.13s;
}
.hcp-wrap .mbf.on,
.hcp-wrap .mbf:hover { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
.hcp-wrap .mb-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.hcp-wrap .mb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bdr);
}
.hcp-wrap .mb-row:last-child { border-bottom: none; }
.hcp-wrap .mb-info { flex: 1; min-width: 0; }
.hcp-wrap .mb-name {
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hcp-wrap .mb-detail { font-size: var(--text-xs); color: var(--tx3); margin-top: 2px; }

/* ── 채팅 ── */
.hcp-wrap .chat-wrap {
  display: flex;
  flex-direction: column;
  height: clamp(320px, 50vh, 520px);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.hcp-wrap .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hcp-wrap .chat-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--space-md);
  border-top: 1px solid var(--bdr);
  background: var(--surf2);
}
.hcp-wrap .chat-tools { display: flex; gap: 2px; }
.hcp-wrap .chat-tool {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--tx3);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.13s;
}
.hcp-wrap .chat-tool:hover { background: var(--bg); color: var(--brand-mid); }
.hcp-wrap .chat-input {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-full);
  padding: 9px 14px;
  font-size: 16px;
  color: var(--tx1);
  outline: none;
  transition: border-color 0.13s;
  min-width: 0;
}
.hcp-wrap .chat-input:focus { border-color: var(--brand-mid); }
.hcp-wrap .chat-msg { display: flex; gap: 8px; }
.hcp-wrap .chat-msg.mine { flex-direction: row-reverse; }
.hcp-wrap .chat-bubble {
  max-width: 68%;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 9px 13px;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.hcp-wrap .chat-msg.mine .chat-bubble { background: var(--brand-mid); color: #fff; }
.hcp-wrap .chat-meta { font-size: 0.65rem; color: var(--tx3); margin-top: 4px; }
.hcp-wrap .chat-msg.mine .chat-meta { text-align: right; }

/* ── 미디어 ── */
.hcp-wrap .media-tabs { display: flex; gap: 6px; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.hcp-wrap .mdt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx2);
  border: 1.5px solid var(--bdr);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.13s;
}
.hcp-wrap .mdt.on { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
.hcp-wrap .media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.hcp-wrap .mg-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.hcp-wrap .mg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.hcp-wrap .mg-item:hover img { transform: scale(1.05); }

/* ── 기도제목 ── */
.hcp-wrap .prayer-card {
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.hcp-wrap .prayer-footer {
  display: flex;
  align-items: center;
  padding: 8px var(--space-md);
  gap: 4px;
}

/* ── 통계 ── */
.hcp-wrap .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.hcp-wrap .stat-card {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hcp-wrap .stat-card-icon { font-size: 1.3rem; color: var(--brand-mid); }
.hcp-wrap .stat-card-val { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; color: var(--tx1); }
.hcp-wrap .stat-card-lbl { font-size: var(--text-xs); color: var(--tx3); }

/* ── 설정 폼 ── */
.hcp-wrap .sf-section { margin-bottom: var(--space-sm); }
.hcp-wrap .sf-row { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-sm); }
.hcp-wrap .sf-row:last-child { margin-bottom: 0; }
.hcp-wrap .sf-label { min-width: 90px; font-size: var(--text-sm); font-weight: 600; color: var(--tx2); padding-top: 9px; }
.hcp-wrap .sf-control { flex: 1; min-width: 0; }
.hcp-wrap .danger-zone .sf-row { justify-content: space-between; align-items: center; }

/* ── 사이드바 위젯 ── */
.hcp-wrap .gs-widget { overflow: hidden; margin-bottom: var(--space-sm); }
.hcp-wrap .gs-widget-title { font-weight: 700; font-size: var(--text-sm); margin-bottom: 10px; }
.hcp-wrap .gs-widget-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: 6px; }
.hcp-wrap .gs-ws { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); }
.hcp-wrap .gs-ws i { color: var(--brand-mid); }

/* ── 빈 상태 ── */
.hcp-wrap .gs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--tx3);
}
.hcp-wrap .gs-empty i { font-size: 2rem; display: block; margin-bottom: 10px; }

/* ── 핀 바 ── */
.hcp-wrap .pin-bar {
  background: var(--brand-lite);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 5px var(--space-md);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ================================================================
   반응형 — 그룹 전용
   ================================================================ */

/* 태블릿 */
@media (max-width: 960px) {
  .hcp-wrap .gs-body {
    grid-template-columns: 1fr;
  }
  .hcp-wrap .gs-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
  }
  .hcp-wrap .gs-sidebar .gs-widget { margin-bottom: 0; }
  .hcp-wrap .groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr));
  }
}

/* 모바일 */
@media (max-width: 640px) {
  .hcp-wrap .gs-layout { padding: var(--space-sm); }
  .hcp-wrap .gs-hero { padding: 16px; }
  .hcp-wrap .gs-hero-icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .hcp-wrap .gs-hero-name { font-size: 1.1rem; }
  .hcp-wrap .gs-hero-actions { display: none; }   /* 히어로 액션 모바일 숨김 */
  .hcp-wrap .gs-action-bar { justify-content: stretch; }
  .hcp-wrap .gs-action-bar .btn { flex: 1; justify-content: center; }
  .hcp-wrap .gs-sidebar { grid-template-columns: 1fr; }
  .hcp-wrap .groups-hdr { flex-direction: column; align-items: flex-start; }
  .hcp-wrap .groups-hdr-actions { width: 100%; }
  .hcp-wrap .groups-hdr-actions .btn { flex: 1; justify-content: center; }
  .hcp-wrap .groups-toolbar { flex-direction: column; }
  .hcp-wrap .groups-toolbar select { width: 100%; }
  .hcp-wrap .stats-grid { grid-template-columns: 1fr 1fr; }
  .hcp-wrap .sf-row { flex-direction: column; gap: 4px; }
  .hcp-wrap .sf-label { padding-top: 0; min-width: unset; }
  .hcp-wrap .groups-grid { grid-template-columns: 1fr; }
  .modal-overlay .modal { border-radius: var(--radius-lg); }
  /* 모달 모바일: 하단 시트 스타일 */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-overlay .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh;
    animation: modalSlideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* 모달 헤더 핸들바 (모바일) */
  .modal-overlay .modal-hdr::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--bdr);
    border-radius: 2px;
  }
  .modal-overlay .modal-hdr { padding-top: 22px; }
  .hcp-wrap .chat-tools { display: none; }
  .hcp-wrap .ev-rsvp .btn { padding: 5px 8px; font-size: 0.7rem; }
}

/* ── inp (input/select/textarea 공통) 폰트 16px 강제 (iOS zoom 방지) ── */
.hcp-wrap .inp,
.modal-overlay input[type="text"],
.modal-overlay input[type="datetime-local"],
.modal-overlay select,
.modal-overlay textarea {
  font-size: 16px !important;
  font-family: inherit;
  color: var(--tx1);
  background: var(--bg);
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.13s;
  width: 100%;
  box-sizing: border-box;
}
.hcp-wrap .inp:focus,
.modal-overlay input:focus,
.modal-overlay select:focus,
.modal-overlay textarea:focus {
  border-color: var(--brand-mid);
  background: var(--surface);
}

/* ================================================================
   Topbar v2.1 — 전면 재작성
   ================================================================ */

/* ── 기존 .topbar → .hcp-topbar 추가 ── */
.hcp-wrap .hcp-topbar {
  height: var(--tb-h);
  background: var(--surface);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  padding: 0 clamp(12px, 2vw, 24px);
  gap: clamp(8px, 1.5vw, 16px);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 var(--bdr);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 제목 ── */
.hcp-wrap .hcp-tb-title {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--tx1);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 검색창 ── */
.hcp-wrap .hcp-tb-search {
  flex: 1;
  min-width: 0;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius-full);
  padding: 0 16px;
  border: 1.5px solid transparent;
  height: 38px;
  transition: border-color 0.14s, box-shadow 0.14s;
  position: relative;
  cursor: text;
}
.hcp-wrap .hcp-tb-search:focus-within {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  background: var(--surface);
}
.hcp-wrap .hcp-tb-search > i { color: var(--tx3); font-size: 0.9rem; flex-shrink: 0; }
.hcp-wrap .hcp-tb-search input {
  border: none !important;
  background: none !important;
  outline: none !important;
  font-family: inherit;
  font-size: 14px !important;
  color: var(--tx1);
  flex: 1;
  min-width: 0;
  padding: 0 !important;
}
.hcp-wrap .hcp-tb-search input::placeholder { color: var(--tx3); }

/* ── 검색 드롭다운 ── */
.hcp-wrap .hcp-tb-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
  z-index: 300;
  display: none;
  overflow: hidden;
}
.hcp-wrap .hcp-tb-search:focus-within .hcp-tb-search-dropdown { display: block; }
.hcp-wrap .hcp-tb-sd-hint {
  padding: 20px;
  text-align: center;
  color: var(--tx3);
  font-size: var(--text-sm);
}
.hcp-wrap .hcp-tb-sd-section { padding: 8px 0; }
.hcp-wrap .hcp-tb-sd-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx3);
  padding: 4px 14px;
}
.hcp-wrap .hcp-tb-sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: var(--text-sm);
  color: var(--tx1);
  cursor: pointer;
  transition: background 0.1s;
}
.hcp-wrap .hcp-tb-sd-item:hover { background: var(--bg); }
.hcp-wrap .hcp-tb-sd-item i { font-size: 1rem; color: var(--tx3); }

/* ── 액션 영역 ── */
.hcp-wrap .hcp-tb-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  position: relative;
}

/* ── 버튼 ── */
.hcp-wrap .hcp-tb-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx2);
  font-size: 1.1rem;
  position: relative;
  transition: background 0.13s, color 0.13s;
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
}
.hcp-wrap .hcp-tb-btn:hover { background: var(--bg); color: var(--brand-mid); }
.hcp-wrap .hcp-tb-btn.active { background: var(--brand-lite); color: var(--brand-mid); }

/* ── 알림 점 ── */
.hcp-wrap .hcp-tb-dot {
  width: 8px;
  height: 8px;
  background: var(--rose);
  border-radius: 50%;
  position: absolute;
  top: 7px;
  right: 7px;
  border: 2px solid var(--surface);
}

/* ── 아바타 ── */
.hcp-wrap .hcp-tb-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
  user-select: none;
}
.hcp-wrap .hcp-tb-av:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.2);
}

/* ── 공통 드롭다운 패널 ── */
.hcp-wrap .hcp-tb-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-xl);
  box-shadow: var(--sh-lg);
  z-index: 400;
  overflow: hidden;
  animation: tbDropIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
  display: none;
}
.hcp-wrap .hcp-tb-dropdown.open { display: block; }
@keyframes tbDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 드롭다운 공통 요소 ── */
.hcp-wrap .hcp-tbd-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx3);
  padding: 10px 14px 6px;
}
.hcp-wrap .hcp-tbd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--tx1);
  cursor: pointer;
  transition: background 0.1s;
}
.hcp-wrap .hcp-tbd-item:hover { background: var(--bg); }
.hcp-wrap .hcp-tbd-item i { font-size: 1rem; color: var(--tx3); width: 18px; text-align: center; }
.hcp-wrap .hcp-tbd-sep {
  height: 1px;
  background: var(--bdr);
  margin: 4px 0;
}
.hcp-wrap .hcp-tbd-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--tx3);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* ── 알림 아이템 ── */
.hcp-wrap .hcp-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--bdr);
}
.hcp-wrap .hcp-notif-item:last-child { border-bottom: none; }
.hcp-wrap .hcp-notif-item:hover { background: var(--bg); }
.hcp-wrap .hcp-notif-item.unread { background: var(--brand-lite); }
.hcp-wrap .hcp-notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.hcp-wrap .hcp-notif-body { flex: 1; min-width: 0; }
.hcp-wrap .hcp-notif-text { font-size: var(--text-xs); line-height: 1.5; color: var(--tx1); }
.hcp-wrap .hcp-notif-time { font-size: 0.65rem; color: var(--tx3); margin-top: 3px; }

/* ── 프로필 미니카드 ── */
.hcp-wrap .hcp-profile-card { padding: 0; }
.hcp-wrap .hcp-pc-cover {
  height: 72px;
  background: linear-gradient(135deg, var(--brand), #7C3AED);
  position: relative;
}
.hcp-wrap .hcp-pc-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  position: absolute;
  bottom: -26px;
  left: 16px;
}
.hcp-wrap .hcp-pc-body {
  padding: 34px 16px 12px;
}
.hcp-wrap .hcp-pc-name {
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tx1);
  margin-bottom: 2px;
}
.hcp-wrap .hcp-pc-email {
  font-size: var(--text-xs);
  color: var(--tx3);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hcp-wrap .hcp-pc-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--brand-lite);
  color: var(--brand-mid);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.hcp-wrap .hcp-pc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr);
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}
.hcp-wrap .hcp-pc-stat {
  background: var(--surface);
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hcp-wrap .hcp-pc-stat-val {
  font-size: var(--text-base);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--tx1);
}
.hcp-wrap .hcp-pc-stat-lbl {
  font-size: 0.6rem;
  color: var(--tx3);
}
.hcp-wrap .hcp-pc-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
}

/* ── 모바일 전용 검색 ── */
.hcp-wrap .hcp-mobile-search {
  position: sticky;
  top: var(--tb-h);
  z-index: 199;
  background: var(--surface);
  border-bottom: 1px solid var(--bdr);
}
.hcp-mobile-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.hcp-mobile-search-inner i { color: var(--tx3); font-size: 0.9rem; }
.hcp-mobile-search-inner input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  color: var(--tx1);
}
.hcp-mobile-search-btn { display: none; }

/* ── 반응형 ── */
@media (max-width: 768px) {
  .hcp-wrap .hcp-tb-search { display: none; }
  .hcp-wrap .hcp-mobile-search-btn { display: flex; }
  .hcp-wrap .hcp-tb-title { font-size: var(--text-base); }
  .hcp-wrap .hcp-tb-btn { width: 34px; height: 34px; font-size: 1rem; }
  .hcp-wrap .hcp-tb-av { width: 32px; height: 32px; font-size: 0.75rem; }
  /* 드롭다운: 전체 너비 */
  .hcp-wrap .hcp-tb-dropdown {
    position: fixed;
    top: var(--tb-h);
    left: 8px;
    right: 8px;
    width: auto;
    min-width: unset !important;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .hcp-wrap .hcp-tb-acts { gap: 2px; }
  /* 설정 버튼 숨김 (드롭다운으로 대체) */
  #hcp-tb-settings-btn { display: none; }
}

/* ── 아바타 그라디언트 (g1~g8) — 토픽바 아바타 포함 ── */
.hcp-wrap .hcp-tb-av.g1, .hcp-wrap .hcp-pc-av.g1 { background: linear-gradient(135deg,#3B2FD9,#7C3AED); }
.hcp-wrap .hcp-tb-av.g2, .hcp-wrap .hcp-pc-av.g2 { background: linear-gradient(135deg,#0D9488,#16A34A); }
.hcp-wrap .hcp-tb-av.g3, .hcp-wrap .hcp-pc-av.g3 { background: linear-gradient(135deg,#E11D48,#DB2777); }
.hcp-wrap .hcp-tb-av.g4, .hcp-wrap .hcp-pc-av.g4 { background: linear-gradient(135deg,#D97706,#EF4444); }
.hcp-wrap .hcp-tb-av.g5, .hcp-wrap .hcp-pc-av.g5 { background: linear-gradient(135deg,#0284C7,#0EA5E9); }
.hcp-wrap .hcp-tb-av.g6, .hcp-wrap .hcp-pc-av.g6 { background: linear-gradient(135deg,#7C3AED,#EC4899); }
.hcp-wrap .hcp-tb-av.g7, .hcp-wrap .hcp-pc-av.g7 { background: linear-gradient(135deg,#16A34A,#0D9488); }
.hcp-wrap .hcp-tb-av.g8, .hcp-wrap .hcp-pc-av.g8 { background: linear-gradient(135deg,#B45309,#D97706); }