/* ===================================================================
   .ll-post-card — 소셜 미디어 포스팅 카드 (페이지 비종속 재사용 컴포넌트)
   - 검색(/m/search) 등 어디서나 공유. with-nav.html 에서 전역 로드.
   - 마크업: templates/components/_post_card.html 의 post_card() 매크로.
   - 자가완결: 썸네일/플랫폼 로고/계정/해시태그/함께언급키워드/날짜/본문/링크 모두 포함.
   =================================================================== */

/* 리스트 래퍼 */
.ll-post-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 카드 (세로 스택) */
.ll-post-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: #fff;
}

/* 헤더행: 썸네일 + 메타 + 링크(↗ 우상단) */
.ll-post-card .post_head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* 썸네일 90×90 둥근 사각형 */
.ll-post-card .post_avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  overflow: hidden;
}
.ll-post-card .post_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ll-post-card .post_avatar .ll-search-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  background: #f4f4f5;
  color: rgba(46, 47, 51, .7);
  font-size: 26px;
  font-weight: 700;
}

/* 메타: 플랫폼 / 계정 / 해시태그 세로 스택 (간격 시안 정합) */
.ll-post-card .post_meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.ll-post-card .post_meta .at {
  color: rgba(46, 47, 51, .92);
  font-size: 13px;
  font-weight: 600;
}
.ll-post-card .post_meta .hesy {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 4px 0 0;
}
.ll-post-card .post_meta .hesy span {
  color: rgba(112, 115, 124, .9);
  font-size: 12px;
}

/* 플랫폼 로고 (텍스트 기본 → 알려진 플랫폼은 로고 배경) */
.ll-post-card .source {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f4f4f5;
  color: rgba(46, 47, 51, .88);
  font-size: 11px;
  font-weight: 600;
}
.ll-post-card .source.threads,
.ll-post-card .source.naver,
.ll-post-card .source.tiktok,
.ll-post-card .source.instagram,
.ll-post-card .source.youtube,
.ll-post-card .source.x,
.ll-post-card .ll-search-platform.threads,
.ll-post-card .ll-search-platform.naver,
.ll-post-card .ll-search-platform.tiktok,
.ll-post-card .ll-search-platform.instagram,
.ll-post-card .ll-search-platform.youtube,
.ll-post-card .ll-search-platform.x {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.ll-post-card .source.threads,
.ll-post-card .ll-search-platform.threads { width: 66px; background-image: url(/assets/images/common/logo_threads.svg); }
.ll-post-card .source.naver,
.ll-post-card .ll-search-platform.naver { width: 52px; background-image: url(/assets/images/common/logo_naver.svg); }
.ll-post-card .source.tiktok,
.ll-post-card .ll-search-platform.tiktok { width: 58px; background-image: url(/assets/images/common/logo_tiktok.svg); }
.ll-post-card .source.instagram,
.ll-post-card .ll-search-platform.instagram { width: 70px; background-image: url(/assets/images/common/logo_instagram.svg); }
.ll-post-card .source.youtube,
.ll-post-card .ll-search-platform.youtube { width: 78px; background-image: url(/assets/images/common/logo_youtube.svg); }
.ll-post-card .source.x,
.ll-post-card .ll-search-platform.x { width: 32px; background-image: url(/admin/assets/media/svg/social-logos/x.svg); }
.ll-post-card .source.has-platform-image,
.ll-post-card .ll-search-platform.has-platform-image {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.ll-post-card .source.has-platform-image img,
.ll-post-card .ll-search-platform.has-platform-image img {
  display: block;
  flex: none;
  object-fit: contain;
}
.ll-post-card .source .ll-platform-text-fallback {
  color: rgba(46, 47, 51, .88);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* 링크(↗) — 헤더 우상단 */
.ll-post-card .post_head .btn_link {
  margin-left: auto;
}
.ll-post-card .btn_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  background: #f4f4f5 url(/assets/images/common/ico_link.svg) no-repeat center center;
  background-size: 14px auto;
  cursor: pointer;
  text-decoration: none;
}
.ll-post-card .btn_link.ll-search-denied {
  opacity: .55;
}

/* 함께 언급된 키워드 칩 */
.ll-post-card .keyword_link_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ll-post-card .keyword_link_wrap h4 {
  width: 100%;
  margin: 0;
  color: rgba(112, 115, 124, .95);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.ll-post-card .mkt_co_chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 20px;
  background: #fff;
  color: #353639;
  font-size: 13px;
  font-weight: 500;
}
.ll-post-card .mkt_co_chip.current {
  border-color: #d0fd6b;
  background: #d0fd6b;
  color: #111;
}

/* 날짜 + 본문 */
.ll-post-card .post_date {
  color: rgba(112, 115, 124, .9);
  font-size: 12px;
}
.ll-post-card .post_content {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(46, 47, 51, .92);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 빈 결과 카드 */
.ll-post-card.is-empty {
  align-items: center;
  justify-content: center;
  min-height: 88px;
  color: rgba(112, 115, 124, .9);
  font-size: 13px;
}