@charset "utf-8";

/* ==========================================================================
   CINÉ-ARCHIVE (시네아카이브 v2.1)
   Ultra Clean, Compact, Bright, Monochromatic Cinema Archive Theme
   ========================================================================== */

/* --- 폰트 임포트 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;500;700&family=Nanum+Myeongjo:wght@400;700&family=Space+Grotesk:wght@400;600;700&display=swap');

/* --- 미니멀 토큰 --- */
:root {
  --bg-main: #f8f9fa;
  --bg-card: #ffffff;
  --bg-sub: #f1f3f5;
  --bg-hover: #e9ecef;

  --text-main: #18191b;
  --text-sub: #596171;
  --text-muted: #8b95a5;

  --border-light: #edf0f3;
  --border-card: #e2e5e9;
  --border-dark: #18191b;
  --border-dashed: #b5bcc7;

  --font-main: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-mono: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-title: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-serif: 'Nanum Myeongjo', 'Noto Sans KR', serif;

  --content-width: 1040px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Typography Scale Tokens (Atoms) */
  --text-2xs: 9.5px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13.5px;
  --text-md: 14.5px;
  --text-lg: 16.5px;
  --text-xl: 21px;

  /* Typography Weight Tokens (Atoms) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Interactions & Elevation Tokens (Atoms) */
  --transition-fast: 0.15s ease;
  --transition-card: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  --transition-img: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.05);
  --border-card-hover: #cbd3dc;

  /* 게시글 본문 글자 크기 (기본 13px, 컨트롤러 연동) */
  --article-font-size: 13px;
}

/* 베이스 리셋 - 전체적으로 글자 크기를 작고 컴팩트하게 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13.5px; /* 전체 폰트 축소 */
  scroll-behavior: smooth;
  background-color: var(--bg-main);
  font-family: var(--font-main) !important;
}

body {
  font-family: var(--font-main) !important;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.55;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

a:hover {
  color: #000;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, textarea, select {
  font-family: var(--font-main) !important;
  cursor: pointer;
  border: none;
  background: none;
}

ol, ul, li {
  list-style: none !important;
  list-style-type: none !important;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   1. 헤더 (SIDEBAR COMPACT TICKET PASS HEADER)
   - 사이드바 최상단에 위치하는 미니멀 세로형 티켓 헤더 (모바일/데스크톱 세로 UI 통일)
   - 상단 메인 정보 (ADMIT ONE, 블로그 제목, 설명) + 가로 절취선 타공 + 하단 바코드 스텁
   ========================================================================== */
.sidebar-ticket-header,
.compact-ticket-header {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: visible;
  transition: var(--transition-card);
  margin-bottom: 2px;
}

.sidebar-ticket-header:hover,
.compact-ticket-header:hover {
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

/* 티켓 메인 정보 영역 */
.sidebar-ticket-header .header-main-info,
.compact-ticket-header .header-main-info {
  padding: 14px 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-top-right-radius: calc(var(--radius-sm) - 1px);
}

.sidebar-ticket-header .header-top-meta,
.compact-ticket-header .header-top-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  flex-wrap: wrap;
}

.header-top-meta .header-write-link {
  margin-left: auto !important;
}

.header-top-meta .meta-divider {
  display: none !important;
}

.sidebar-ticket-header .badge-admit,
.compact-ticket-header .badge-admit {
  background: var(--border-dark);
  color: #fff;
  padding: 1.5px 5.5px;
  font-weight: 700;
  border-radius: var(--radius-xs);
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.sidebar-ticket-header .serial-code,
.compact-ticket-header .serial-code {
  font-size: 10px;
  font-family: var(--font-mono);
  white-space: nowrap !important;
}

.sidebar-ticket-header .meta-divider,
.compact-ticket-header .meta-divider {
  opacity: 0.45;
  flex-shrink: 0;
}

.sidebar-ticket-header .meta-subtitle,
.compact-ticket-header .meta-subtitle {
  font-size: 10px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.sidebar-ticket-header .header-blog-title,
.compact-ticket-header .header-blog-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-main);
  margin: 3px 0 2px;
  line-height: 1.35;
}

.sidebar-ticket-header .header-blog-title a,
.compact-ticket-header .header-blog-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sidebar-ticket-header .header-blog-title a:hover,
.compact-ticket-header .header-blog-title a:hover {
  color: var(--text-muted);
}

.sidebar-ticket-header .header-blog-desc,
.compact-ticket-header .header-blog-desc {
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.45;
  margin: 0;
  word-break: keep-all;
}

/* 가로 티켓 절취선 및 좌우 반원 타공 홈 (Perforation & Notches) */
.sidebar-ticket-header .header-perforation,
.compact-ticket-header .header-perforation {
  position: relative;
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--border-dashed);
  margin: 0;
  flex-shrink: 0;
}

.sidebar-ticket-header .header-perforation::before,
.sidebar-ticket-header .header-perforation::after,
.compact-ticket-header .header-perforation::before,
.compact-ticket-header .header-perforation::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-card);
  z-index: 5;
}

.sidebar-ticket-header .header-perforation::before,
.compact-ticket-header .header-perforation::before {
  left: -2px;
  border-left: 1px solid var(--bg-main);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.sidebar-ticket-header .header-perforation::after,
.compact-ticket-header .header-perforation::after {
  right: -2px;
  border-right: 1px solid var(--bg-main);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* 하단 티켓 바코드 스텁 */
.sidebar-ticket-header .header-stub,
.compact-ticket-header .header-stub {
  width: 100%;
  padding: 10px 14px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg-sub);
  text-align: center;
  gap: 5px;
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}

.sidebar-ticket-header .mini-barcode,
.compact-ticket-header .mini-barcode {
  height: 18px;
  width: 75%;
  max-width: 160px;
  background: repeating-linear-gradient(
    90deg,
    var(--text-main) 0,
    var(--text-main) 1.5px,
    transparent 1.5px,
    transparent 3.5px,
    var(--text-main) 3.5px,
    var(--text-main) 6px,
    transparent 6px,
    transparent 7.5px,
    var(--text-main) 7.5px,
    var(--text-main) 9.5px,
    transparent 9.5px,
    transparent 12px
  );
  opacity: 0.75;
}

.sidebar-ticket-header .stub-serial-text,
.compact-ticket-header .stub-serial-text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   2. 레이아웃
   ========================================================================== */
.cinema-main-layout {
  flex: 1 0 auto;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px 16px 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  width: 100%;
}

#main-content {
  min-width: 0;
}

/* ==========================================================================
   카테고리 헤더 요약 바 (얇은 시네마 티켓 스트립 스타일)
   - 좌측: ARCHIVE PASS 뱃지 + 카테고리/검색어 타이틀
   - 중앙: 타공 홈 & 절취선
   - 우측: 미니 바코드 + N POSTS 수량 + WRITE 버튼
   ========================================================================== */
.category-summary-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-card);
  min-height: 40px;
}

/* 좌측 티켓 메인 영역 */
.category-ticket-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  min-width: 0;
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
}

.category-ticket-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  background: var(--text-main);
  color: var(--bg-card);
  padding: 1.5px 5.5px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.category-summary-bar .title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 중앙 수직 절취선 & 상하 반원 타공 홈 (Perforation & Top/Bottom Notches) */
.category-ticket-perforation {
  position: relative;
  width: 0;
  border-left: 1px dashed var(--border-dashed);
  flex-shrink: 0;
}

.category-ticket-perforation::before,
.category-ticket-perforation::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 7px;
  background: var(--bg-main);
  border: 1px solid var(--border-card);
  z-index: 5;
}

.category-ticket-perforation::before {
  top: -2px;
  border-top: 1px solid var(--bg-main);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.category-ticket-perforation::after {
  bottom: -2px;
  border-bottom: 1px solid var(--bg-main);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* 우측 스텁 영역 (바코드 & POST 카운트 & 글쓰기) */
.category-ticket-stub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--bg-sub);
  flex-shrink: 0;
  border-top-right-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}

.category-ticket-barcode {
  width: 26px;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    var(--text-muted) 0,
    var(--text-muted) 1px,
    transparent 1px,
    transparent 2.5px,
    var(--text-muted) 2.5px,
    var(--text-muted) 4px,
    transparent 4px,
    transparent 5px
  );
  opacity: 0.55;
  flex-shrink: 0;
}

.category-summary-bar .count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.category-ticket-stub .btn-write-ticket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  color: var(--text-sub);
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  flex-shrink: 0;
}

.category-ticket-stub .btn-write-ticket:hover {
  background: var(--text-main);
  color: #ffffff;
  border-color: var(--text-main);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 갤러리 메타 정보(태그 & 화살표) 일괄 노출 토글 버튼 */
.btn-gallery-tag-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-gallery-tag-toggle svg {
  stroke: currentColor;
  transition: stroke 0.15s ease, transform 0.15s ease;
}

.btn-gallery-tag-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--border-card-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.btn-gallery-tag-toggle:hover svg {
  transform: scale(1.08);
}

.btn-gallery-tag-toggle.is-active {
  background: var(--text-main) !important;
  color: #ffffff !important;
  border-color: var(--text-main) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

.btn-gallery-tag-toggle.is-active svg {
  stroke: #ffffff !important;
}

/* 관리자(블로그 소유자) 전용 액션 버튼 (비로그인 방문자에게 기본 완전 숨김) */
.admin-only-link {
  display: none !important;
}

body.is-admin-user .admin-only-link {
  display: inline-flex !important;
}

.btn-write-ticket,
.header-write-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-sub);
  border-radius: var(--radius-xs);
  line-height: 1;
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-write-ticket:hover,
.header-write-link:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-write-ticket svg,
.header-write-link svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none;
}

/* ==========================================================================
   3. 게시판 목록 4종 모드 제어
   (카테고리별로 티스토리 관리자에서 선택한 스타일 자동 반영)
   (1) 갤러리 (Masonry): 가로 3열 메이슨리, 제목 좌측 카테고리 뱃지
   (2) 순수 갤러리 2: 순수 이미지 메이슨리
   (3) 웹진 (인스타그램 피드): 가로폭 100% 꽉 참
   (4) 일반 목록 (Classic Board)
   (5) 미니멀 티켓
   ========================================================================== */

.posts-container .view-item {
  display: none;
}

/* --- (1) MASONRY 갤러리 모드 (view-gallery) & (view-gallery2) --- */
.posts-container.view-gallery,
.posts-container.view-gallery2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.posts-container .masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* JS 초기화 전 또는 기본 CSS 폴백: 가로 3열 균등 배치 (2개 글도 나란히 가로 배치) */
.posts-container.view-gallery:not(.masonry-ready),
.posts-container.view-gallery2:not(.masonry-ready) {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.posts-container.view-gallery:not(.masonry-ready) > .view-item[data-view="gallery"],
.posts-container.view-gallery2:not(.masonry-ready) > .view-item[data-view="gallery2"] {
  display: block !important;
  flex: 0 0 calc((100% - 28px) / 3);
  max-width: calc((100% - 28px) / 3);
  box-sizing: border-box;
}

.posts-container .masonry-col .view-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.masonry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
  cursor: pointer;
}

.masonry-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.masonry-card:hover .masonry-title-link {
  text-decoration: underline;
}

/* 카테고리 뱃지 또는 태그 뱃지 위에 호버 시 밑줄 등 해제 */
.masonry-card:has(.masonry-cat-badge:hover) .masonry-title-link,
.masonry-card:has(.masonry-title-cat:hover) .masonry-title-link,
.masonry-card:has(.card-tags-wrap a:hover) .masonry-title-link {
  text-decoration: none;
}

.masonry-img-wrap {
  width: 100%;
  background: var(--bg-sub);
  position: relative;
  display: block;
}

/* 갤러리1 이미지 좌상단 카테고리 뱃지 (마우스 올렸을 때만 노출) */
.masonry-img-wrap .masonry-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  font-family: var(--font-main) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #ffffff !important;
  background: rgba(24, 25, 27, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2.5px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.masonry-card:hover .masonry-cat-badge,
.masonry-img-wrap:hover .masonry-cat-badge {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.masonry-img-wrap .masonry-cat-badge:hover {
  background: rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}

/* 이미지 원본 비율 보존 - 절대 잘리지 않고 원본 높이대로 꽉 참 */
.masonry-img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.masonry-card-body {
  padding: 8px 10px;
}

/* 갤러리 1: 제목 및 날짜 숨김 (검색 및 시맨틱 접근성은 HTML로 유지) */
.masonry-title {
  display: none !important;
}

.masonry-title-cat {
  display: none !important;
}

.masonry-title-link {
  display: none !important;
}

/* 갤러리 (Masonry) 태그 목록 */
.masonry-tags-line {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-top: 0;
}

.masonry-date-row {
  display: none !important;
}

.masonry-date {
  display: none !important;
}

/* 검색 필터링 숨김 클래스 */
.view-item.search-hidden {
  display: none !important;
}

/* ==========================================================================
   공통 태그 칩 디자인 표준 (더 작고 세련된 미니멀 칩)
   - 갤러리(Masonry), 핀터레스트(Gallery2), 웹진, 목록, 티켓, 본문 상세, 사이드바, 태그페이지, 라이트박스 전체 적용
   ========================================================================== */
.card-tags-wrap,
.pure-card-tags,
.article-tags-wrap,
.lb-tags-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px !important;
  font-size: 0 !important;
  line-height: normal;
}

.sidebar-tags-cloud,
.tag-page-cloud {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 6px !important;
  font-size: 0 !important;
  line-height: normal;
}

.card-tags-wrap a,
.pure-card-tags a,
.article-tags-wrap a,
.sidebar-tag-item,
.tag-page-item,
.lb-tag-item {
  font-family: var(--font-main) !important;
  font-size: 9.5px !important;
  font-weight: var(--weight-medium) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-sub) !important;
  background: var(--bg-sub) !important;
  border: none !important;
  padding: 2px 6.5px !important;
  border-radius: 3.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.card-tags-wrap a::before,
.pure-card-tags a::before,
.article-tags-wrap a::before,
.sidebar-tag-item::before,
.tag-page-item::before,
.lb-tag-item::before {
  content: '#' !important;
  opacity: 0.55 !important;
  margin-right: 1.2px !important;
  font-weight: var(--weight-regular) !important;
}

.card-tags-wrap a:hover,
.pure-card-tags a:hover,
.article-tags-wrap a:hover,
.sidebar-tag-item:hover,
.tag-page-item:hover,
.lb-tag-item:hover {
  background: var(--text-main) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

.card-tags-wrap a:hover::before,
.pure-card-tags a:hover::before,
.article-tags-wrap a:hover::before,
.sidebar-tag-item:hover::before,
.tag-page-item:hover::before,
.lb-tag-item:hover::before {
  opacity: 0.85 !important;
}

.feed-tags-wrap,
.article-tags-wrap {
  padding: 14px 16px 18px !important;
  border-top: 1px dashed var(--border-light) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

.ticket-row-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.col-tags {
  margin-left: auto;
  margin-right: 12px;
}

/* --- (2) 순수 이미지 갤러리 2 모드 (view-gallery2) --- */
.pure-masonry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.pure-masonry-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.pure-img-wrap {
  position: relative;
  width: 100%;
  display: block;
  background: var(--bg-sub);
  overflow: hidden;
  cursor: pointer;
}

/* 순수 이미지 모드 카테고리 뱃지 숨김 */
.pure-img-wrap .masonry-cat-badge {
  display: none !important;
}

.pure-img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pure-masonry-card:hover .pure-img-wrap img {
  transform: scale(1.025);
}

/* 핀터레스트 스타일 우상단 바로가기 화살표 버튼 (밝은 그레이 테마) */
.pure-post-arrow-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: auto;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-sub);
  border: none !important;
  color: var(--text-sub) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-3px) scale(0.92);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.pure-masonry-card:hover .pure-post-arrow-btn,
.pure-img-wrap:hover .pure-post-arrow-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pure-post-arrow-btn:hover {
  background: var(--text-main);
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.pure-post-arrow-btn svg {
  stroke: var(--text-sub);
  transition: stroke 0.15s ease;
}

.pure-post-arrow-btn:hover svg {
  stroke: #ffffff;
  transform: translate(1px, -1px);
}

/* 핀터레스트 스타일 좌측 하단 태그 목록 (hover 시에만 노출 & 반투명 opacity 테마) */
.pure-card-tags {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  max-width: calc(100% - 54px);
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pure-masonry-card:hover .pure-card-tags,
.pure-img-wrap:hover .pure-card-tags {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 토글 활성화 시 (.show-tags-active): 갤러리 내 모든 태그 및 화살표 버튼 상시 노출 */
#posts-container.show-tags-active .pure-post-arrow-btn,
.posts-container.show-tags-active .pure-post-arrow-btn {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

#posts-container.show-tags-active .pure-card-tags,
.posts-container.show-tags-active .pure-card-tags {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

#posts-container.show-tags-active .masonry-card .masonry-cat-badge,
.posts-container.show-tags-active .masonry-card .masonry-cat-badge {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.pure-card-tags a {
  background: rgba(241, 243, 245, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: var(--text-sub) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.pure-card-tags a:hover {
  background: rgba(24, 25, 27, 0.88) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* --- (2) 웹진 피드 모드 (view-webzine) - 가로 100% 꽉 참 --- */
.posts-container.view-webzine {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100% !important;
  max-width: 100% !important;
}

.posts-container.view-webzine .view-item[data-view="webzine"] {
  display: flex;
  width: 100% !important;
}

.webzine-feed-card {
  width: 100% !important;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* 웹진/본문 상단 헤드라인: 1행 카테고리 / 제목 */
.feed-headline {
  padding: 11px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed var(--border-light);
}

.feed-headline-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}

.feed-headline-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.feed-headline-right .feed-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.feed-headline-right .meta-divider {
  color: var(--border-dashed);
  font-size: 11px;
  user-select: none;
  margin: 0 1px;
}

.feed-headline-right s_ad_div,
.feed-headline-right .article-admin-actions,
.feed-headline-right .feed-admin-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 게시글 본문 글자 크기 조절 컨트롤러 (A- / 13 / A+) */
.article-font-ctrl {
  display: inline-flex;
  align-items: center;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  padding: 1px;
  gap: 1px;
  user-select: none;
}

.article-font-btn {
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-sub);
  padding: 2.5px 6.5px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.article-font-btn:hover {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.article-font-btn.btn-font-reset {
  min-width: 24px;
  font-size: 9px;
  color: var(--text-muted);
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.article-font-btn.btn-font-reset:hover {
  color: var(--text-main);
}

.article-font-btn.btn-font-reset:not(.is-default) {
  color: var(--text-main);
  font-weight: 800;
  background: rgba(0, 0, 0, 0.05);
}

.feed-headline .feed-title,
.feed-headline-left .feed-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--text-main);
  display: flex;
  align-items: center;
  min-width: 0;
}

.feed-headline .feed-title a,
.feed-headline-left .feed-title a {
  color: var(--text-main);
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}

.feed-headline .feed-title a:hover,
.feed-headline-left .feed-title a:hover {
  text-decoration: underline;
}

/* 웹진/본문 작성자 프로필 영역 완전 숨김 */
.feed-header,
.feed-user {
  display: none !important;
}

.feed-meta-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.feed-meta-right s_ad_div,
.feed-meta-right .article-admin-actions,
.feed-meta-right .feed-admin-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.feed-meta-right .meta-divider {
  color: var(--border-dashed);
  font-size: 11px;
  user-select: none;
  margin: 0 1px;
}

.feed-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.feed-image-wrap {
  width: 100% !important;
  background: var(--bg-sub);
}

.feed-image-wrap img {
  width: 100% !important;
  height: auto;
  display: block;
}

.feed-content {
  padding: 16px 16px 18px;
}

.webzine-feed-card .article-content-body {
  padding: 0 !important;
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-main);
}

.feed-desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-main);
  word-break: break-word;
  overflow-wrap: break-word;
}

.feed-category-pill {
  font-family: var(--font-main) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  white-space: nowrap !important;
  transition: all 0.15s ease;
  cursor: pointer;
  line-height: 1.35;
}

.feed-category-pill:hover {
  background: var(--text-main);
  color: #ffffff;
  border-color: var(--text-main);
  transform: translateY(-1px);
}

/* --- (3) 일반 게시판 목록 모드 (view-list) --- */
.posts-container.view-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.posts-container.view-list .view-item[data-view="list"] {
  display: flex;
  width: 100%;
}

.board-row {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s ease;
  font-size: var(--text-sm);
  width: 100%;
  cursor: pointer !important;
}

.board-row:last-child {
  border-bottom: none;
}

.board-row:hover {
  background: var(--bg-sub);
}

.col-cat {
  font-family: var(--font-main) !important;
  width: 110px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
  cursor: pointer;
}

.col-cat:hover {
  color: #000;
  text-decoration: underline;
}

.col-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
  min-width: 0;
}

.col-title a:hover {
  text-decoration: underline;
}

.col-date {
  width: auto !important;
  min-width: 110px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* --- (4) 미니멀 티켓 모드 (view-ticket) - 가로 사이즈 100% 완벽 일치 --- */
.posts-container.view-ticket {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.posts-container.view-ticket .view-item[data-view="ticket"] {
  display: block !important;
  width: 100% !important;
}

.ticket-row-card {
  width: 100% !important;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex !important;
  align-items: stretch !important;
  min-height: 116px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.ticket-row-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.ticket-row-card:hover .ticket-row-title a {
  text-decoration: underline;
}

/* 카테고리 뱃지 또는 태그 뱃지 위에 호버 시 제목 밑줄 해제 */
.ticket-row-card:has(.ticket-row-cat:hover) .ticket-row-title a,
.ticket-row-card:has(.ticket-tags-line a:hover) .ticket-row-title a {
  text-decoration: none;
}

.ticket-row-card .content-left {
  flex: 1 1 0% !important;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0 !important;
}

.ticket-row-cat {
  font-family: var(--font-main) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: -0.01em;
  display: inline-block;
  white-space: nowrap !important;
  transition: color 0.15s ease;
  cursor: pointer;
  margin-bottom: 1px;
}

.ticket-row-cat:hover {
  color: #000;
  text-decoration: underline;
}

.ticket-row-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.ticket-row-title a {
  color: var(--text-main);
  text-decoration: none;
}

.ticket-row-bottom {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.ticket-row-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ticket-tags-line {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4.5px;
  width: 100%;
  margin: 3px 0 0;
}

.ticket-row-perforation {
  width: 0;
  border-left: 1px dashed var(--border-dashed);
  flex-shrink: 0;
}

/* 우측 이미지 스텁: 모든 카드에서 140px 고정 및 꽉 차는 cover */
.ticket-row-stub {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  background: var(--bg-sub);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}

.ticket-row-stub img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 썸네일이 없는 글일 때 스텁에 표시되는 미니 바코드 */
.ticket-row-stub .stub-no-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-sub);
  opacity: 0.6;
}

.ticket-row-stub .stub-no-thumb .mini-barcode {
  width: 60%;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    #18191b 0px,
    #18191b 1.5px,
    transparent 1.5px,
    transparent 3.5px,
    #18191b 3.5px,
    #18191b 6px,
    transparent 6px,
    transparent 8px
  );
}

.ticket-row-stub .stub-no-thumb span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

/* ==========================================================================
   4. 페이지네이션 (불필요한 빈 화살표 완전 제거 & 깔끔한 중앙 정렬)
   ========================================================================== */
.cinema-pagination {
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 이전/다음 페이지 없을 때의 빈 박스 완전 숨김 */
.cinema-pagination a.no-more-prev,
.cinema-pagination a.no-more-next,
.cinema-pagination a[class*="no_more"],
.cinema-pagination a[class*="no-more"] {
  display: none !important;
}

.cinema-pagination a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-sub);
  padding: 0 6px;
  transition: all 0.15s ease;
}

.cinema-pagination a:hover {
  background: var(--text-main);
  color: #ffffff;
  border-color: var(--text-main);
  transform: translateY(-1px);
}

/* 현재 선택된 페이지 (티스토리 출력 구조 <a class="num-page"><span class="selected">1</span></a> 및 직접 부여된 selected 클래스 완벽 대응) */
.cinema-pagination a:has(.selected),
.cinema-pagination a.selected,
.cinema-pagination a.is-current-page,
.cinema-pagination span.selected,
.cinema-pagination .selected-page {
  background: var(--text-main) !important;
  color: #ffffff !important;
  border-color: var(--text-main) !important;
  font-weight: var(--weight-bold) !important;
}

.cinema-pagination a:has(.selected):hover,
.cinema-pagination a.selected:hover,
.cinema-pagination a.is-current-page:hover {
  background: var(--text-main) !important;
  color: #ffffff !important;
  border-color: var(--text-main) !important;
  transform: none;
}

/* a 태그 내부의 selected span 중복 배경 및 여백 제거 (버튼 전체 100% 균일 배경) */
.cinema-pagination a .selected,
.cinema-pagination a span.selected {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: inherit !important;
}

/* ==========================================================================
   5. 사이드바 & 티스토리 카테고리 폰트 및 정렬 완전 정상화
   ========================================================================== */
#sidebar,
.sidebar-widgets-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

.sidebar-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--text-main);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 10px;
}

.sidebar-tag-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-tag-more-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
  transform: translateX(2px);
}

.sidebar-tag-more-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* --- 티스토리 카테고리 폰트 및 구조 강력 통일 (서브 카테고리 포함) --- */
.sidebar-category-list,
.sidebar-category-list *,
/* ==========================================================================
   사이드바 카테고리 완전 방어 스타일 (티스토리 .link_sub_item 등 DOM 완벽 지원)
   ========================================================================== */

.sidebar-category-list,
.sidebar-category-list *,
.sidebar-category-list ul,
.sidebar-category-list li,
.sidebar-category-list a,
.sidebar-category-list span,
.tt_category,
.tt_category *,
.tt_category a,
.tt_category a:link,
.tt_category a:visited,
.tt_category span,
.tt_category li,
.category_list,
.category_list *,
.sub_category_list,
.sub_category_list * {
  font-family: var(--font-main) !important;
  font-style: normal !important;
  list-style: none !important;
  list-style-type: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.sidebar-category-list ul,
.tt_category,
.tt_category ul,
.category_list,
.sub_category_list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sidebar-category-list .tt_category,
.sidebar-category-list > ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar-category-list li,
.tt_category li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  list-style: none !important;
}

/* 1차 및 전체보기 카테고리 링크: flex로 글자 좌측 / 개수 및 N 뱃지 우측 끝 정렬 */
.sidebar-category-list a.link_tit,
.sidebar-category-list a.link_item,
.tt_category a.link_tit,
.tt_category a.link_item,
.category_list > li > a.link_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-sub) !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  line-height: 1.4 !important;
}

.sidebar-category-list a.link_tit:hover,
.sidebar-category-list a.link_item:hover,
.tt_category a.link_tit:hover,
.tt_category a.link_item:hover,
.category_list > li > a.link_item:hover {
  background: var(--bg-sub) !important;
  color: var(--text-main) !important;
}

/* 2차 (하위/서브) 카테고리 트리 들여쓰기 래퍼 */
.sidebar-category-list ul.sub_category_list,
.tt_category ul.sub_category_list,
ul.sub_category_list {
  margin: 2px 0 4px 10px !important;
  padding-left: 10px !important;
  border-left: 1.5px solid var(--border-light) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* 2차 (하위/서브) 카테고리 링크 (.link_sub_item 및 .link_sub 모두 완벽 지원) */
.sidebar-category-list a.link_sub_item,
.sidebar-category-list a.link_sub,
.tt_category a.link_sub_item,
.tt_category a.link_sub,
.sub_category_list a,
.sub_category_list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 11.5px !important;
  font-weight: var(--weight-normal) !important;
  color: var(--text-sub) !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  line-height: 1.4 !important;
}

.sidebar-category-list a.link_sub_item:hover,
.sidebar-category-list a.link_sub:hover,
.tt_category a.link_sub_item:hover,
.tt_category a.link_sub:hover,
.sub_category_list a:hover,
.sub_category_list li a:hover {
  background: var(--bg-sub) !important;
  color: var(--text-main) !important;
}

/* 카테고리 글 개수 뱃지 (.c_cnt) : flex 컨테이너 안에서 우측 끝으로 밀착 (order: 2) */
.sidebar-category-list .c_cnt,
.tt_category .c_cnt,
.category_list .c_cnt,
.sub_category_list .c_cnt {
  font-family: var(--font-main) !important;
  font-size: 10.5px !important;
  color: var(--text-muted) !important;
  margin-left: auto !important;
  font-weight: var(--weight-normal) !important;
  padding-left: 6px !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.02em !important;
  order: 2 !important;
}

/* 새 글 아이콘 (N) : 글자 바로 우측에 위치하도록 order: 1 지정 */
.sidebar-category-list a img[alt="N"],
.sidebar-category-list a img.icon_new,
.sidebar-category-list a img,
.tt_category a img[alt="N"],
.tt_category a img.icon_new,
.tt_category a img,
.sub_category_list a img {
  width: 9.5px !important;
  height: 9.5px !important;
  max-width: 9.5px !important;
  max-height: 9.5px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  opacity: 0.85 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

/* 사이드바 블로그 메뉴 */
.sidebar-blog-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-blog-menu li a {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-sub);
  text-decoration: none;
  font-family: var(--font-main) !important;
  transition: all 0.15s ease;
}

.sidebar-blog-menu li a:hover {
  background: var(--bg-sub);
  color: var(--text-main);
}

/* 사이드바 태그 클라우드 */
.sidebar-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 6px !important;
}

/* 사이드바 검색창 */
.sidebar-search-box {
  display: flex;
  gap: 4px;
}

.sidebar-search-box input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-family: var(--font-main);
  background: var(--bg-sub);
  color: var(--text-main);
  outline: none;
}

.sidebar-search-box input:focus {
  border-color: var(--border-dark);
  background: #ffffff;
}

.sidebar-search-box button {
  padding: 4px 10px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-sub);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.sidebar-search-box button:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
  transform: translateY(-1px);
}

/* 태그 아카이브 전용 페이지 (/tag) */
.tag-page-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.tag-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border-dashed);
}

.tag-page-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--text-main);
}

/* 태그 아카이브 전용 클라우드 (공통 칩 표준 적용) */
.tag-page-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 최근 글 */
.sidebar-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-recent-list li a {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-recent-list li a:hover {
  color: var(--text-main);
}

/* 사이드바 통계 */
.sidebar-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: var(--font-mono);
  text-align: center;
}

.sidebar-stats-row .stat-item .num {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.sidebar-stats-row .stat-item .lbl {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* ==========================================================================
   6. 상세 본문 페이지 (ARTICLE DETAIL)
   ========================================================================== */

/* 본문 상세 페이지에서는 다단(column)이 아닌 100% 전체 너비 블록 강제 */
.posts-container:has(.article-detail-wrap),
.posts-container.permalink-mode {
  display: block !important;
  column-count: unset !important;
  columns: unset !important;
  width: 100% !important;
}

.article-detail-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  width: 100% !important;
  display: block !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* 본문 상세 화면: 웹진형 레이아웃 스타일 동일 적용 */
.article-detail-wrap .feed-content {
  padding: 16px 16px 18px;
}

.article-detail-wrap .article-content-body {
  padding: 0 !important;
  font-size: var(--article-font-size, 13px) !important;
  line-height: 1.8;
  color: var(--text-main);
}

.article-detail-wrap .article-tags-wrap {
  padding: 14px 16px 18px !important;
  border-top: 1px dashed var(--border-light) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

.article-header {
  padding: 22px 24px 16px;
  border-bottom: 1px dashed var(--border-dashed);
}

.article-header-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.article-meta-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.article-meta-right s_ad_div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.article-cat-tag {
  color: var(--text-main);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.article-cat-tag:hover {
  text-decoration: underline;
  color: #000;
}

/* 티스토리 글 관리자 버튼 (<s_ad_div>) */
.article-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-sub);
  text-decoration: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
}

.admin-action-btn svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none;
}

.admin-action-btn:hover {
  color: #ffffff;
  background: var(--text-main);
  border-color: var(--text-main);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.admin-action-btn.del:hover {
  background: #e03131;
  border-color: #e03131;
  color: #ffffff;
}

.admin-action-btn.status:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
}

.article-main-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--text-main);
}

/* 본문 내용 */
.article-content-body {
  padding: 26px 24px;
  font-size: var(--article-font-size, 13px) !important;
  line-height: 1.8;
  color: var(--text-main);
}

.article-content-body p,
.article-content-body span:not([class*="cinema-"]):not([class*="pair-"]):not([class*="char-"]):not([class*="badge"]):not([class*="pill"]):not([class*="btn"]):not([class*="dday"]),
.article-content-body div:not([class*="cinema-"]):not([class*="pair-"]):not([class*="char-"]):not([class*="dday"]):not([class*="moreless"]):not([class*="card"]):not([class*="container"]):not([class*="feed-"]) {
  font-size: inherit;
  line-height: inherit;
}

.article-content-body p {
  margin-bottom: 1.3em;
}

.article-content-body img {
  border-radius: var(--radius-sm);
  margin: 16px 0;
  border: 1px solid var(--border-light);
  cursor: zoom-in;
}

.article-content-body hr {
  border: none;
  border-top: 1px dashed var(--border-dashed);
  margin: 1.8em 0;
}

.article-content-body h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 1.6em 0 0.7em;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-light);
}

/* 태그 래퍼: 본문과 조화로운 24px 좌우 패딩 및 상단 절취선 (공통 칩 표준 적용) */
.article-tags-wrap {
  padding: 16px 24px 22px !important;
  border-top: 1px dashed var(--border-light) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

/* 본문 하단 불필요 요소 완전 제거 (공감/공유 버튼그룹, 네임카드, 댓글영역, 카테고리의 다른글) */
.another_category,
.another_category_color_gray,
div[class*="another_category"],
.container_postbtn,
#post_button_group,
.postbtn_like,
.namecard,
.namecard_blog,
.profile_area,
.tt-namecard,
#namecard,
.article-comments-wrap,
.comment-wrap,
.area_reply,
#entryComments,
.comments {
  display: none !important;
}

/* 이전/다음글: 본문 아래 100% 너비 한 줄 배치 (이전글 없어도 다음글은 항상 우측 배치) */
.article-prev-next-nav {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  clear: both !important;
}

.pn-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pn-card:hover {
  background: var(--bg-sub);
  border-color: var(--border-dark);
}

.pn-card.prev {
  grid-column: 1 !important;
}

.pn-card.next {
  grid-column: 2 !important;
  text-align: right;
}

.pn-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.pn-ttl {
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 공지사항 (<s_notice_rep>) --- */
.notice-row {
  background: rgba(24, 25, 27, 0.02);
}

.notice-badge {
  background: var(--text-main) !important;
  color: #ffffff !important;
  font-family: var(--font-main) !important;
  font-size: 10px !important;
  font-weight: var(--weight-bold) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
  letter-spacing: 0.04em;
  display: inline-block !important;
  width: auto !important;
  margin-right: 6px;
}

/* --- 빈 글 목록 안내 (<s_list_empty>) --- */
.empty-archive-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.empty-archive-icon {
  font-size: 24px;
  color: var(--text-muted);
  opacity: 0.6;
}

.empty-archive-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* --- 비밀글 / 보호글 (<s_article_protected>) --- */
.badge-lock {
  background: var(--border-dark);
  color: #ffffff !important;
  font-family: var(--font-main) !important;
  font-size: 10px !important;
  font-weight: var(--weight-bold) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
  letter-spacing: 0.04em;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}

/* (1) 갤러리 1 보호글 카드 (.protect-masonry-card) */
.protect-masonry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
  cursor: pointer;
}

.protect-masonry-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.masonry-protect-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 125px;
  background: linear-gradient(135deg, #22262d 0%, #131518 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.masonry-protect-thumb .masonry-cat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 5;
}

.protect-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.protect-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.protect-thumb-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.protect-card-body {
  padding: 8px 10px;
}

.protect-masonry-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protect-masonry-title a {
  color: var(--text-main);
  text-decoration: none;
}

.protect-masonry-card:hover .protect-masonry-title a {
  text-decoration: underline;
}

.protect-date-row {
  display: block !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

/* (2) 갤러리 2 순수 핀터레스트 보호글 카드 (.protect-pure-card) */
.protect-pure-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
  cursor: pointer;
}

.protect-pure-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.pure-protect-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 135px;
  background: linear-gradient(145deg, #1f2329 0%, #121316 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  box-sizing: border-box;
  text-align: center;
}

.pure-protect-wrap .masonry-cat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 5;
}

.pure-protect-wrap .pure-post-arrow-btn {
  top: 8px;
  right: 8px;
  opacity: 0.8 !important;
  transform: none !important;
}

.pure-protect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.pure-protect-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  max-width: 90%;
  word-break: break-all;
  margin-top: 2px;
}

.pure-protect-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* (3) 웹진 보호글 피드 박스 (.protect-webzine-card) */
.protect-webzine-card .protect-feed-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 20px;
  text-align: center;
  gap: 10px;
}

.protect-webzine-card .protect-feed-link {
  margin-top: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* (4) 일반 목록 보호글 행 (.protect-row) */
.board-row.protect-row {
  cursor: pointer !important;
}

.board-row.protect-row .col-title a {
  color: var(--text-main);
  text-decoration: none;
}

.board-row.protect-row:hover .col-title a {
  text-decoration: underline;
}

/* (5) 티켓 보호글 카드 (.protect-ticket-card) */
.protect-ticket-card .protect-ticket-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.protect-ticket-stub .stub-lock-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 3px;
  color: var(--text-sub);
}

.protect-ticket-stub .stub-lock-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-sub);
  margin-top: 3px;
}

/* (6) 페어 보호글 배너 (.protect-pair-card) */
.protect-pair-card .protect-pair-banner {
  background: linear-gradient(135deg, #18191b 0%, #282c34 100%);
  min-height: 180px;
  position: relative;
}

/* (7) 캐릭터 보호글 카드 (.protect-cast-card) */
.protect-cast-card .protect-cast-thumb {
  background: linear-gradient(135deg, #22262d 0%, #141618 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.protect-cast-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
}

.protect-cast-icon-wrap .cast-protect-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.protect-form-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 24px !important;
  text-align: center;
}

.protect-lock-icon {
  margin-bottom: 12px;
  color: var(--text-muted);
}

.protect-info-text {
  font-size: var(--text-base);
  color: var(--text-sub);
  margin-bottom: 18px !important;
}

.protect-input-form {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  width: 100%;
}

.protect-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-main);
  outline: none;
  transition: all 0.15s ease;
}

.protect-input:focus {
  border-color: var(--border-dark);
  background: #ffffff;
}

.protect-submit-btn {
  padding: 6px 14px;
  background: var(--bg-card);
  color: var(--text-sub);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.protect-submit-btn:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
  transform: translateY(-1px);
}

/* --- 방명록 및 댓글 공통 스타일 (<s_guest>, <s_rp>) --- */
.guestbook-container {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.guestbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border-dashed);
}

.guestbook-title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
}

.article-comments-wrap {
  padding: 20px 24px 24px;
  border-top: 1px dashed var(--border-dashed);
  margin-top: 20px;
}

.article-comments-wrap input[type="text"],
.article-comments-wrap input[type="password"],
.article-comments-wrap textarea,
.guestbook-body input[type="text"],
.guestbook-body input[type="password"],
.guestbook-body textarea {
  font-family: var(--font-main);
  font-size: var(--text-xs);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--bg-sub);
  color: var(--text-main);
  outline: none;
}

.article-comments-wrap input:focus,
.article-comments-wrap textarea:focus,
.guestbook-body input:focus,
.guestbook-body textarea:focus {
  border-color: var(--border-dark);
  background: #ffffff;
}

.article-comments-wrap button,
.guestbook-body button {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  background: var(--text-main);
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
}

/* ==========================================================================
   7. 심플 서식 컴포넌트 (명대사, 에셋 그리드, 썰 백업)
   ========================================================================== */

/* 명대사 & 인용구 UI 공통: 위아래 마진 절대 0 강제 */
.cinema-subtitle,
.cinema-quote-bar,
.cinema-quote-ticket,
.cinema-quote-inline,
.cinema-quote-script,
.cinema-quote-bubble,
.article-content-body .cinema-subtitle,
.article-content-body .cinema-quote-bar,
.article-content-body .cinema-quote-ticket,
.article-content-body .cinema-quote-inline,
.article-content-body .cinema-quote-script,
.article-content-body .cinema-quote-bubble {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 인용구와 인접 요소 간 상단 마진 0 강제 */
.article-content-body p + .cinema-subtitle,
.article-content-body .cinema-subtitle + p,
.article-content-body p + .cinema-quote-bar,
.article-content-body .cinema-quote-bar + p,
.article-content-body p + .cinema-quote-ticket,
.article-content-body .cinema-quote-ticket + p,
.article-content-body p + .cinema-quote-inline,
.article-content-body .cinema-quote-inline + p,
.article-content-body p + .cinema-quote-script,
.article-content-body .cinema-quote-script + p,
.article-content-body p + .cinema-quote-bubble,
.article-content-body .cinema-quote-bubble + p {
  margin-top: 0 !important;
}

/* (1) 영화 자막 명대사 카드 (.cinema-subtitle) - 밝고 깨끗한 화이트 테마, 마진 0 */
.cinema-subtitle {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 0 !important;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.cinema-subtitle .subtitle-timecode {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  display: inline-block;
  text-transform: uppercase;
}

.cinema-subtitle .subtitle-quote {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.65;
  margin-bottom: 6px;
  word-break: keep-all;
}

.cinema-subtitle .subtitle-speaker {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 500;
}

/* 옵션: 다크 시네마 스크린 자막 (.cinema-subtitle.dark) */
.cinema-subtitle.dark {
  background: #18191b;
  border-color: #242528;
}

.cinema-subtitle.dark .subtitle-timecode {
  color: #9ca3af;
}

.cinema-subtitle.dark .subtitle-quote {
  color: #fff9db;
}

.cinema-subtitle.dark .subtitle-speaker {
  color: #adb5bd;
}

/* (2) 에디토리얼 레프트 바 인용구 (.cinema-quote-bar) - 마진 0 */
.cinema-quote-bar {
  position: relative;
  background: var(--bg-main);
  border-left: 3px solid var(--text-main);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 0 !important;
}

.cinema-quote-bar .quote-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.cinema-quote-bar .quote-text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--text-main);
  word-break: keep-all;
}

.cinema-quote-bar .quote-speaker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-top: 6px;
}

/* (3) 시네마 티켓 / 슬립 카드 (.cinema-quote-ticket) - 마진 0 */
.cinema-quote-ticket {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.cinema-quote-ticket .ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-light);
}

.cinema-quote-ticket .ticket-speaker {
  display: inline-block;
  background: var(--text-main);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}

.cinema-quote-ticket .ticket-scene {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.cinema-quote-ticket .ticket-text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text-main);
  word-break: keep-all;
}

/* (4) 초간결 인라인 바 (.cinema-quote-inline) - 마진 0 */
.cinema-quote-inline {
  background: var(--bg-sub);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cinema-quote-inline .inline-speaker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  flex-shrink: 0;
}

.cinema-quote-inline .inline-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-main);
  flex: 1;
  min-width: 180px;
  word-break: keep-all;
}

.cinema-quote-inline .inline-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* (5) 문학적 빅 쿼트 (.cinema-quote-script) - 마진 0 */
.cinema-quote-script {
  position: relative;
  background: #fafafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 22px 24px 18px;
  margin: 0 !important;
  text-align: center;
  overflow: hidden;
}

.cinema-quote-script::before {
  content: '“';
  position: absolute;
  top: -12px;
  left: 14px;
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.cinema-quote-script .script-text {
  position: relative;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 8px;
  word-break: keep-all;
}

.cinema-quote-script .script-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-sub);
}

.cinema-quote-script .author-name {
  font-weight: 700;
  color: var(--text-main);
}

.cinema-quote-script .author-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* (6) 말풍선 스피치형 인용구 (.cinema-quote-bubble) - 마진 0 */
.cinema-quote-bubble {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 !important;
}

.cinema-quote-bubble .bubble-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 64px;
  flex-shrink: 0;
}

.cinema-quote-bubble .bubble-speaker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.cinema-quote-bubble .bubble-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cinema-quote-bubble .bubble-body {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-main);
  flex: 1;
  word-break: keep-all;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* (2) 에셋 갤러리 그리드 (.asset-gallery-grid) */
.asset-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.asset-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  position: relative;
  aspect-ratio: 1 / 1;
  transition: transform 0.15s ease;
}

.asset-item:hover {
  transform: scale(1.02);
  border-color: var(--border-dark);
}

.asset-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
}

.asset-item .asset-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  padding: 3px 5px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.asset-item:hover .asset-caption {
  opacity: 1;
}

/* (3) 트위터 / X 썰 백업 박스 (.tweet-backup) */
.tweet-backup {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}

.tweet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tweet-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.tweet-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tweet-name {
  font-weight: 700;
  font-size: 12.5px;
}

.tweet-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.tweet-body {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.tweet-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* (4) 대본집 & 소설형 대사록 다이얼로그 (.cinema-dialogue) - 위아래 마진 0 절대 강제 */
.cinema-dialogue,
div.cinema-dialogue,
.article-content-body .cinema-dialogue,
.feed-desc .cinema-dialogue,
.moreless-content .cinema-dialogue,
div[data-ke-type='moreLess'] .cinema-dialogue {
  background: #ffffff !important;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 씬 헤더: 장소/시간 설정 (#12. 비 내리는 골목길 - 밤) */
.dialogue-scene {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-card);
  margin-bottom: 4px;
}

/* 대사 라인 */
.dialogue-line {
  display: flex;
  gap: 10px;
  font-size: var(--text-base);
  line-height: 1.6;
}

.dialogue-line .speaker {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  min-width: 60px;
  color: var(--text-main);
  flex-shrink: 0;
}

.dialogue-line .line-text {
  flex: 1;
  color: var(--text-main);
}

/* 1) 소설/대본집 스타일: 상황 설명 및 서술 문단 (.dialogue-narrative) */
.dialogue-narrative {
  width: 100%;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-sub);
  margin: 4px 0;
  box-sizing: border-box;
  word-break: keep-all;
}

/* 2) 캐릭터의 내면 심리 / 속마음 독백 서술 (.dialogue-inner) */
.dialogue-inner {
  width: 100%;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-sub);
  font-style: italic;
  margin: 4px 0;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.02);
  border-left: 2px solid var(--border-dashed);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  box-sizing: border-box;
  word-break: keep-all;
}

/* 3) 짧은 행동 지문 (.dialogue-action) */
.dialogue-action {
  font-size: var(--text-base);
  color: var(--text-sub);
  line-height: 1.5;
  padding-left: 70px;
  box-sizing: border-box;
}

/* ==========================================================================
   (5) 메신저 / 카톡 채팅방 서식 (.cinema-chat-room)
   ========================================================================== */
.cinema-chat-room {
  max-width: 440px;
  margin: 22px auto;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  font-family: var(--font-main);
}

.chat-room-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-room-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}

.chat-room-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.chat-room-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 시스템 공지 / 날짜 구분선 / 상황 지문 */
.chat-date-notice {
  align-self: center;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 2px 0;
  letter-spacing: 0.02em;
}

.chat-action-notice {
  align-self: center;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-sub);
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  margin: 2px 0;
  line-height: 1.4;
  text-align: center;
}

/* 메시지 행 공통 */
.chat-msg {
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 1) 상대방 메시지 (좌측 말풍선) */
.chat-msg.incoming {
  align-items: flex-start;
}

.chat-msg .chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--text-main);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  overflow: hidden;
}

.chat-msg .chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: calc(100% - 46px);
}

.chat-msg.incoming .chat-sender {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-sub);
}

.chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.chat-msg.incoming .chat-bubble {
  background: #ffffff;
  border: 1px solid var(--border-card);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 2px 13px 13px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.chat-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 2) 나 / 주인공 메시지 (우측 말풍선) */
.chat-msg.outgoing {
  justify-content: flex-end;
}

.chat-msg.outgoing .chat-bubble-row {
  flex-direction: row-reverse;
}

.chat-msg.outgoing .chat-bubble {
  background: var(--text-main);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 13px 2px 13px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.chat-msg.outgoing .chat-time {
  text-align: right;
}

/* 카카오톡 노란색 테마 클래스 (.theme-kakao) */
.cinema-chat-room.theme-kakao {
  background: #bacada;
}

.cinema-chat-room.theme-kakao .chat-msg.outgoing .chat-bubble {
  background: #fee500;
  color: #191919;
}

/* ==========================================================================
   (6) 티스토리 기본 접은글 / 더보기 서식 (More / Less Spoiler Fold)
   ========================================================================== */

/* 컨테이너 (위아래 마진 절대 0 강제) */
div[data-ke-type='moreLess'],
.article-content-body div[data-ke-type='moreLess'],
.feed-desc div[data-ke-type='moreLess'] {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  clear: both !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 더보기 / 닫기 토글 버튼: 위아래 마진 절대 0 강제 */
div[data-ke-type='moreLess'] .btn-toggle-moreless,
.article-content-body div[data-ke-type='moreLess'] .btn-toggle-moreless,
div[data-ke-type='moreLess'] > a.btn-toggle-moreless,
a.btn-toggle-moreless,
.btn-toggle-moreless {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: #f8f9fa !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-main) !important;
  font-family: var(--font-main) !important;
  font-size: 12.5px !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  user-select: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* 버튼 앞쪽 미니 인디케이터 (사각 포인트) */
div[data-ke-type='moreLess'] .btn-toggle-moreless::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

/* 버튼 뒤쪽 세련된 쉐브론 화살표 회전 */
div[data-ke-type='moreLess'] .btn-toggle-moreless::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* 버튼 호버 */
div[data-ke-type='moreLess'] .btn-toggle-moreless:hover,
.article-content-body div[data-ke-type='moreLess'] .btn-toggle-moreless:hover {
  background: #eef1f4 !important;
  color: var(--text-main) !important;
  transform: none !important;
  box-shadow: none !important;
}

div[data-ke-type='moreLess'] .btn-toggle-moreless:hover::before {
  opacity: 0.85;
  transform: scale(1.15);
}

/* 열린 상태 (Open) 버튼: 하단 모서리 0 및 위아래 마진 0 */
div[data-ke-type='moreLess'].open .btn-toggle-moreless,
.article-content-body div[data-ke-type='moreLess'].open .btn-toggle-moreless,
div[data-ke-type='moreLess'].open > a.btn-toggle-moreless {
  background: #f8f9fa !important;
  color: var(--text-main) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

div[data-ke-type='moreLess'].open .btn-toggle-moreless::after {
  transform: rotate(-135deg) translateY(-1px);
}

div[data-ke-type='moreLess'].open .btn-toggle-moreless:hover {
  background: #eef1f4 !important;
}

/* 펼쳐진 본문 컨테이너 (.moreless-content): 상하 마진 0 */
.moreless-content,
div[data-ke-type='moreLess'] .moreless-content,
.article-content-body div[data-ke-type='moreLess'] .moreless-content {
  display: none;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 20px 22px !important;
  background: #f8f9fa !important;
  border: none !important;
  border-top: 1px dashed var(--border-light) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: var(--text-main) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ★ 대본집(.cinema-dialogue)이 들어간 접은글: 패딩 및 배경은 제거하되 대본집 본래의 4면 테두리(border-top 포함)와 라운드는 완전 유지 */
div[data-ke-type='moreLess']:has(.cinema-dialogue) .moreless-content,
.moreless-content:has(.cinema-dialogue),
.moreless-content.has-dialogue {
  padding: 0 !important;
  background: transparent !important;
  border-top: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

div[data-ke-type='moreLess']:has(.cinema-dialogue) .cinema-dialogue,
.moreless-content > .cinema-dialogue,
.moreless-content.has-dialogue .cinema-dialogue {
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* moreLess 및 cinema-dialogue 상하 여백 강제 제거 (인접 요소 간격 0) */
div[data-ke-type='moreLess'] + div[data-ke-type='moreLess'],
.cinema-dialogue + .cinema-dialogue,
div[data-ke-type='moreLess'] + .cinema-dialogue,
.cinema-dialogue + div[data-ke-type='moreLess'],
.article-content-body p + div[data-ke-type='moreLess'],
.article-content-body div[data-ke-type='moreLess'] + p,
.article-content-body p + .cinema-dialogue,
.article-content-body .cinema-dialogue + p {
  margin-top: 0 !important;
}

/* 에디터 자동 생성 빈 문단(p) 마진 제거 */
.article-content-body p:has(> br:only-child) + div[data-ke-type='moreLess'],
.article-content-body div[data-ke-type='moreLess'] + p:has(> br:only-child),
.article-content-body p:has(> br:only-child) + .cinema-dialogue,
.article-content-body .cinema-dialogue + p:has(> br:only-child),
.article-content-body p:has(> div[data-ke-type='moreLess']),
.article-content-body p:has(> .cinema-dialogue) {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

div[data-ke-type='moreLess'].open .moreless-content,
.article-content-body div[data-ke-type='moreLess'].open .moreless-content {
  display: block;
  animation: morelessFadeIn 0.2s ease-out forwards;
}

@keyframes morelessFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 접은글 내부 문단 줄바꿈 강제 및 튀어나감 완전 방지 */
.moreless-content {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
}

.moreless-content > p,
div[data-ke-type='moreLess'] .moreless-content > p {
  margin-bottom: 1.2em !important;
  line-height: 1.85 !important;
  font-size: inherit;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.moreless-content > p:last-child,
div[data-ke-type='moreLess'] .moreless-content > p:last-child {
  margin-bottom: 0 !important;
}

/* 접은글(moreLess) 내부에 대본집(.cinema-dialogue), 채팅방, 트윗 등 컴포넌트 삽입 시 여백 및 스타일 완벽 보호 */
.moreless-content .cinema-dialogue {
  background: #ffffff !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 16px 18px !important;
  gap: 10px !important;
  border-radius: var(--radius-sm) !important;
}

.moreless-content .cinema-dialogue .dialogue-scene {
  margin-bottom: 4px !important;
  padding-bottom: 6px !important;
}

.moreless-content .cinema-dialogue .dialogue-line {
  margin: 0 !important;
  gap: 10px !important;
  display: flex !important;
}

.moreless-content .cinema-dialogue .dialogue-line .speaker {
  margin: 0 !important;
  line-height: 1.6 !important;
  min-width: 60px !important;
}

.moreless-content .cinema-dialogue .dialogue-line .line-text {
  margin: 0 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
}

.moreless-content .cinema-dialogue .dialogue-narrative {
  margin: 4px 0 !important;
  line-height: 1.75 !important;
}

.moreless-content .cinema-dialogue .dialogue-inner {
  margin: 4px 0 !important;
  line-height: 1.75 !important;
  background: var(--bg-sub) !important;
}

.moreless-content .cinema-chat-room {
  margin: 16px auto !important;
}

.moreless-content .tweet-backup {
  margin: 14px 0 !important;
}

/* 접은글 내부 이미지 및 영상 대응 */
.moreless-content img,
.moreless-content video,
.moreless-content iframe {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-xs);
}

/* [선택 테마 A] 스포일러 / 후방주의 테마 (.theme-spoiler) */
div[data-ke-type='moreLess'].theme-spoiler .btn-toggle-moreless {
  background: rgba(224, 49, 49, 0.08) !important;
  color: #c92a2a !important;
}

div[data-ke-type='moreLess'].theme-spoiler .btn-toggle-moreless:hover {
  background: rgba(224, 49, 49, 0.14) !important;
  color: #c92a2a !important;
}

div[data-ke-type='moreLess'].theme-spoiler .moreless-content {
  background: rgba(224, 49, 49, 0.03) !important;
  border-top-color: rgba(224, 49, 49, 0.22) !important;
}

/* ==========================================================================
   8. 푸터 & 라이트박스
   ========================================================================== */
.cinema-footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border-card);
  background: var(--bg-card);
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cinema-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cinema-lightbox.active {
  display: flex;
}

.lightbox-content-box {
  max-width: 90vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-content-box img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

.lightbox-caption {
  margin-top: 10px;
  width: auto;
  max-width: 90vw;
  box-sizing: border-box;
}

.lightbox-post-card {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  background: rgba(18, 20, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}

.lightbox-post-card:hover {
  background: rgba(26, 30, 36, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
}

.lightbox-post-card:hover .lb-title {
  text-decoration: underline;
  color: #ffffff;
}

/* 카테고리나 태그 뱃지 위에 마우스가 올라갔을 때는 카드 전체 호버(제목 밑줄 등)가 아닌 해당 뱃지 자체에 집중 */
.lightbox-post-card:has(.lb-cat-badge:hover) .lb-title,
.lightbox-post-card:has(.lb-tag-item:hover) .lb-title {
  text-decoration: none;
}

/* 1) 한 줄 헤더 행: [카테고리] [제목(말줄임)] ...... [날짜(우측 밀착)] */
.lb-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  color: inherit;
}

.lb-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.lb-cat-badge {
  font-family: var(--font-main) !important;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: -0.01em;
  white-space: nowrap !important;
  flex-shrink: 0;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  display: inline-block;
}

.lb-cat-badge:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.lb-title {
  font-family: var(--font-main) !important;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  text-align: left;
  transition: color 0.15s ease;
}

.lb-date {
  font-family: var(--font-main) !important;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65) !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  margin-left: auto;
}

/* 2) 그 아래 태그 영역 (공통 칩 표준 적용) */
.lb-tags-row {
  width: 100%;
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}

.lightbox-close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

/* 반응형 미디어 쿼리 */
@media (max-width: 900px) {
  .cinema-main-layout {
    display: flex;
    flex-direction: column;
    padding: 16px 12px 40px;
    gap: 16px;
  }
  #sidebar {
    display: contents;
  }
  .sidebar-ticket-header,
  .compact-ticket-header {
    order: 1;
    margin-bottom: 2px;
  }
  #main-content {
    order: 2;
  }
  .sidebar-widgets-wrap {
    order: 3;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .posts-container.view-gallery:not(.masonry-ready) > .view-item[data-view="gallery"],
  .posts-container.view-gallery2:not(.masonry-ready) > .view-item[data-view="gallery2"] {
    flex: 0 0 calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
  .col-cat,
  .col-tags {
    display: none;
  }
}

@media (max-width: 580px) {
  /* 얇은 티켓 카테고리 바 소형 화면 최적화 */
  .category-ticket-barcode {
    display: none;
  }
  .category-ticket-main {
    padding: 7px 10px;
    gap: 6px;
  }
  .category-ticket-stub {
    padding: 6px 10px;
    gap: 6px;
  }
  .category-ticket-badge {
    font-size: 8px;
    padding: 1px 4.5px;
  }
  .category-summary-bar .title {
    font-size: 12px;
  }
  .category-summary-bar .count {
    font-size: 10px;
  }
}

@media (max-width: 460px) {
  .posts-container.view-gallery:not(.masonry-ready) > .view-item[data-view="gallery"],
  .posts-container.view-gallery2:not(.masonry-ready) > .view-item[data-view="gallery2"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   HOME COVER SYSTEM (티스토리 홈 커버 UI 블럭 시스템)
   ========================================================================== */

/* 홈 커버 전체 래퍼 */
.cinema-cover-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
  width: 100%;
}

/* 커버 개별 섹션 공통 */
.cover-section {
  width: 100%;
}

/* 커버 섹션 헤더 (타이틀 바) */
.cover-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

/* 홈커버에서 지정된 타이틀이 없는 경우 헤더 전체 숨김 */
.cover-section-header.no-title,
.cover-section-header:has(.cover-section-title:empty) {
  display: none !important;
}

.cover-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cover-badge {
  display: inline-block;
  background: var(--border-dark);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.cover-section-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin: 0;
}

.cover-more-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.15s ease;
}

.cover-more-btn:hover {
  color: var(--text-main);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   1. [블럭] 프로필 / 자기소개 (cover-profile)
   -------------------------------------------------------------------------- */
.cover-profile-wrap {
  width: 100%;
}

.profile-card-ticket {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.profile-card-ticket:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

/* 상/하 타공 홈 (절취선 상하단 티켓 펀칭 노치 - 카드의 상/하단 가로선을 완전히 지워 안쪽으로 파인 구멍 형상 구현) */
.profile-card-ticket::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 100px;
  margin-right: -7px;
  width: 14px;
  height: 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  z-index: 10;
  box-shadow: 0 -2px 0 0 var(--bg-main);
}

.profile-card-ticket::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 100px;
  margin-right: -7px;
  width: 14px;
  height: 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-bottom: none;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  z-index: 10;
  box-shadow: 0 2px 0 0 var(--bg-main);
}

.profile-card-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  min-width: 0;
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
}

.profile-avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.profile-avatar-frame {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid var(--border-dark);
  overflow: hidden;
  background: var(--bg-sub);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  padding: 2px 8px;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-sub);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  display: inline-block;
  animation: pulse-green 2s infinite ease-in-out;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.profile-content-area {
  flex: 1;
  min-width: 0;
}

.profile-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-tag-pill {
  background: var(--border-dark);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

.profile-serial-code {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.profile-name-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.015em;
  margin: 0 0 6px 0;
}

.profile-bio-box {
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.6;
  word-break: break-word;
}

.profile-links-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.profile-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: all 0.15s ease;
}

.profile-chip-btn:hover {
  background: var(--border-dark);
  color: #ffffff;
  border-color: var(--border-dark);
}

.profile-chip-btn svg {
  stroke-width: 2.2;
}

/* 프로필 우측 스텁 영역 */
.profile-card-perforation {
  width: 0;
  border-left: 1px dashed var(--border-dashed);
  position: relative;
  z-index: 2;
}

.profile-card-stub {
  width: 100px;
  flex-shrink: 0;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border-top-right-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}

.profile-stub-barcode {
  width: 60px;
  height: 36px;
  background: repeating-linear-gradient(
    90deg,
    #18191b 0, #18191b 2px,
    transparent 2px, transparent 4px,
    #18191b 4px, #18191b 7px,
    transparent 7px, transparent 8px,
    #18191b 8px, #18191b 9px,
    transparent 9px, transparent 12px
  );
  opacity: 0.75;
}

.profile-stub-text {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   2. [블럭] 디데이 / 카운트다운 (cover-dday)
   -------------------------------------------------------------------------- */
.cover-dday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  width: 100%;
}

.cover-dday-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-dday-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

/* 디데이 카드 썸네일 (옵션) */
.dday-card-thumb {
  width: 68px;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-sub);
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
}

.dday-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
}

.dday-card-body {
  flex: 1;
  padding: 13px 15px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dday-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.dday-type-badge {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.dday-target-date-display {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.dday-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dday-card-desc {
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dday-card-perforation {
  width: 0;
  border-left: 1px dashed var(--border-dashed);
  position: relative;
  z-index: 2;
}

/* 절취선 상하 타공 홀 (상단/하단 테두리 선 덮음 & 바깥 선 없는 완벽한 노치) */
.cover-dday-card::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 80px;
  margin-right: -6px;
  width: 12px;
  height: 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
  box-shadow: 0 -2px 0 0 var(--bg-main);
}

.cover-dday-card::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 80px;
  margin-right: -6px;
  width: 12px;
  height: 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  z-index: 10;
  box-shadow: 0 2px 0 0 var(--bg-main);
}

.dday-card-stub {
  width: 80px;
  flex-shrink: 0;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  transition: background 0.15s ease;
  border-top-right-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}

.dday-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dday-calc-badge {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* 부가 설명 텍스트 숨김 (D+, D-, D-DAY만 심플하게 표시) */
.dday-calc-sub {
  display: none !important;
}

/* 커플 디데이 & 상태별 감성 디자인 */
.cover-dday-card.is-today .dday-card-stub {
  background: var(--border-dark);
}
.cover-dday-card.is-today .dday-calc-badge {
  color: #ffffff;
}

/* 다가오는 디데이 (미래) */
.cover-dday-card.is-upcoming .dday-calc-badge {
  color: #1e293b;
}
.cover-dday-card.is-upcoming .dday-calc-sub {
  color: #64748b;
}

/* 함께한 날 (과거 기념일 / 커플 기념일: +520일) */
.cover-dday-card.is-past .dday-calc-badge,
.cover-dday-card.is-anniversary .dday-calc-badge {
  color: #e11d48;
}
.cover-dday-card.is-past .dday-calc-sub,
.cover-dday-card.is-anniversary .dday-calc-sub {
  color: #e11d48;
  font-weight: 600;
}
.cover-dday-card.is-past .dday-type-badge,
.cover-dday-card.is-anniversary .dday-type-badge {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #ffe4e6;
}

/* --------------------------------------------------------------------------
   3. [블럭] 공지 / 배너 알림 (cover-notice)
   -------------------------------------------------------------------------- */
.cover-notice-wrap {
  width: 100%;
}

.cover-notice-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--border-dark);
  border-radius: var(--radius-xs);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, transform 0.15s ease;
}

.cover-notice-card:hover {
  background: #fbfcfd;
  transform: translateY(-1px);
}

.notice-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.notice-label-pill {
  background: var(--border-dark);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.notice-texts {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.notice-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

.notice-subtext {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-card-right {
  flex-shrink: 0;
}

.notice-link-arrow {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 3px 8px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--bg-sub);
  transition: all 0.15s ease;
}

.cover-notice-card:hover .notice-link-arrow {
  background: var(--border-dark);
  color: #ffffff;
  border-color: var(--border-dark);
}

/* --------------------------------------------------------------------------
   4. [블럭] 명언 / 영화 명대사 (cover-quote)
   -------------------------------------------------------------------------- */
.cover-quote-wrap {
  width: 100%;
}

.cover-quote-box {
  background: var(--bg-card);
  border: 1px dashed var(--border-dashed);
  border-radius: var(--radius-sm);
  padding: 24px 32px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-quote-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: #94a3b8;
}

.quote-cinema-mark {
  font-size: 32px;
  line-height: 1;
  font-family: var(--font-serif);
  color: #cbd5e1;
  margin-bottom: 6px;
}

.quote-main-text {
  font-size: 13.5px;
  font-style: italic;
  color: #334155;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 12px auto;
  word-break: keep-all;
}

.quote-source-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quote-dash {
  width: 14px;
  height: 1px;
  background: var(--border-dashed);
}

.quote-cite-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-style: normal;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. [블럭] 퀵 링크 바로가기 그리드 (cover-links)
   -------------------------------------------------------------------------- */
.cover-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  width: 100%;
}

.cover-link-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-link-chip:hover {
  background: var(--border-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.link-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-sub);
  flex-shrink: 0;
}

.link-chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-chip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.link-chip-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  transition: color 0.15s ease;
}

.link-chip-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.link-chip-arrow {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  transition: transform 0.15s ease, color 0.15s ease;
}

.cover-link-chip:hover .link-chip-title {
  color: #ffffff;
}

.cover-link-chip:hover .link-chip-sub {
  color: #cbd5e1;
}

.cover-link-chip:hover .link-chip-arrow {
  color: #ffffff;
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   6. [피드] 티켓 아카이브 피드 (cover-ticket)
   -------------------------------------------------------------------------- */
.cover-ticket-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cover-ticket-list-wrap .ticket-row-card {
  display: flex !important;
  width: 100% !important;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  min-height: 106px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-ticket-list-wrap .ticket-row-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

/* --------------------------------------------------------------------------
   7-1. [피드] 갤러리 1: 기본 카드형 (cover-gallery)
   -------------------------------------------------------------------------- */
.cover-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  width: 100%;
}

.cover-gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

.cover-gal-thumb-link {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sub);
  display: block;
}

/* --------------------------------------------------------------------------
   7-2. [피드] 갤러리 2: 태그 갤러리 (cover-gallery-tag - 갤러리 1 스킨 스타일)
   -------------------------------------------------------------------------- */
.cover-tag-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  width: 100%;
}

.cover-tag-gallery-grid .masonry-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-tag-gallery-grid .masonry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

.cover-tag-gallery-grid .masonry-card .masonry-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-sub);
}

.cover-tag-gallery-grid .masonry-card .masonry-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition-img);
}

.cover-tag-gallery-grid .masonry-card:hover .masonry-img-wrap img {
  transform: scale(1.025);
}

.cover-tag-summary {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7-3. [피드] 갤러리 3: 순수 이미지 핀터레스트 (cover-gallery-pure - 갤러리 2 스킨 스타일)
   -------------------------------------------------------------------------- */
.cover-pure-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}

.cover-pure-gallery-grid .pure-masonry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-pure-gallery-grid .pure-masonry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

.cover-pure-gallery-grid .pure-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.cover-pure-gallery-grid .pure-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition-img);
}

.cover-pure-gallery-grid .pure-masonry-card:hover .pure-img-wrap img {
  transform: scale(1.025);
}

.cover-gal-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.cover-gallery-card:hover .cover-gal-thumb-link img {
  transform: scale(1.04);
}

.cover-gal-cat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(24, 25, 27, 0.85);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  backdrop-filter: blur(4px);
}

.cover-gal-meta {
  padding: 10px 12px;
}

.cover-gal-heading {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-gal-heading a {
  color: inherit;
  text-decoration: none;
}

.cover-gal-heading a:hover {
  text-decoration: underline;
}

.cover-gal-date-text {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   8. [피드] 웹진 피드 (cover-webzine)
   -------------------------------------------------------------------------- */
.cover-webzine-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.cover-wz-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex;
  overflow: hidden;
  padding: 14px 16px;
  gap: 16px;
  align-items: center;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.cover-wz-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

.cover-wz-photo {
  width: 120px;
  height: 80px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-sub);
  display: block;
}

.cover-wz-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.cover-wz-item:hover .cover-wz-photo img {
  transform: scale(1.05);
}

.cover-wz-content {
  flex: 1;
  min-width: 0;
}

.cover-wz-topmeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cover-wz-badge {
  font-size: 8.5px;
  font-weight: 700;
  background: var(--bg-sub);
  color: var(--text-sub);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--font-mono);
}

.cover-wz-date-val {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cover-wz-headline {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-wz-headline a {
  color: inherit;
  text-decoration: none;
}

.cover-wz-headline a:hover {
  text-decoration: underline;
}

.cover-wz-desc {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. [피드] 미니멀 1줄 목록 (cover-list)
   -------------------------------------------------------------------------- */
.cover-list-table {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cover-list-line {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
  transition: background 0.12s ease;
}

.cover-list-line:last-child {
  border-bottom: none;
}

.cover-list-line:hover {
  background: var(--bg-hover);
}

.cover-list-cat-pill {
  font-size: 9px;
  font-weight: 700;
  background: var(--bg-sub);
  color: var(--text-sub);
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.cover-list-line-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.cover-list-line-title:hover {
  text-decoration: underline;
}

.cover-list-line-date {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   커버 모바일 미디어 쿼리 (반응형 최적화)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 680px) {
  .cinema-cover-wrapper {
    gap: 24px;
    margin-bottom: 28px;
  }

  /* 프로필 모바일 세로형 배치 */
  .profile-card-ticket {
    flex-direction: column;
  }
  .profile-card-ticket::before,
  .profile-card-ticket::after {
    display: none;
  }
  .profile-card-main {
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
    gap: 14px;
  }
  .profile-meta-bar {
    justify-content: center;
  }
  .profile-links-row {
    justify-content: center;
  }
  .profile-card-perforation {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 1px dashed var(--border-dashed);
  }
  .profile-card-stub {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 16px;
  }
  .profile-stub-barcode {
    width: 50px;
    height: 20px;
  }

  /* 디데이 1열 및 패딩 */
  .cover-dday-grid {
    grid-template-columns: 1fr;
  }
  .cover-dday-card::before,
  .cover-dday-card::after {
    display: none;
  }

  /* 공지 모바일 세로 스택 */
  .cover-notice-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .notice-texts {
    flex-direction: column;
    gap: 2px;
  }
  .notice-card-right {
    align-self: flex-end;
  }

  /* 갤러리 2열 */
  .cover-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 웹진 모바일 썸네일 축소 */
  .cover-wz-photo {
    width: 90px;
    height: 65px;
  }

  .cover-quote-box {
    padding: 18px 20px;
  }
  .quote-main-text {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   12. CHARACTER & PAIR LIST SYSTEM (캐릭터 & 페어 아카이브 스킨 및 본문 템플릿)
   - 시네마 티켓 테마에 맞춘 증명사진 캐스팅 그리드 & 웹진형 페어 스트림
   - 본문 내에서 쓸 수 있는 세련된 프로필 템플릿 UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   (1) 캐릭터 리스트 뷰 (.view-character / .cover-character-grid)
   - 증명사진 / 이력서 / 캐스팅 카드 느낌의 3:4 두상 썸네일 그리드
   -------------------------------------------------------------------------- */
.posts-container.view-character,
.cover-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 14px;
  width: 100%;
}

.posts-container.view-character > .view-item[data-view="character"] {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.posts-container.view-character > .view-item[data-view="character"] .character-cast-card {
  flex: 1;
  height: 100%;
}

.character-cast-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.character-cast-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}

/* 두상 / 증명사진 프레임 (3:4 포트레이트 비율) */
.cast-thumb-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-sub);
  position: relative;
  overflow: hidden;
}

.cast-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-img);
}


.cast-thumb-wrap img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-img);
  z-index: 2;
}

.cast-no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-muted);
  background: var(--bg-sub);
  z-index: 1;
}

.cast-no-thumb svg {
  opacity: 0.45;
}

.cast-no-thumb span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.character-cast-card:hover .cast-thumb-wrap img {
  transform: scale(1.03);
}

/* 좌측 상단 CAST ID 뱃지 */
.cast-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(24, 25, 27, 0.85);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* 우측 상단 넘버링 (JS initCharacterNumbers에 의해 역순 자동 생성) */
.cast-number {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-main);
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* 캐릭터 정보 영역 (이력서/티켓 라벨 느낌) */
.cast-info-box {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
}

.cast-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.cast-code {
  display: none !important;
}

.cast-role-pill {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--bg-sub);
  padding: 1.5px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  text-decoration: none;
  transition: all 0.15s ease;
}

.cast-role-pill:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.cast-name-ko {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 1px 0;
  line-height: 1.3;
}

.cast-name-en {
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cast-summary {
  display: none !important;
}

/* 캐릭터 카드 맨 하단 태그 한 줄 */
.cast-tags-line {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  gap: 4.5px;
  width: 100%;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
}

.cast-tags-line a,
.cast-tags-line span {
  font-size: 9.5px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.cast-tags-line a:hover {
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   (2) 페어 리스트 뷰 (.view-pair / .cover-pair-feed)
   - 웹진 피드 스타일: 리스트에서 각 페어의 전체 본문 및 상세 서식을 바로 확인
   - 본문 상세 화면 및 웹진 피드 카드와 동일한 헤더 및 콘텐츠 구조
   -------------------------------------------------------------------------- */
.posts-container.view-pair,
.cover-pair-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.posts-container.view-pair > .view-item[data-view="pair"] {
  display: block !important;
  width: 100%;
}

/* 커버 페어 섹션: 날짜, 작성자, 본문 요약, 태그 완전 숨김 (오직 배너만 노출) */
.cover-pair-section .feed-header,
.cover-pair-section .feed-content,
.cover-pair-section .feed-tags-wrap {
  display: none !important;
}

.cover-pair-section .pair-feed-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cover-pair-section .pair-banner-headline {
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* 커버 캐릭터 섹션: 본문 요약/내용 완전 숨김 */
.cover-character-section .cast-summary {
  display: none !important;
}

.pair-feed-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pair-feed-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-card-hover);
}

/* 페어 피드 내 본문 영역: 배너 바로 아래 템플릿이 쾌적하게 안착되도록 패딩 부여 */
.pair-feed-card .feed-content {
  padding: 24px 24px 26px !important;
  flex: 1;
}

.pair-feed-card .feed-desc {
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--article-font-size, 13px);
  line-height: 1.8;
  color: var(--text-main);
}

.pair-feed-card .feed-desc > p {
  margin: 16px 20px !important;
}

.pair-feed-card .feed-desc > .cinema-quote-bar {
  margin: 14px 20px 16px !important;
}

/* 페어 피드 내 접은글/토글: 아래 마진 완전 제거 및 100% 일체형 버튼화 */
.pair-feed-card .theme-pair-story,
.pair-feed-card .pair-full-toggle,
.pair-feed-card div[data-ke-type="moreLess"] {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
}

.pair-feed-card .theme-pair-story .btn-toggle-moreless,
.pair-feed-card .pair-full-toggle .btn-toggle-moreless,
.pair-feed-card div[data-ke-type="moreLess"] .btn-toggle-moreless {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--bg-sub) !important;
  color: var(--text-main) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-main) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 11px 18px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.pair-feed-card .theme-pair-story .btn-toggle-moreless:hover,
.pair-feed-card .pair-full-toggle .btn-toggle-moreless:hover,
.pair-feed-card div[data-ke-type="moreLess"] .btn-toggle-moreless:hover {
  background: var(--bg-hover) !important;
  border-color: transparent !important;
  color: var(--text-main) !important;
}

.pair-feed-card .theme-pair-story.open .btn-toggle-moreless,
.pair-feed-card .pair-full-toggle.open .btn-toggle-moreless,
.pair-feed-card div[data-ke-type="moreLess"].open .btn-toggle-moreless {
  border-bottom: 1px dashed var(--border-light) !important;
}

/* 페어의 접기 안쪽 부분(펼쳐진 본문/템플릿 영역)에 쾌적한 안쪽 패딩 부여 */
.pair-feed-card .theme-pair-story.open .moreless-content,
.pair-feed-card .pair-full-toggle.open .moreless-content,
.pair-feed-card div[data-ke-type="moreLess"].open .moreless-content {
  padding: 22px 24px 26px !important;
  background: transparent !important;
  margin: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* 페어 피드 카드 내부의 .cinema-pair-template: feed-content에서 일괄 패딩을 주므로 템플릿 패딩은 0으로 유지 */
.pair-feed-card .cinema-pair-template,
.pair-feed-card .feed-desc > .cinema-pair-template {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 22px !important;
}

/* 페어 피드 카드 내부에서는 상단 대표 배너가 이미 노출되므로 템플릿 내부의 중복 배너 숨김 */
.pair-feed-card .cinema-pair-template .pair-doc-banner,
.pair-feed-card .cinema-pair-template .pair-hero-banner {
  display: none !important;
}

.pair-feed-card .cinema-pair-template::after {
  margin-top: 12px;
}

/* 페어 피드 하단 바: 좌측 태그 + 우측 하단 날짜 및 관리자 액션(수정/잠금/삭제) */
.pair-feed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 14px;
  border-top: 1px dashed var(--border-light);
  width: 100%;
  box-sizing: border-box;
}

.pair-feed-footer .feed-tags-wrap {
  padding: 0 !important;
  border-top: none !important;
  flex: 1;
  min-width: 0;
}

.pair-feed-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.pair-feed-meta-right s_ad_div,
.pair-feed-meta-right .article-admin-actions,
.pair-feed-meta-right .feed-admin-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.pair-feed-meta-right .meta-divider {
  color: var(--border-dashed);
  font-size: 11px;
  user-select: none;
  margin: 0 1px;
}

/* ==========================================================================
   페어 게시판 배너형 헤드라인 (웹진 피드 상단 꽉 차는 대표 이미지 배너)
   ========================================================================== */
.pair-feed-card .pair-banner-headline {
  position: relative;
  width: 100%;
  height: 230px;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  padding: 24px 26px;
  box-sizing: border-box;
  overflow: hidden;
  background: #18191b;
}

/* 게시물 대표 이미지 (100% 꽉 차는 cover) */
.pair-feed-card .pair-headline-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #18191b;
}

.pair-feed-card .pair-headline-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  border: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pair-feed-card:hover .pair-headline-img-wrap img {
  transform: scale(1.035);
}

/* 시네마틱 딤드 그라데이션 오버레이 (제목 가독성 및 무드 극대화) */
.pair-feed-card .pair-headline-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(15, 16, 19, 0.15) 0%,
    rgba(15, 16, 19, 0.45) 45%,
    rgba(15, 16, 19, 0.92) 100%
  );
  pointer-events: none;
}

/* 배너 내부 텍스트 콘텐츠 (카테고리 뱃지 + 제목) */
.pair-feed-card .pair-headline-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.pair-feed-card .pair-banner-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.18s ease;
  line-height: 1.25;
}

.pair-feed-card .pair-banner-cat:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #18191b !important;
}

.pair-feed-card .pair-headline-title {
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  word-break: keep-all;
}

.pair-feed-card .pair-headline-title a {
  color: #ffffff !important;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.pair-feed-card .pair-headline-title a:hover {
  opacity: 0.92;
  text-decoration: underline;
}

/* 제목과 날짜/관리자 버튼을 묶는 하단 가로 행 (제목 좌측, 날짜/버튼 우측) */
.pair-feed-card .pair-headline-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  box-sizing: border-box;
}

.pair-feed-card .pair-headline-bottom-row .pair-headline-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* 배너 우측 하단 메타 영역: 블러/보더/배경색 없이 깔끔한 텍스트 및 아이콘 정렬 */
.pair-feed-card .pair-banner-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex-shrink: 0;
  z-index: 5;
}

.pair-feed-card .pair-banner-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.pair-feed-card .pair-banner-meta-right .meta-divider {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  user-select: none;
  margin: 0 1px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* 배너 전용 관리자 액션 버튼 (배경/보더 없이 아이콘만 심플 노출) */
.pair-feed-card .banner-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pair-feed-card .banner-admin-actions .admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  transition: color 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.pair-feed-card .banner-admin-actions .admin-action-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.pair-feed-card .banner-admin-actions .admin-action-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.pair-feed-card .banner-admin-actions .admin-action-btn.del:hover {
  background: transparent !important;
  border: none !important;
  color: #ff5252 !important;
}

.pair-feed-card .banner-admin-actions .admin-action-btn.status:hover {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .pair-feed-card .pair-headline-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* 모바일 반응형 배너 높이 조정 */
@media (max-width: 768px) {
  .pair-feed-card .pair-banner-headline {
    height: 180px;
    min-height: 160px;
    padding: 18px 20px;
  }
  .pair-feed-card .pair-headline-title {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   티스토리 기본 에디터 [사진 추가] 기능 완벽 호환 및 cover 자동화
   - 어떤 크기/해상도/비율(가로, 세로, 4K 등)의 이미지를 티스토리 기본 기능으로 업로드해도
   - 티스토리가 생성하는 figure, imageblock, span, p 래퍼의 마진을 자동 무력화하고
   - 프레임 규격(배너, 원형 아바타, 3:4 증명사진 등)에 맞춰 100% 꽉 차게(cover) 자동 정렬
   -------------------------------------------------------------------------- */
.pair-member-avatar figure,
.pair-member-avatar .imageblock,
.pair-member-avatar span,
.pair-member-avatar p,
.char-card-thumb figure,
.char-card-thumb .imageblock,
.char-card-thumb span,
.char-card-thumb p,
.char-portrait-frame figure,
.char-portrait-frame .imageblock,
.char-portrait-frame span,
.char-portrait-frame p,
.char-dossier-portrait figure,
.char-dossier-portrait .imageblock,
.char-dossier-portrait span,
.char-dossier-portrait p,
.cast-thumb-wrap figure,
.cast-thumb-wrap .imageblock,
.cast-thumb-wrap span,
.cast-thumb-wrap p,
.pair-doc-banner figure,
.pair-doc-banner .imageblock,
.pair-doc-banner span,
.pair-doc-banner p,
.asset-item figure,
.asset-item .imageblock,
.asset-item span,
.asset-item p,
.chat-avatar figure,
.chat-avatar .imageblock,
.chat-avatar span,
.chat-avatar p,
.tweet-avatar figure,
.tweet-avatar .imageblock,
.tweet-avatar span,
.tweet-avatar p {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
}

/* 티스토리 캡션(figcaption) 자동 숨김 (아바타/썸네일/배너 내 레이아웃 깨짐 방지) */
.pair-member-avatar figcaption,
.char-card-thumb figcaption,
.char-portrait-frame figcaption,
.char-dossier-portrait figcaption,
.cast-thumb-wrap figcaption,
.pair-doc-banner figcaption,
.asset-item figcaption,
.chat-avatar figcaption,
.tweet-avatar figcaption {
  display: none !important;
}

/* 내부 모든 img 태그: 티스토리 인라인 스타일(style="width: ...") 무력화 및 완벽한 cover 강제 */
.pair-member-avatar img,
.char-card-thumb img,
.char-portrait-frame img,
.char-dossier-portrait img,
.cast-thumb-wrap img,
.chat-avatar img,
.tweet-avatar img {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  cursor: default !important;
  max-width: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 페어 본문 문서(.cinema-pair-template) 내 배너 이미지 자동 cover 처리 (직접 img 또는 티스토리 figure/imageblock 첨부 지원) */
.cinema-pair-template .pair-doc-banner,
.cinema-pair-template .pair-hero-banner,
.cinema-pair-template .pair-cover-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-light);
  margin-bottom: 4px;
  background: #18191b;
  position: relative;
}

.cinema-pair-template .pair-doc-banner img,
.cinema-pair-template .pair-hero-banner img,
.cinema-pair-template .pair-cover-img img,
.cinema-pair-template > img,
.cinema-pair-template > figure img,
.cinema-pair-template > .imageblock img,
.cinema-pair-template > p > img,
.cinema-pair-template > p > figure img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--radius-xs);
  margin: 0 0 4px 0 !important;
  display: block !important;
  border: none !important;
}

.cinema-pair-template > figure,
.cinema-pair-template > .imageblock,
.cinema-pair-template > p:has(> img),
.cinema-pair-template > p:has(> figure) {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  border-radius: var(--radius-xs);
}

@media (max-width: 680px) {
  .cinema-pair-template .pair-doc-banner,
  .cinema-pair-template .pair-hero-banner,
  .cinema-pair-template .pair-cover-img,
  .cinema-pair-template .pair-doc-banner img,
  .cinema-pair-template .pair-hero-banner img,
  .cinema-pair-template .pair-cover-img img,
  .cinema-pair-template > img,
  .cinema-pair-template > figure img,
  .cinema-pair-template > .imageblock img,
  .cinema-pair-template > p > img,
  .cinema-pair-template > p > figure img,
  .cinema-pair-template > figure,
  .cinema-pair-template > .imageblock,
  .cinema-pair-template > p:has(> img),
  .cinema-pair-template > p:has(> figure) {
    height: 160px !important;
  }
}

/* --------------------------------------------------------------------------
   (3) 본문 템플릿: 페어 아카이브 도시에 (PAIR ARCHIVE DOSSIER TEMPLATE)
   - 파편화된 네모 박스들을 제거하고, '한 장의 정갈한 시네마 도시에 문서' 형태로 일체화
   - 박스 안의 박스 구조를 탈피하여, 단일 문서지(Document Sheet) 위에 정연한 타이포그래피와 구획선으로 배치
   -------------------------------------------------------------------------- */
.cinema-pair-template {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--border-dark);
  border-radius: var(--radius-xs);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 680px) {
  .cinema-pair-template {
    padding: 22px 18px 24px;
    gap: 22px;
  }
}

/* 문서 하단 마감 스탬프 */
.cinema-pair-template::after {
  content: '— CINÉ-ARCHIVE DOSSIER // CONFIDENTIAL RECORD —';
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.6;
}

/* 1. 문서 헤더 (페어 타이틀: 대형 영문 상단 + 한글 서브 하단 + 시놉시스) */
.pair-hero-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pair-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pair-hero-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pair-hero-box .pair-hero-title,
.cinema-pair-template .pair-hero-title {
  font-family: var(--font-title);
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pair-hero-title .pair-name-en {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.pair-hero-title .pair-name-ko {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-top: 2px;
}

.pair-hero-desc {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border-top: none !important;
  word-break: keep-all;
}

/* 공통 섹션 라벨 (문서 내부 구획선) */
.pair-section-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pair-section-label::before {
  content: '■';
  font-size: 7px;
  color: var(--border-dark);
}

.pair-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* 2. 멤버 바이라인 스트립 (사각형 박스 제거 -> 세련된 인라인 캡슐 태그) */
.pair-members-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-light);
}

.pair-members-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.pair-member-chip {
  background: transparent !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 30px !important;
  padding: 4px 14px 4px 4px !important;
  display: inline-flex;
  align-items: center;
  text-align: left;
  gap: 10px;
  text-decoration: none;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.pair-member-chip:hover {
  background: var(--bg-sub) !important;
  border-color: var(--border-card-hover) !important;
  transform: translateY(-1px);
}

.pair-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  overflow: hidden;
  background: var(--bg-card);
  flex-shrink: 0;
}

.pair-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pair-member-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pair-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.pair-member-role {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.pair-member-link-tag {
  display: none;
}

/* 3. 타임라인 & 디데이 (문서형 연대기 매니페스트 리스트) */
.pair-ddays-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-light);
}

.pair-dday-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-top: none;
}

.pair-dday-item {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border-light);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 6px;
  box-shadow: none;
  transition: background 0.15s ease;
}

.pair-dday-item:hover {
  background: rgba(0, 0, 0, 0.015);
}

.pair-dday-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.pair-dday-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pair-dday-date {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.pair-dday-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-main);
  background: transparent;
  border: 1px solid var(--border-light);
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.pair-dday-item.is-anniversary .pair-dday-badge {
  color: #e11d48;
  border-color: rgba(225, 29, 72, 0.35);
  background: rgba(225, 29, 72, 0.04);
}

.pair-dday-item.is-upcoming .pair-dday-badge {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.04);
}

.pair-dday-item.is-today .pair-dday-badge {
  background: var(--border-dark);
  border-color: var(--border-dark);
  color: #ffffff;
}

/* 4. 캐릭터 인적사항 매트릭스 (좌우 2열 대조 도시에 레이아웃) */
.pair-profiles-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}

.pair-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  width: 100%;
}

@media (max-width: 680px) {
  .pair-profiles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.pair-char-profile-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pair-char-profile-card:first-child {
  border-right: 1px solid var(--border-light);
  padding-right: 36px;
}

@media (max-width: 680px) {
  .pair-char-profile-card:first-child {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 24px;
  }
}

.char-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.char-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-sub);
  flex-shrink: 0;
  border: 1.5px solid var(--border-card);
}

.char-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-card-names {
  display: flex;
  flex-direction: column;
}

.char-card-name-ko {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.char-card-name-en {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* 키-값 인적사항 테이블 (네모 박스 없는 정갈한 대사/속성 명세) */
.char-info-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.char-info-row {
  display: flex;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.6;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}

.char-info-row:last-child {
  border-bottom: none;
}

.char-info-key {
  width: 66px;
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.char-info-val {
  flex: 1;
  color: var(--text-main);
  word-break: keep-all;
}

/* 5. 페어 관계성 / 서사 메모 (노아르 에디토리얼 노트) */
.pair-narrative-box {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--border-dark) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 18px !important;
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pair-narrative-title {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* 6. 페어 게시글 전체 토글 서식 (.pair-full-toggle 및 .theme-pair-story) */
.pair-full-toggle,
.pair-story-collapse-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100% !important;
  margin-top: 6px;
  margin-bottom: 24px;
  box-sizing: border-box !important;
}

.pair-full-toggle {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.theme-pair-story {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.pair-full-toggle .theme-pair-story,
.theme-pair-story.pair-full-toggle {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.theme-pair-story .btn-toggle-moreless {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: var(--bg-sub) !important;
  color: var(--text-main) !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: var(--weight-semibold) !important;
  padding: 12px 18px !important;
  cursor: pointer;
  letter-spacing: -0.01em;
  border: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.pair-full-toggle .btn-toggle-moreless,
.theme-pair-story.pair-full-toggle .btn-toggle-moreless {
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xs) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.theme-pair-story .btn-toggle-moreless:hover {
  background: var(--bg-hover) !important;
}

.pair-full-toggle .btn-toggle-moreless:hover,
.theme-pair-story.pair-full-toggle .btn-toggle-moreless:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-card-hover) !important;
  transform: translateY(-1px);
}

.theme-pair-story.open .btn-toggle-moreless {
  border-bottom: 1px dashed var(--border-light) !important;
  background: var(--bg-card) !important;
}

.pair-full-toggle.open .btn-toggle-moreless,
.theme-pair-story.pair-full-toggle.open .btn-toggle-moreless {
  background: var(--bg-sub) !important;
  border-bottom: 1px dashed var(--border-light) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.theme-pair-story:not(.open) .moreless-content {
  display: none !important;
}

.theme-pair-story.open .moreless-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  background: var(--bg-card) !important;
  padding: 24px 22px !important;
}

.pair-full-toggle.open .moreless-content,
.theme-pair-story.pair-full-toggle.open .moreless-content {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-top: 12px !important;
}

.theme-pair-story .pair-story-content {
  font-size: var(--article-font-size, 13.5px);
  line-height: 1.85;
  color: var(--text-main);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   (4) 본문 템플릿: 단독 캐릭터 프로필 (CHARACTER DOSSIER TEMPLATE)
   -------------------------------------------------------------------------- */
.cinema-character-template {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.char-dossier-ticket {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.char-dossier-header {
  padding: 14px 18px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.char-dossier-badge {
  background: var(--border-dark);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

.char-dossier-code {
  font-size: 9.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.char-dossier-main {
  display: flex;
  padding: 22px;
  gap: 24px;
}

.char-dossier-portrait {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.char-portrait-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--bg-sub);
  border: 1px solid var(--border-card);
}

.char-portrait-frame img,
.char-dossier-portrait > img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: var(--radius-xs);
  margin: 0 !important;
}

.char-dossier-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.char-dossier-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.char-dossier-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin: 0;
}

.char-dossier-subtitle {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 캐릭터 본문 인적사항 테이블 */
.char-dossier-table {
  width: 100%;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.char-dossier-row {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  gap: 12px;
}

.char-dossier-key {
  width: 70px;
  flex-shrink: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.char-dossier-val {
  flex: 1;
  color: var(--text-main);
  word-break: keep-all;
}

/* 명대사 바 */
.char-quote-bar {
  background: #fafbfc;
  border-left: 3px solid var(--border-dark);
  padding: 10px 14px;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-main);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* 연관 페어 바로가기 */
.char-related-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.char-related-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
}

.char-related-link {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-sub);
  color: var(--text-sub);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-family: var(--font-mono);
  border: 1px solid var(--border-card);
  transition: var(--transition-fast);
}

.char-related-link:hover {
  background: var(--border-dark);
  color: #ffffff;
  border-color: var(--border-dark);
}

/* 모바일 반응형 */
@media screen and (max-width: 680px) {
  .posts-container.view-character,
  .cover-character-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pair-banner-img-wrap {
    aspect-ratio: 16 / 9;
  }
  .pair-banner-body {
    padding: 16px;
    gap: 8px;
  }
  .pair-banner-title {
    font-size: 15px;
  }
  .char-dossier-main {
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 16px;
  }
  .char-dossier-portrait {
    width: 140px;
  }
  .pair-profiles-grid {
    grid-template-columns: 1fr;
  }
  .pair-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 빈 카테고리 뱃지/필 방어 스타일 */
.feed-category-pill:empty,
.masonry-cat-badge:empty,
.cast-role-pill:empty,
.ticket-row-cat:empty,
.cover-gal-cat-badge:empty,
.cover-wz-badge:empty,
.cover-list-cat-pill:empty,
.col-cat:empty {
  display: none !important;
}

/* 캐릭터 상세 프로필 하단 태그 칩스 목록 */
.char-dossier-tags {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100%;
}

.char-tags-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-right: 2px;
}