/* 커뮤 줍줍 — hotdeal.css 토큰 위에서 동작 (디자인 가이드 §2 준수) */

/* ── 이슈 레이더 ───────────────────────────────────── */
.issue-radar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px 14px 8px;
  margin-bottom: 14px;
}

.radar-header {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;          /* 제목·설명이 항상 한 줄 */
  gap: 6px;
  padding: 0 2px 10px;
}

.radar-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  white-space: nowrap;        /* "이슈"가 줄바뀜으로 떨어지지 않게 */
  flex-shrink: 0;
}

.radar-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    /* 폭 부족 시 말줄임 (제목은 그대로 유지) */
  min-width: 0;
}
/* 설명 앞에 옅은 구분점 */
.radar-sub::before { content: "· "; }

.radar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 이슈 레이더 가로 페이저 (5개씩 페이지) ─────────── */
.radar-viewport {
  display: flex;
  position: relative;   /* 측면 화살표(absolute) 기준 */
}

/* 측면 화살표 — 데스크톱(hover)에서만, 본문 폭은 1px도 안 깎는 absolute 오버레이 */
.radar-edge { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* 마우스로 '옆으로 밀 수 있다'를 알리는 grab 커서 */
  .radar-window { cursor: grab; }
  .radar-window.dragging,
  .radar-window.dragging .radar-row { cursor: grabbing; }
  .radar-window.dragging { user-select: none; }
  .radar-window:focus-visible { outline: 2px solid #e53935; outline-offset: 2px; border-radius: 6px; }

  .radar-edge {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, color 0.15s ease;
    z-index: 3;
  }
  .radar-edge-prev { left: 1px; }
  .radar-edge-next { right: 1px; }
  /* 위젯에 마우스 올리면 페이드인(끝 페이지의 방향 화살표는 disabled로 숨김) */
  .issue-radar:hover .radar-edge:not(:disabled),
  .radar-edge:focus-visible { opacity: 1; }
  .radar-edge:hover { color: #e53935; }
  .radar-edge:focus-visible { outline: 2px solid #e53935; outline-offset: 2px; }
  .radar-edge:disabled { display: none; }
}

/* 스크린리더 전용(시각적으로 숨김) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 트랙 창 — 한 페이지만 보이는 뷰포트(넘김 신호는 캡슐 점 + 스와이프) */
.radar-window {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.radar-track {
  display: flex;
  align-items: flex-start;       /* 페이지별 독립 높이 — 인라인 펼침이 다른 페이지에 영향 X */
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.radar-page {
  flex: 0 0 100%;
  min-width: 0;
}

/* 행 래퍼(.radar-item) = 행 버튼 + 인라인 펼침 패널을 한 묶음으로 */
.radar-page .radar-item { border-top: 1px solid var(--border-color); }
.radar-page .radar-item:first-child { border-top: none; }
/* 펼친 행 — 행+목록을 좌측 빨간 레일 + 공통 배경 + 둥근 모서리로 '한 알약'처럼 묶음 */
.radar-item.open {
  background: var(--input-bg);
  border-radius: 10px;
  border-top-color: transparent;
}
.radar-item.open + .radar-item { border-top-color: transparent; }

/* 페이지 점 인디케이터 (헤더 오른쪽 끝) — 활성은 캡슐로 늘어남 */
.radar-dots {
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: auto;
  gap: 5px;
}
.radar-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-color);
  cursor: pointer;
  transition: width 0.24s cubic-bezier(0.32, 0.72, 0, 1), background 0.24s;
}
.radar-dot.active { width: 16px; background: #e53935; }

.radar-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 2px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.radar-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 1줄: [N건 칩][· 시간](시작점 고정) + [키워드칩들](넘치면 가로 스크롤) */
.radar-toprow {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* 키워드만 스크롤 슬롯으로 — N건/시간은 항상 시작점에 노출 */
.radar-keys {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.radar-keys::-webkit-scrollbar { display: none; }

/* 시간 라벨 — 칩 아님(배경X), 흐린 회색 보조 텍스트 (빨강은 N건 전유) */
.radar-time {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.radar-count-chip {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.radar-keyword {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;            /* 연하게 — 아래 제목이 더 눈에 들어오도록 */
  color: var(--text-muted);    /* 검정 → 흐린 회색 */
  background: var(--input-bg);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: -0.01em;
}

.radar-headline {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.radar-chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 0.18s;
  margin-top: 2px;
}
.radar-item.open .radar-chevron { transform: rotate(180deg); color: #e53935; }

.radar-posts {
  margin: 2px 2px 8px 12px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border-color);   /* 중립 회색 indent (빨강 제거) */
  max-height: 220px;                 /* 긴 목록은 내부 스크롤 — 카드 스캔성 유지 */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.radar-post-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0 5px 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  min-width: 0;
}
.radar-post-link:hover { color: var(--text-primary); }

.radar-post-title {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 행 바로 아래 인라인 펼침 — grid 0fr→1fr 로 높이 측정 없이 60fps */
.radar-row-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.radar-item.open .radar-row-detail { grid-template-rows: 1fr; }
.radar-detail-inner {
  overflow: hidden;
  min-height: 0;
}
/* 펼침 내용 — 살짝 내려앉으며 페이드 인 ('차르륵' 등장감) */
.radar-detail-inner > .radar-posts {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease 0.04s, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
.radar-item.open .radar-detail-inner > .radar-posts {
  opacity: 1;
  transform: none;
}

/* 모션 민감 사용자: 모든 전환 즉시 */
@media (prefers-reduced-motion: reduce) {
  .radar-track,
  .radar-row-detail,
  .radar-dot,
  .radar-detail-inner > .radar-posts,
  .radar-chevron,
  .radar-edge {
    transition: none !important;
  }
}

/* ── 시간 윈도우 탭 ────────────────────────────────── */
.window-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.window-row::-webkit-scrollbar { display: none; }

.window-btn {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.window-btn.active {
  color: #fff;
  background: #007bff;
  border-color: #007bff;
}

/* ── 게시물 목록 ──────────────────────────────────── */
.commu-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  gap: 0;                /* .list-group 기본 gap(10px) 제거 — 라인 목록은 붙여서 */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.commu-row {
  border-bottom: 1px solid var(--border-color);
}
.commu-row:last-child {
  border-bottom: none;
}
/* 읽은(클릭한) 글 흐리게 — 핫딜 줍줍과 동일 */
.commu-row.visited {
  opacity: 0.6;
}

.commu-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 4px;
  text-decoration: none;
  color: inherit;
}
.commu-link:active {
  background: var(--bg-hover, rgba(0, 0, 0, 0.03));
}

/* 1행: [커뮤 칩] 제목이 바로 이어짐 (최대 2줄) */
.commu-title-line {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.42;
  letter-spacing: -0.02em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 검색어 하이라이트 — 노란 형광펜 + 굵게 (다크모드 대응) */
.commu-hl {
  background: #fff3a0;
  color: inherit;
  font-weight: 800;
  border-radius: 3px;
  padding: 0 1px;
}
[data-theme="dark"] .commu-hl {
  background: #7a6a00;
  color: #fff;
}

.commu-badge {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid currentColor;
  color: var(--text-secondary);
  background: transparent;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 커뮤니티 고유 색 — 필터창과 동일한 정정 브랜드 팔레트 (밝은 톤 배경 + 브랜드색 글씨) */
.commu-badge[data-source="theqoo"]     { color: #2b2b2b; background: #ededed; border-color: #d8d8d8; }
.commu-badge[data-source="mlbpark"]    { color: #0b4da2; background: #e7eef7; border-color: #c2d5ec; }
.commu-badge[data-source="ruliweb"]    { color: #1a4fa0; background: #e8eef7; border-color: #c4d6ec; }
.commu-badge[data-source="fmkorea"]    { color: #1f4f9f; background: #e8eef7; border-color: #c5d6ec; }
.commu-badge[data-source="ppomppu"]    { color: #d81e2c; background: #fdeaeb; border-color: #f6c8cb; }
.commu-badge[data-source="dcinside"]   { color: #3b4890; background: #eaecf6; border-color: #ccd1ea; }
.commu-badge[data-source="dogdrip"]    { color: #3c7d3c; background: #eaf3ea; border-color: #cbe0cb; }
.commu-badge[data-source="clien"]      { color: #28537a; background: #e9eff4; border-color: #c6d6e1; }
.commu-badge[data-source="bobaedream"] { color: #15489b; background: #e7edf6; border-color: #c2d2ea; }
.commu-badge[data-source="slrclub"]    { color: #2a5c8b; background: #e9eff5; border-color: #c7d7e5; }
.commu-badge[data-source="82cook"]     { color: #4a8722; background: #eef4e6; border-color: #d2e2be; }
.commu-badge[data-source="inven"]      { color: #1e63b3; background: #e8f0f9; border-color: #c3dbf0; }
.commu-badge[data-source="ddanzi"]     { color: #c8102e; background: #fce9ec; border-color: #f3c3ca; }
.commu-badge[data-source="humoruniv"]  { color: #d11e15; background: #fce9e8; border-color: #f4c5c2; }
.commu-badge[data-source="todayhumor"] { color: #2c6fb5; background: #e9f1fa; border-color: #c6def2; }
.commu-badge[data-source="instiz"]     { color: #2d8a46; background: #e9f5ec; border-color: #c6e6cf; }
.commu-badge[data-source="natepann"]   { color: #d10052; background: #fce6ee; border-color: #f4bbd1; }
.commu-badge[data-source="blind"]      { color: #0b7ba6; background: #e4f3fa; border-color: #b9e2f0; }
.commu-badge[data-source="etoland"]    { color: #2a73c4; background: #e9f0f9; border-color: #c6ddf1; }
.commu-badge[data-source="ygosu"]      { color: #c0392b; background: #f9eae8; border-color: #ecc6c0; }
.commu-badge[data-source="theqoo_square"] { color: #2b2b2b; }

/* ── 필터 드로어: 헤더 파란불 + 커뮤니티별 활성 고유색 ─────────
   각 커뮤니티 브랜드 컬러(흰 글씨 대비 가능하도록 채도/명도 조정) */
#toggleFilterBtn.has-filter { color: #007bff; }

.filter-btn.active[data-source="theqoo"]     { background-color: #222222; border-color: #222222; color: #fff; }
.filter-btn.active[data-source="mlbpark"]    { background-color: #0b4da2; border-color: #0b4da2; color: #fff; }
.filter-btn.active[data-source="ruliweb"]    { background-color: #1a4fa0; border-color: #1a4fa0; color: #fff; }
.filter-btn.active[data-source="fmkorea"]    { background-color: #1f4f9f; border-color: #1f4f9f; color: #fff; }
.filter-btn.active[data-source="ppomppu"]    { background-color: #d81e2c; border-color: #d81e2c; color: #fff; }
.filter-btn.active[data-source="dcinside"]   { background-color: #3b4890; border-color: #3b4890; color: #fff; }
.filter-btn.active[data-source="dogdrip"]    { background-color: #3c7d3c; border-color: #3c7d3c; color: #fff; }
.filter-btn.active[data-source="clien"]      { background-color: #28537a; border-color: #28537a; color: #fff; }
.filter-btn.active[data-source="bobaedream"] { background-color: #15489b; border-color: #15489b; color: #fff; }
.filter-btn.active[data-source="slrclub"]    { background-color: #2a5c8b; border-color: #2a5c8b; color: #fff; }
.filter-btn.active[data-source="82cook"]     { background-color: #4a8722; border-color: #4a8722; color: #fff; }
.filter-btn.active[data-source="inven"]      { background-color: #1e63b3; border-color: #1e63b3; color: #fff; }
.filter-btn.active[data-source="ddanzi"]     { background-color: #c8102e; border-color: #c8102e; color: #fff; }
.filter-btn.active[data-source="humoruniv"]  { background-color: #d11e15; border-color: #d11e15; color: #fff; }
.filter-btn.active[data-source="todayhumor"] { background-color: #2c6fb5; border-color: #2c6fb5; color: #fff; }
.filter-btn.active[data-source="instiz"]     { background-color: #2d8a46; border-color: #2d8a46; color: #fff; }
.filter-btn.active[data-source="natepann"]   { background-color: #d10052; border-color: #d10052; color: #fff; }
.filter-btn.active[data-source="blind"]      { background-color: #008bc0; border-color: #008bc0; color: #fff; }
.filter-btn.active[data-source="etoland"]    { background-color: #2a73c4; border-color: #2a73c4; color: #fff; }
.filter-btn.active[data-source="ygosu"]      { background-color: #c0392b; border-color: #c0392b; color: #fff; }
.filter-btn.active .count-badge { color: #fff; background-color: rgba(255, 255, 255, 0.22); }
/* 더쿠는 무채색 아이덴티티 — 다크모드에선 너무 어두워 묻히므로 중간 회색으로 */
[data-theme="dark"] .filter-btn.active[data-source="theqoo"] { background-color: #5a5a5a; border-color: #5a5a5a; }

/* 2행: 시간 · 댓글 · 추천 · 조회 (인라인 텍스트, " · " 구분) */
.commu-meta {
  align-self: flex-end;        /* 시간·댓글·추천을 오른쪽으로 — 제목(좌)과 구분 */
  max-width: 100%;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commu-meta .meta-strong { color: var(--text-secondary); font-weight: 600; }

/* 같은 이슈 묶음 표시 — 피드 안에서 그룹임을 알려주는 라벨 */
.commu-issue-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #e53935;
}

/* ── 기타 ─────────────────────────────────────────── */
.commu-loading-row {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  list-style: none;
}

.commu-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border-color);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: commu-spin 0.8s linear infinite;
}
@keyframes commu-spin { to { transform: rotate(360deg); } }

.commu-empty {
  list-style: none;
  text-align: center;
  padding: 44px 16px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.load-more-wrap { text-align: center; margin: 14px 0 8px; }

.load-more-btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 26px;
  cursor: pointer;
}
.load-more-btn:active { background: var(--input-bg); }

.commu-footnote {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin: 18px 4px 8px;
  word-break: keep-all;
}