/* ========================================
   Community — 커뮤니티 페이지 스타일
   Uses existing --pet-* CSS variables
   ======================================== */

.community-page {
  padding-bottom: calc(var(--nav-h) + 12px);
}

/* ========== 검색 바 ========== */

/* 홈(/community): 검색바는 히어로와 함께 스크롤되고, 칩바·정렬바가 상단 고정됨 */
.main-page.community-page .cm-search-bar {
  background: var(--pet-bg, #faf8f6);
  padding: 10px 16px 12px;
  margin-top: 0;
}

.cm-search-bar {
  padding: 10px 16px 12px;
  margin-top: 0;
}

.cm-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pet-card);
  border: 1.5px solid var(--pet-border);
  border-radius: 14px;
  padding: 10px 16px;
  transition: border-color 0.2s;
}

.cm-search-input-wrap:focus-within {
  border-color: var(--pet-primary);
}

.cm-search-input-wrap i {
  color: var(--pet-text-muted);
  font-size: 0.9rem;
}

.cm-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--pet-text);
  background: transparent;
}

.cm-search-input::placeholder {
  color: var(--pet-text-muted);
}

/* ========== 히어로 배너 ========== */

.cm-hero {
  position: relative;
  margin: 0 16px 16px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pet-gradient);
}

.cm-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cm-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
}

.cm-hero-orb--1 {
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.5);
  top: -30px;
  right: -20px;
  animation: cmOrbFloat 6s ease-in-out infinite alternate;
}

.cm-hero-orb--2 {
  width: 80px;
  height: 80px;
  background: rgba(255,200,200,0.4);
  bottom: 10px;
  left: -10px;
  animation: cmOrbFloat 8s ease-in-out 1s infinite alternate-reverse;
}

@keyframes cmOrbFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(12px, -10px) scale(1.15); }
}

.cm-hero-paw {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  line-height: 1;
}

.cm-hero-content {
  position: relative;
  z-index: 1;
  padding: 24px 20px 20px;
  text-align: center;
  overflow: visible;
}

.cm-hero-paw-deco {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}

/* 큰 발 — 크기·톤만 지정, 좌표는 community.jsp 스크립트가 랜덤 배치 */
.cm-hero-paw-deco--lg {
  --paw-coin-size: clamp(1.75rem, 9vw, 3.1rem);
}

.cm-hero-paw .petple-paw-coin {
  --paw-coin-size: 3rem;
  opacity: 0.14;
}

.cm-hero-paw-deco .petple-paw-coin {
  --paw-coin-size: clamp(1.05rem, 3.6vw, 1.48rem);
  opacity: 0.22;
}

.cm-hero-badge .petple-paw-coin {
  --paw-coin-size: 1rem;
}

.cm-hero-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
  margin: 0 auto 12px;
}

.cm-hero-title {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 6px;
}

.cm-hero-desc {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 18px;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.cm-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.cm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cm-stat-num {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.cm-stat-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ========== 카테고리 필터 칩 ========== */

.cm-category-section {
  padding: 0 16px 12px;
}

.cm-category-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pet-text);
  margin: 0 0 10px;
}

.cm-category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 4px 4px;
  mask-image: linear-gradient(to right, transparent 0, black 4px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4px, black calc(100% - 16px), transparent 100%);
}

.cm-category-chips::-webkit-scrollbar { display: none; }

.cm-chip {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--pet-border);
  background: var(--pet-card);
  color: var(--pet-text-sub);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.cm-chip.active {
  background: var(--pet-primary);
  color: #fff;
  border-color: var(--pet-primary);
  box-shadow: 0 3px 12px rgba(255, 107, 107, 0.3);
  font-weight: 700;
  transform: scale(1.05);
}

.cm-chip:not(.active):hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
  transform: translateY(-1px);
}

.cm-chip:not(.active):active {
  transform: scale(0.97);
}

/* ========== 섹션 타이틀 · 뱃지 (검색 등 공용) ========== */

.cm-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pet-text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-section-title .cm-title-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pet-primary);
  animation: cmPulse 2s ease-in-out infinite;
}

@keyframes cmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.cm-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cm-badge--hot {
  background: var(--pet-primary);
  color: #fff;
}

.cm-badge--live {
  background: var(--pet-secondary);
  color: #fff;
  animation: cmLivePulse 2s ease-in-out infinite;
}

@keyframes cmLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ========== 방 그리드 ========== */

.cm-rooms-section {
  padding: 12px 16px 24px;
  text-align: center;
}

.cm-room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cm-room-card {
  position: relative;
  background: var(--pet-card);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.cm-room-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}

.cm-room-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pet-shadow);
}

.cm-room-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(237, 233, 230, 0.75);
}

.cm-room-media-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
}

/* 방 미디어: DB icon_cd + room_id 기반 연한 파스텔 그라데이션(방마다 고유) */
.cm-room-art {
  --cm-art-h1: 210;
  --cm-art-h2: 235;
  --cm-art-angle: 138deg;
  --cm-art-s: 72%;
  position: relative;
  overflow: hidden;
  /* 상단·좌측에 밝은 하이라이트 + 부드러운 2단 그라데이션 */
  background:
    radial-gradient(ellipse 115% 75% at 28% 12%, rgba(255, 255, 255, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 90% 60% at 88% 78%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    linear-gradient(
      var(--cm-art-angle),
      hsl(var(--cm-art-h1), 34%, 94%) 0%,
      hsl(var(--cm-art-h1), 28%, 91%) 38%,
      hsl(var(--cm-art-h2), 26%, 87%) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.cm-room-art::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: #fff;
  opacity: 0.36;
}

.cm-room-art[data-cm-decor='0']::before {
  width: 130%;
  height: 52%;
  left: -18%;
  top: -22%;
  border-radius: 50%;
  transform: rotate(-14deg);
}

.cm-room-art[data-cm-decor='1']::before {
  width: 55%;
  height: 55%;
  right: -12%;
  top: -18%;
  border-radius: 30% 70% 65% 35% / 40% 35% 65% 60%;
  transform: rotate(18deg);
}

.cm-room-art[data-cm-decor='2']::before {
  width: 70%;
  height: 42%;
  left: -25%;
  bottom: -12%;
  border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%;
  transform: rotate(8deg);
}

.cm-room-art[data-cm-decor='3']::before {
  width: 38%;
  height: 88%;
  right: 4%;
  top: 6%;
  border-radius: 40% 60% 55% 45% / 45% 55% 50% 50%;
  transform: rotate(-6deg);
}

.cm-room-art[data-cm-decor='4']::before {
  width: 100%;
  height: 38%;
  left: -8%;
  bottom: -8%;
  border-radius: 50%;
  transform: rotate(4deg);
  opacity: 0.4;
}

.cm-room-art[data-cm-decor='5']::before {
  width: 45%;
  height: 45%;
  left: 8%;
  top: -12%;
  border-radius: 60% 40% 55% 45%;
  transform: rotate(25deg);
}

.cm-room-art[data-cm-decor='6']::before {
  width: 120%;
  height: 35%;
  left: -10%;
  top: 40%;
  border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(-10deg);
  opacity: 0.36;
}

.cm-room-art[data-cm-decor='7']::before {
  width: 52%;
  height: 52%;
  left: 42%;
  bottom: -20%;
  border-radius: 45%;
  transform: rotate(-22deg);
}

.cm-room-art-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.cm-room-art-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(62%, 5.6rem);
  max-width: 100%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 22%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 8px 22px rgba(45, 52, 62, 0.1),
    0 2px 0 rgba(255, 255, 255, 1) inset;
  transform: none;
}

.cm-room-art-plate--coin {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  border-color: rgba(184, 224, 210, 0.9);
}

/* 이모지 수평·위치 통일(기존 v0~v7 회전·비대칭 판 제거, 클래스는 마크업 호환용으로 유지) */
.cm-room-art-inner--v0 .cm-room-art-plate,
.cm-room-art-inner--v1 .cm-room-art-plate,
.cm-room-art-inner--v2 .cm-room-art-plate,
.cm-room-art-inner--v3 .cm-room-art-plate,
.cm-room-art-inner--v4 .cm-room-art-plate,
.cm-room-art-inner--v5 .cm-room-art-plate,
.cm-room-art-inner--v6 .cm-room-art-plate,
.cm-room-art-inner--v7 .cm-room-art-plate {
  transform: none;
  border-radius: 22%;
}

.cm-room-art-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  font-size: clamp(1.72rem, 9.5vw, 2.68rem);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  filter: brightness(1.06) contrast(0.94) saturate(1) blur(0.35px);
  opacity: 0.96;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(255, 255, 255, 0.35);
  -webkit-font-smoothing: antialiased;
}

.cm-room-art-paw {
  --paw-coin-size: clamp(2rem, 11vw, 3.1rem);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
}

.cm-room-body {
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.cm-room-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--pet-text);
  line-height: 1.35;
  word-break: keep-all;
}

.cm-room-desc {
  font-size: 0.7rem;
  color: var(--pet-text-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  width: 100%;
}

.cm-room-post-meta {
  font-size: 0.68rem;
  color: var(--pet-text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm-room-post-meta i {
  font-size: 0.6rem;
  color: var(--pet-primary);
}

/* ========== 빈 상태 ========== */

.cm-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--pet-text-muted);
  font-size: 0.85rem;
}

/* ========== 반응형 ========== */

@media (min-width: 480px) {
  .cm-room-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .cm-room-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================
   방 내부 피드 (room.jsp)
   ========================================================== */

/* 방 헤더 */
.cm-room-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--pet-gradient);
  color: #fff;
  box-shadow: 0 2px 20px rgba(255, 107, 107, 0.18);
}

.cm-room-back {
  background: rgba(255,255,255,0.18);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.cm-room-back:hover {
  background: rgba(255,255,255,0.32);
}

.cm-room-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.cm-room-hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.cm-room-hero-info {
  flex: 1;
  min-width: 0;
}

.cm-room-hero-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-room-hero-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.75);
  margin-top: 1px;
}

/* 정렬 필터 바 */
.cm-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--pet-card);
  border-bottom: 1px solid var(--pet-border);
  position: sticky;
  top: 56px;
  z-index: 9;
}

.cm-sort-bar::-webkit-scrollbar { display: none; }

.cm-sort-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--pet-border);
  background: var(--pet-card);
  color: var(--pet-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.cm-sort-chip.active {
  background: var(--pet-primary);
  color: #fff;
  border-color: var(--pet-primary);
}

.cm-sort-chip:not(.active):hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
}

.cm-sort-divider {
  width: 1px;
  height: 16px;
  background: var(--pet-border);
  margin: 0 2px;
  flex-shrink: 0;
}

/* 게시글 카드 */
.cm-post-card {
  background: var(--pet-card);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius, 16px);
  padding: 16px;
  margin: 10px 16px 0;
  transition: transform 0.15s;
}

.cm-post-card:active {
  transform: scale(0.99);
}

/* 고정글 */
.cm-post-pinned {
  border-color: var(--pet-primary-light);
  background: linear-gradient(135deg, #fff8f8, #fff);
}

.cm-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pet-primary);
  margin-bottom: 8px;
}

.cm-pin-badge i {
  font-size: 0.65rem;
}

/* 게시글 헤더 */
.cm-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cm-post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pet-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--pet-primary);
}

.cm-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-post-author-info {
  flex: 1;
  min-width: 0;
}

.cm-post-author {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pet-text);
}

.cm-post-time {
  display: block;
  font-size: 0.68rem;
  color: var(--pet-text-muted);
  margin-top: 1px;
}

/* 유형 뱃지 */
.cm-post-type {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}

.cm-type-normal   { background: #FFF3CD; color: #FF9F0A; }
.cm-type-question  { background: #F0E8FF; color: #9B59B6; }
.cm-type-brag      { background: #E0F7FA; color: #0097A7; }
.cm-type-humor     { background: #FFE8E8; color: var(--pet-primary); }
.cm-type-info      { background: #E8F5E9; color: #2E7D32; }
.cm-type-help      { background: #FFE0E0; color: #D32F2F; }
.cm-type-notice    { background: var(--pet-primary-light); color: var(--pet-primary); }

/* 게시글 본문 */
.cm-post-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--pet-text);
  margin-bottom: 6px;
  line-height: 1.4;
}

.cm-post-body {
  font-size: 0.78rem;
  color: var(--pet-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 이미지 썸네일 */
.cm-post-thumb {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--pet-primary-light);
}

.cm-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-post-img-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 태그 */
.cm-post-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cm-tag {
  font-size: 0.7rem;
  color: var(--pet-primary);
  background: var(--pet-primary-light);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

/* 액션 바 (버튼 많을 때 줄바꿈 — 잘림 방지) */
.cm-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--pet-border);
}

.cm-act {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--pet-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}

.cm-act:hover {
  color: var(--pet-text);
}

.cm-like-btn.cm-liked,
.cm-like-btn.cm-liked i {
  color: var(--pet-primary);
}

.cm-bookmark-btn.cm-bookmarked,
.cm-bookmark-btn.cm-bookmarked i {
  color: var(--pet-primary);
}

.cm-view-cnt {
  margin-left: auto;
  cursor: default;
}

/* FAB */
.cm-fab {
  position: fixed;
  bottom: calc(var(--nav-h, 60px) + 24px);
  right: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--pet-gradient);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255,107,107,0.4);
  text-decoration: none;
  z-index: 40;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cm-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,107,0.5);
}

.cm-fab:active {
  transform: scale(0.93);
}

/* 로딩 스피너 */
.cm-load-more {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.cm-load-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--pet-primary-light);
  border-top-color: var(--pet-primary);
  border-radius: 50%;
  animation: cmSpin 0.7s linear infinite;
}

@keyframes cmSpin {
  to { transform: rotate(360deg); }
}

/* 빈 피드 */
.cm-empty-feed {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--pet-text-muted);
  text-align: center;
  gap: 12px;
}

.cm-empty-feed i {
  font-size: 2rem;
  color: var(--pet-border);
}

.cm-empty-feed p {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================
   글 작성 (write.jsp)
   ========================================================== */

/* 작성 헤더 */
.cm-write-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: var(--pet-gradient);
  color: #fff;
  box-shadow: 0 2px 20px rgba(255, 107, 107, 0.18);
}

.cm-write-back {
  background: rgba(255,255,255,0.18);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.cm-write-back:hover {
  background: rgba(255,255,255,0.32);
}

.cm-write-header-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cm-write-submit {
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--pet-primary-dark, #E85555);
  padding: 8px 18px;
  border-radius: 50px;
  font-family: inherit;
  transition: background 0.2s, transform 0.15s;
}

.cm-write-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.cm-write-submit:not(:disabled):active {
  transform: scale(0.96);
}

/* 작성 스크롤 영역 */
.cm-write-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-write-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-write-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pet-text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* 방 선택기 */
.cm-room-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pet-card);
  border: 1.5px solid var(--pet-border);
  border-radius: 14px;
  padding: 12px 14px;
}

.cm-rs-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pet-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.cm-rs-info {
  flex: 1;
}

.cm-rs-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pet-text);
}

.cm-rs-sub {
  font-size: 0.68rem;
  color: var(--pet-text-muted);
  margin-top: 1px;
}

/* 방 선택 커스텀 셀렉트 (커뮤니티 메인에서 글쓰기 진입 시) */
.cm-room-custom-select {
  position: relative;
  margin-bottom: 0;
}

.cm-room-custom-select .rpt-custom-select-trigger {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 14px;
  border: 1.5px solid var(--pet-border, #e8e8e8);
  border-radius: 14px;
  background: var(--pet-card, #fafafa);
  color: var(--pet-text, #333);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, border-radius 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.cm-room-custom-select.open .rpt-custom-select-trigger {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-color: transparent;
  background-color: #fff3f3;
}

.cm-room-custom-select .rpt-custom-select-trigger:focus {
  outline: none;
  border-color: var(--pet-primary, #ff6b6b);
  background-color: #fff3f3;
}

.cm-room-custom-select.open .rpt-custom-select-trigger:focus {
  border-color: var(--pet-border, #e8e8e8);
  border-bottom-color: transparent;
}

.cm-room-custom-select .rpt-custom-select-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  margin: -1px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1.5px solid var(--pet-border, #e8e8e8);
  border-radius: 0 0 14px 14px;
  background: var(--pet-card, #fff);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.cm-room-custom-select .rpt-custom-select-list li {
  padding: 12px 14px;
  color: var(--pet-text, #333);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.cm-room-custom-select .rpt-custom-select-list li:hover,
.cm-room-custom-select .rpt-custom-select-list li:focus {
  outline: none;
  background: var(--pet-primary, #ff6b6b);
  color: #fff;
}

.cm-write-section-disabled {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* 유형 칩 (작성폼) */
.cm-type-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.cm-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1.5px solid var(--pet-border);
  background: var(--pet-card);
  color: var(--pet-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.cm-type-chip.active {
  background: var(--pet-primary);
  color: #fff;
  border-color: var(--pet-primary);
}

.cm-type-chip:not(.active):hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
}

/* 제목+본문 박스 */
.cm-write-box {
  background: var(--pet-card);
  border: 1.5px solid var(--pet-border);
  border-radius: 14px;
  overflow: hidden;
}

.cm-title-field {
  width: 100%;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pet-text);
  background: transparent;
  border-bottom: 1px solid var(--pet-border);
}

.cm-title-field::placeholder {
  color: var(--pet-text-muted);
  font-weight: 400;
}

.cm-body-field {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--pet-text);
  background: transparent;
  resize: none;
  line-height: 1.7;
}

.cm-body-field::placeholder {
  color: var(--pet-text-muted);
}

.cm-char-count {
  text-align: right;
  padding: 8px 16px;
  font-size: 0.68rem;
  color: var(--pet-text-muted);
  border-top: 1px solid var(--pet-border);
}

/* 이미지 업로드 */
.cm-media-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.cm-media-row::-webkit-scrollbar { display: none; }

.cm-add-media {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 2px dashed var(--pet-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--pet-card);
  transition: border-color 0.15s;
  color: var(--pet-text-muted);
  font-size: 0.62rem;
}

.cm-add-media i {
  font-size: 1.2rem;
}

.cm-add-media:hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
}

.cm-media-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.cm-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cm-media-del {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: #fff;
  cursor: pointer;
  border: none;
}

.cm-media-hint {
  font-size: 0.68rem;
  color: var(--pet-text-muted);
}

/* 태그 입력 */
.cm-tag-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pet-card);
  border: 1.5px solid var(--pet-border);
  border-radius: 14px;
  padding: 10px 14px;
}

.cm-tag-hash {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pet-primary);
}

.cm-tag-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--pet-text);
  background: transparent;
}

.cm-tag-input::placeholder {
  color: var(--pet-text-muted);
}

.cm-tag-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cm-tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cm-tag-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pet-primary);
  font-size: 0.6rem;
  padding: 0;
  display: flex;
  align-items: center;
}

/* 옵션 그룹 */
.cm-option-group {
  background: var(--pet-card);
  border: 1.5px solid var(--pet-border);
  border-radius: 14px;
  overflow: hidden;
}

.cm-option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--pet-border);
}

.cm-option-item:last-child {
  border-bottom: none;
}

.cm-option-icon {
  font-size: 1rem;
  width: 24px;
  text-align: center;
  color: var(--pet-text-muted);
}

.cm-option-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pet-text);
  flex: 1;
}

.cm-option-value {
  font-size: 0.75rem;
  color: var(--pet-text-muted);
}

/* 토글 스위치 */
.cm-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cm-toggle-slider {
  position: absolute;
  inset: 0;
  background: #E0E0E0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.cm-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.cm-toggle input:checked + .cm-toggle-slider {
  background: var(--pet-primary);
}

.cm-toggle input:checked + .cm-toggle-slider::after {
  transform: translateX(20px);
}

/* 하단 포맷 툴바 */
.cm-write-toolbar {
  position: sticky;
  bottom: 0;
  background: var(--pet-card);
  border-top: 1px solid var(--pet-border);
  padding: 8px 16px 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}

.cm-tb-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--pet-bg, #FAF8F6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  color: var(--pet-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cm-tb-btn:hover {
  background: var(--pet-primary-light);
  color: var(--pet-primary);
}

.cm-tb-btn:active {
  background: var(--pet-primary-light);
}

/* ========================================
   Community Detail — 게시글 상세 페이지
   ======================================== */

/* ── 헤더 ── */
.cm-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--pet-card, #fff);
  border-bottom: 1px solid var(--pet-border, #F0E4E4);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cm-detail-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pet-primary-light, #FFF0F0);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: var(--pet-text, #2D3436);
  font-size: 1rem;
}

.cm-detail-header-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  color: var(--pet-text, #2D3436);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-detail-header-actions {
  display: flex;
  gap: 6px;
}

.cm-detail-header-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pet-primary-light, #FFF0F0);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--pet-text-muted, #B2BEC3);
  transition: background 0.15s;
}

.cm-detail-header-btn:active {
  background: var(--pet-border, #F0E4E4);
}

.cm-detail-header-btn.cm-bookmarked {
  color: var(--pet-primary, #FF6B6B);
}

/* ── 히어로 이미지 영역 ── */
.cm-detail-hero {
  width: 100%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFE0CC, #FFB3A0, #FF8E8E);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-detail-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(transparent, var(--pet-card, #fff));
  pointer-events: none;
}

.cm-detail-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  width: 100%;
}

.cm-detail-no-image-icon {
  font-size: 3rem;
  opacity: 0.6;
}

.cm-detail-hero-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 5;
}

.cm-detail-room-tag {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pet-primary, #FF6B6B);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cm-detail-img-count {
  background: rgba(0,0,0,0.45);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
}

/* 이미지 슬라이더 */
.cm-detail-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  min-height: 220px;
}

.cm-detail-slider-track {
  display: flex;
  will-change: transform;
}

.cm-detail-slider-slide {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-detail-slider-slide img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  display: block;
}

.cm-detail-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--pet-text, #2D3436);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cm-detail-slider-prev { left: 8px; }
.cm-detail-slider-next { right: 8px; }

.cm-detail-slider-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.45);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  z-index: 5;
}

/* 도트 인디케이터 */
.cm-detail-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 10px 0 4px;
  background: var(--pet-card, #fff);
}

.cm-detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pet-border, #F0E4E4);
  transition: all 0.2s;
  cursor: pointer;
}

.cm-detail-dot.active {
  width: 18px;
  border-radius: 3px;
  background: var(--pet-primary, #FF6B6B);
}

/* ── 본문 영역 ── */
.cm-detail-body {
  background: var(--pet-card, #fff);
  padding: 16px 20px 0;
}

/* 배지 행 */
.cm-detail-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cm-detail-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}

.cm-detail-badge-code { background: #FFF3CD; color: #FF9F0A; }
.cm-detail-badge-code[data-type-cd="P0001"] { background: #FFF3CD; color: #FF9F0A; }
.cm-detail-badge-code[data-type-cd="P0002"] { background: #F0E8FF; color: #9B59B6; }
.cm-detail-badge-code[data-type-cd="P0003"] { background: #E0F7FA; color: #0097A7; }
.cm-detail-badge-code[data-type-cd="P0004"] { background: #FFE8E8; color: var(--pet-primary, #FF6B6B); }
.cm-detail-badge-code[data-type-cd="P0005"] { background: #E8F0FF; color: #007AFF; }
.cm-detail-badge-code[data-type-cd="P0006"] { background: #FCE4EC; color: #E91E63; }

.cm-detail-badge-hot {
  background: var(--pet-primary, #FF6B6B);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}

/* 제목 */
.cm-detail-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--pet-text, #2D3436);
  line-height: 1.4;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

/* 작성자 행 */
.cm-detail-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pet-border, #F0E4E4);
}

.cm-detail-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--pet-primary-light, #FFE8E8);
}

.cm-detail-avatar-fallback {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pet-primary, #FF6B6B), #FF8E53);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cm-detail-author-info {
  flex: 1;
  min-width: 0;
}

.cm-detail-author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pet-text, #2D3436);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-detail-author-meta {
  font-size: 0.7rem;
  color: var(--pet-text-muted, #B2BEC3);
  margin-top: 2px;
}

.cm-detail-follow-btn {
  padding: 6px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--pet-primary, #FF6B6B);
  color: var(--pet-primary, #FF6B6B);
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.cm-detail-follow-btn.following {
  background: var(--pet-primary, #FF6B6B);
  color: #fff;
}

/* 본문 내용 (카드형 미사용 — 작성자 행 하단 구분선 이후 타이포만) */
.cm-detail-content {
  font-size: 0.9375rem;
  color: var(--pet-text, #2d3436);
  line-height: 1.78;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0 0;
  word-break: break-word;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 480px) {
  .cm-detail-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cm-detail-content {
    font-size: 0.9rem;
    line-height: 1.82;
    padding-top: 0.4rem;
    margin-bottom: 1.125rem;
  }
}

/* 태그 */
.cm-detail-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cm-detail-tag {
  font-size: 0.75rem;
  color: var(--pet-primary, #FF6B6B);
  background: var(--pet-primary-light, #FFF0F0);
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* ── 반응 바 ── */
.cm-detail-reactions {
  background: var(--pet-card, #fff);
  border-top: 1px solid var(--pet-border, #F0E4E4);
  border-bottom: 1px solid var(--pet-border, #F0E4E4);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 0;
}

.cm-detail-react-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 0;
  transition: transform 0.15s;
  border: none;
  background: transparent;
  font-family: inherit;
}

.cm-detail-react-item:active {
  transform: scale(0.9);
}

.cm-detail-react-emoji {
  font-size: 1.25rem;
  transition: transform 0.2s;
}

.cm-detail-react-item.active .cm-detail-react-emoji {
  transform: scale(1.2);
}

.cm-detail-react-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--pet-text-muted, #B2BEC3);
}

.cm-detail-react-item.active .cm-detail-react-label {
  color: var(--pet-primary, #FF6B6B);
}

.cm-detail-react-divider {
  width: 1px;
  height: 28px;
  background: var(--pet-border, #F0E4E4);
}

/* ── 댓글 섹션 ── */
.cm-detail-comments {
  background: var(--pet-card, #fff);
  padding: 16px 20px;
  margin-top: 8px;
}

.cm-detail-cmt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cm-detail-cmt-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--pet-text, #2D3436);
}

.cm-detail-cmt-count {
  font-size: 0.75rem;
  color: var(--pet-text-muted, #B2BEC3);
  margin-left: 6px;
  font-weight: 500;
}

/* 댓글 아이템 */
.cm-detail-cmt-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.cm-detail-cmt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cm-detail-cmt-avatar-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pet-primary, #FF6B6B), #FF8E53);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cm-detail-cmt-body {
  flex: 1;
  min-width: 0;
}

.cm-detail-cmt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.cm-detail-cmt-nick {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pet-text, #2D3436);
}

.cm-detail-cmt-time {
  font-size: 0.7rem;
  color: var(--pet-text-muted, #B2BEC3);
}

.cm-detail-cmt-text {
  font-size: 0.8rem;
  color: var(--pet-text-muted, #555);
  line-height: 1.6;
  margin-bottom: 6px;
  word-break: break-word;
}

.cm-detail-cmt-actions {
  display: flex;
  gap: 12px;
}

.cm-detail-cmt-action {
  font-size: 0.7rem;
  color: var(--pet-text-muted, #B2BEC3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 0;
}

.cm-detail-cmt-action:hover {
  color: var(--pet-primary, #FF6B6B);
}

/* 대댓글 */
.cm-detail-cmt-replies {
  margin-top: 8px;
  padding-left: 44px;
}

.cm-detail-cmt-replies .cm-detail-cmt-item {
  margin-bottom: 10px;
}

.cm-detail-cmt-replies .cm-detail-cmt-avatar,
.cm-detail-cmt-replies .cm-detail-cmt-avatar-fallback {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.cm-detail-cmt-empty {
  text-align: center;
  color: var(--pet-text-muted, #B2BEC3);
  font-size: 0.85rem;
  padding: 20px 0;
}

/* 답글 바 */
.cm-detail-reply-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--pet-primary-light, #FFF0F0);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: var(--pet-primary, #FF6B6B);
  font-weight: 600;
}

.cm-detail-reply-bar.active {
  display: flex;
}

.cm-detail-reply-bar-cancel {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--pet-text-muted, #B2BEC3);
  font-size: 0.85rem;
  padding: 2px 4px;
}

/* 댓글 입력 */
.cm-detail-cmt-form {
  background: var(--pet-card, #fff);
  border-top: 1px solid var(--pet-border, #F0E4E4);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.cm-detail-cmt-input-wrap {
  flex: 1;
  background: var(--pet-bg, #FFF7F7);
  border-radius: 22px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--pet-border, #F0E4E4);
}

.cm-detail-cmt-input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--pet-text, #2D3436);
  outline: none;
  flex: 1;
  min-width: 0;
}

.cm-detail-cmt-input::placeholder {
  color: var(--pet-text-muted, #B2BEC3);
}

.cm-detail-cmt-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pet-primary, #FF6B6B);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.cm-detail-cmt-send:active {
  transform: scale(0.9);
}

/* ── 다른 글 섹션 ── */
.cm-detail-more {
  background: var(--pet-bg, #FFF7F7);
  padding: 16px 20px 20px;
  margin-top: 8px;
}

.cm-detail-more-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--pet-text, #2D3436);
  margin-bottom: 12px;
}

.cm-detail-more-card {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pet-border, #F0E4E4);
  cursor: pointer;
}

.cm-detail-more-card:last-child {
  border-bottom: none;
}

.cm-detail-more-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFE0E0, #FFB3B3);
}

.cm-detail-more-thumb-fallback {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFE0E0, #FFB3B3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cm-detail-more-info {
  flex: 1;
  min-width: 0;
}

.cm-detail-more-post-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pet-text, #2D3436);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cm-detail-more-meta {
  font-size: 0.7rem;
  color: var(--pet-text-muted, #B2BEC3);
  display: flex;
  gap: 8px;
}

/* ── 옵션 드롭다운 ── */
.cm-detail-dropdown {
  position: fixed;
  top: 56px;
  right: 16px;
  background: var(--pet-card, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 50;
  display: none;
  overflow: hidden;
  min-width: 140px;
}

.cm-detail-dropdown.show {
  display: block;
}

.cm-detail-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--pet-text, #2D3436);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.cm-detail-dropdown-item:hover {
  background: var(--pet-primary-light, #FFF0F0);
}

.cm-detail-dropdown-danger {
  color: #E74C3C;
}

/* ── 삭제 확인 ── */
.cm-detail-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.34s;
}

.cm-detail-confirm-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.cm-detail-confirm {
  background: var(--pet-card, #fff);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 300px;
  width: 90%;
  text-align: center;
  transform: translateY(16px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-detail-confirm-overlay.show .cm-detail-confirm {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cm-detail-confirm-icon {
  font-size: 2rem;
  color: #E74C3C;
  margin-bottom: 12px;
}

.cm-detail-confirm-msg {
  font-size: 0.9rem;
  color: var(--pet-text, #2D3436);
  margin-bottom: 16px;
  line-height: 1.5;
}

.cm-detail-confirm-sub {
  font-size: 0.75rem;
  color: var(--pet-text-muted, #B2BEC3);
}

.cm-detail-confirm-actions {
  display: flex;
  gap: 8px;
}

.cm-detail-confirm-cancel,
.cm-detail-confirm-ok {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.cm-detail-confirm-cancel {
  background: var(--pet-border, #F0E4E4);
  color: var(--pet-text, #2D3436);
}

.cm-detail-confirm-ok {
  background: #E74C3C;
  color: #fff;
}

/* ── 로그인 필요 모달 ── */
.cm-detail-login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.34s;
}

.cm-detail-login-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.cm-detail-login-modal {
  background: var(--pet-card, #fff);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 300px;
  width: 90%;
  text-align: center;
  transform: translateY(16px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-detail-login-overlay.show .cm-detail-login-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cm-detail-login-icon {
  font-size: 2rem;
  color: var(--pet-primary, #FF6B6B);
  margin-bottom: 12px;
}

.cm-detail-login-msg {
  font-size: 0.9rem;
  color: var(--pet-text, #2D3436);
  margin-bottom: 16px;
}

.cm-detail-login-actions {
  display: flex;
  gap: 8px;
}

.cm-detail-login-cancel,
.cm-detail-login-ok {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.cm-detail-login-cancel {
  background: var(--pet-border, #F0E4E4);
  color: var(--pet-text, #2D3436);
}

.cm-detail-login-ok {
  background: var(--pet-primary, #FF6B6B);
  color: #fff;
}

/* ========== 리스트 카드 (방 피드·검색): 본문(좌) + 썸네일 우측 세로 가운데 ========== */

/* 카드: 세로 스택 — 상단 행(텍스트+썸네일) + 하단 액션(카드 전체 폭) */
.cm-post-card-h {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  --cm-h-thumb-size: 88px;
  overflow: visible;
}

.cm-post-card-h-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cm-post-card-h--no-thumb {
  border-left: none;
}

.cm-post-card-h .cm-post-thumb-h {
  width: var(--cm-h-thumb-size);
  height: var(--cm-h-thumb-size);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--pet-primary-light);
  flex-shrink: 0;
  margin: 0;
}

.cm-post-card-h .cm-post-thumb-h img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 공지 카드: 피드와 동일하게 본문 행 + 우측 썸네일 */
.cm-post-pinned-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.cm-post-pinned-text {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

/* 공지 행에 썸네일 없음: 단일 자식 → 전폭 */
.cm-post-pinned-row .cm-post-pinned-text:only-child {
  flex: none;
  width: 100%;
  max-width: none;
}

.cm-post-pinned-text > .cm-post-head,
.cm-post-pinned-text > .cm-post-title,
.cm-post-pinned-text > .cm-post-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cm-post-thumb.cm-post-thumb--pinned-side {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* 가로 배치 외 호환용 기본 썸네일 블록 */
.cm-post-thumb-h {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--pet-border, #f0e4e4);
}

.cm-post-thumb-h img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-post-img-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
}

.cm-post-type-coded {
  font-size: 0.68rem;
}

.cm-comment-off {
  opacity: 0.45;
  pointer-events: none;
}

.cm-post-content-h {
  flex: 1;
  min-width: 0;
}

/*
 * 텍스트 열: 가로 플렉스에서 남는 폭을 실제로 채우려면 width:0 + flex-grow 조합이 안정적.
 * 썸네일 없음(--no-thumb)은 아래에서 width:100%로 덮어 세로 1열 전폭 사용.
 */
.cm-post-card-h .cm-post-content-h {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  box-sizing: border-box;
}

.cm-post-card-h--no-thumb .cm-post-content-h {
  flex: none;
  width: 100%;
  max-width: none;
}

/* 제목·본문·태그: 텍스트 열(cm-post-content-h) 가로 전체 (webkit-box intrinsic 폭 방지) */
.cm-post-card-h .cm-post-content-h > .cm-post-head,
.cm-post-card-h .cm-post-content-h > .cm-post-title,
.cm-post-card-h .cm-post-content-h > .cm-post-body,
.cm-post-card-h .cm-post-content-h > .cm-post-tags {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cm-post-card-h .cm-post-title {
  margin-top: 2px;
}

.cm-post-card-h .cm-post-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
  word-break: break-word;
}

.cm-post-card-h .cm-post-tags {
  margin-top: 4px;
  flex-shrink: 0;
}

/* 액션 바: 카드 직계 자식 → 썸네일 유무와 관계없이 카드 가로 전체 */
.cm-post-card-h > .cm-post-actions {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  flex-shrink: 0;
  overflow: visible;
}

/* ========== 대표 이미지 선택 ========== */

.cm-media-thumb {
  position: relative;
}

.cm-media-thumb.cm-rep-selected::after {
  content: '★';
  position: absolute;
  top: 4px;
  left: 4px;
  background: #ff9800;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.cm-rep-hint {
  font-size: 12px;
  color: var(--pet-text-muted, #B2BEC3);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm-rep-hint i {
  color: #ff9800;
  font-size: 11px;
}

/* ========== 사진 순서 변경 ========== */

.cm-media-move {
  position: absolute;
  bottom: 3px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: #fff;
  cursor: pointer;
  border: none;
  z-index: 2;
  transition: background 0.15s;
}

.cm-media-move:hover {
  background: var(--pet-primary, #FF6B6B);
}

.cm-media-move-left {
  left: 3px;
}

.cm-media-move-right {
  right: 3px;
}

/* tl-existing/preview 아이템에도 동일 적용 */
.tl-existing-img-item .cm-media-move,
.tl-image-preview-item .cm-media-move {
  bottom: 4px;
}

.cm-reorder-hint {
  font-size: 12px;
  color: var(--pet-text-muted, #B2BEC3);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm-reorder-hint i {
  color: var(--pet-primary, #FF6B6B);
  font-size: 11px;
}

/* ========== 검색 결과 ========== */

.cm-search-results-header {
  margin-bottom: 12px;
  text-align: center;
}

.cm-search-results-header .cm-section-title {
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
}

.cm-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--pet-text-muted, #B2BEC3);
}

.cm-search-empty i {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.cm-search-empty p {
  font-size: 0.9rem;
  text-align: center;
}

.cm-search-room-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pet-primary, #FF6B6B);
  background: var(--pet-primary-light, #FFF0F0);
  padding: 2px 8px;
  border-radius: 10px;
}

#searchResults .cm-post-card {
  margin-bottom: 8px;
}

/* ========== write 페이지 footer ========== */

.cm-write-footer {
  padding: 20px 16px 32px;
  margin-top: 8px;
  border-top: 1px solid var(--pet-border, #F0E4E4);
  color: var(--pet-text-muted, #B2BEC3);
  font-size: 0.78rem;
}

.cm-write-footer p {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--pet-text-sub, #636E72);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-write-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cm-write-footer li {
  padding: 3px 0;
  padding-left: 12px;
  position: relative;
}

.cm-write-footer li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--pet-text-muted, #B2BEC3);
}

/* ========== 드롭다운 수정 버튼 ========== */

.cm-detail-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .cm-detail-confirm-overlay,
  .cm-detail-confirm,
  .cm-detail-login-overlay,
  .cm-detail-login-modal {
    transition-duration: 0.01ms !important;
  }
}

@keyframes cm-search-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cm-search-results-section {
  padding: 0 16px 16px;
}

.cm-search-results-section.cm-search-visible {
  animation: cm-search-fadein 0.35s ease forwards;
}

.cm-post-card--clickable {
  cursor: pointer;
}

.cm-detail-single-image {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  display: block;
}

.cm-detail-nav-gap {
  height: 8px;
}

.cm-write-section--flush {
  padding: 0;
}

.story-write-error-box {
  padding: 12px 16px;
  background: var(--pet-primary-light, #FFE8E8);
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: 10px;
  color: var(--pet-primary-dark, #E85555);
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 방 필터 칩 바 ===== */
.cm-room-chip-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--pet-card);
  border-bottom: 1px solid var(--pet-border);
  position: sticky;
  top: var(--header-h);
  z-index: 8;
}

.cm-room-chip-bar::-webkit-scrollbar { display: none; }

.cm-room-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--pet-border);
  background: var(--pet-card);
  color: var(--pet-text-sub);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.cm-room-chip.active {
  background: var(--pet-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.32);
}

.cm-room-chip:not(.active):hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
}

.cm-room-chip--finder {
  background: var(--pet-primary-light);
  color: var(--pet-primary);
  border-color: #ffd6d6;
}

.cm-room-chip--finder.active {
  background: var(--pet-card);
  color: var(--pet-primary);
  border-color: var(--pet-primary);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.18);
}

.cm-room-chip-divider {
  width: 1px;
  height: 18px;
  background: var(--pet-border);
  flex-shrink: 0;
  margin: 0 1px;
}

/* ===== 전체글 피드 섹션 ===== */
.cm-all-feed-section {
  padding-bottom: 8px;
}

.cm-all-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--pet-bg);
  border-bottom: 1px solid var(--pet-border);
  position: sticky;
  top: calc(var(--header-h) + 45px);
  z-index: 7;
}

.cm-all-sort-bar::-webkit-scrollbar { display: none; }

.cm-all-sort-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 13px;
  border-radius: 14px;
  border: 1.5px solid var(--pet-border);
  background: var(--pet-card);
  color: var(--pet-text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.cm-all-sort-chip.active {
  background: var(--pet-primary);
  color: #fff;
  border-color: var(--pet-primary);
}

.cm-all-sort-chip:not(.active):hover {
  border-color: var(--pet-primary);
  color: var(--pet-primary);
}

#cmAllFeed {
  padding: 0 0 8px;
}

.cm-all-feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--pet-text-muted);
  font-size: 0.88rem;
}

.cm-all-feed-empty i {
  font-size: 2rem;
  opacity: 0.4;
}

.cm-all-load-more {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.cm-all-load-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--pet-border);
  border-top-color: var(--pet-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}