/* ================================================
   STACK_IN_TX_2 - 텍스트 리스트2
   날짜 포맷 선택 + 포인트 게시물 + 도트/라인
   CSS 변수: --stx2-* (자동 빌드)
   ================================================ */

/* 부모 stack_list overflow 해제 */
.STACK_IN_TX_2 { width: 100% !important; max-width: 100% !important; float: left; min-width: 0; box-sizing: border-box; }

/* 100% 높이 모드 */
.STACK_IN_TX_2.stx2_full_height { height: 100%; display: flex; flex-direction: column; }
.STACK_IN_TX_2.stx2_full_height ul { flex: 1; min-height: 0; }

.STACK_IN_TX_2 ul {
  list-style: none; margin: 0; padding: 0; width: 100%;
}

/* ── 항목 라인 ── */
.STACK_IN_TX_2 li { border-bottom: none; width: 100%; overflow: hidden; min-width: 0; }
.STACK_IN_TX_2 ul[data-item-line="1"] li {
  border-bottom: var(--stx2-item-line-width, 1px) var(--stx2-item-line-style, solid) var(--stx2-item-line-color, #e5e7eb);
}
/* 기본: 맨 마지막 라인 없음 */
.STACK_IN_TX_2 ul[data-item-line="1"] li:last-child { border-bottom: none; }
/* 맨 하단 라인 출력 (data-last-line="1") */
.STACK_IN_TX_2 ul[data-item-line="1"][data-last-line="1"] li:last-child {
  border-bottom: var(--stx2-item-line-width, 1px) var(--stx2-item-line-style, solid) var(--stx2-item-line-color, #e5e7eb);
}
/* 포인트 마지막 항목: border-bottom 제거 (pt_border_top 직전) */
.STACK_IN_TX_2 ul[data-item-line="1"] li.point_item:has(+ li.pt_border_top) { border-bottom: none; }
.STACK_IN_TX_2 ul[data-item-line="1"] li.point_item:last-of-type:not(:has(~ li:not(.point_item))) { border-bottom: none; }

/* 라인 없을 때 간격 */
.STACK_IN_TX_2 ul:not([data-item-line="1"]) li + li {
  margin-top: var(--stx2-list-gap, 0);
}

/* ── 링크 (기본: 가로배열 = 날짜 왼쪽 + 제목 오른쪽) ── */
.STACK_IN_TX_2 li a {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 100%; min-width: 0;
  padding: var(--stx2-item-padding, clamp(10px, calc(0.63vw + 8px), 18px) 0);
  text-decoration: none;
  transition: background 0.2s;
  box-sizing: border-box;
}

/* 호버 */
.STACK_IN_TX_2 li a:hover {
  background: var(--stx2-hover-bg, transparent);
}
.STACK_IN_TX_2 li a:hover .subject {
  color: var(--stx2-hover-title-color, var(--primary, #dc2626));
}
.STACK_IN_TX_2 li a:hover .date-txt {
  color: var(--stx2-hover-date-color, var(--stx2-date-color, #999));
}

/* ── 날짜 텍스트 (일반) ── */
.STACK_IN_TX_2 .date-txt {
  flex-shrink: 0;
  font-size: var(--stx2-date-size, clamp(11px, calc(0.08vw + 10.75px), 12px));
  color: var(--stx2-date-color, #999);
  font-weight: var(--stx2-date-weight, 400);
  white-space: nowrap;
}

/* ── 텍스트 박스 ── */
.STACK_IN_TX_2 .text-box {
  flex: 1; min-width: 0;
}

/* ── 제목 ── */
.STACK_IN_TX_2 .subject {
  font-size: var(--stx2-title-size, clamp(13px, calc(0.16vw + 12.5px), 15px));
  color: var(--stx2-title-color, #333);
  font-weight: var(--stx2-title-weight, 500);
  line-height: var(--stx2-title-lh, 1.4);
  letter-spacing: var(--stx2-title-spacing);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all;
  width: 100%; max-width: 100%; min-width: 0;
}

/* ── 제목 앞 도트 ── */
.STACK_IN_TX_2 .stx2_dot {
  display: inline-block; flex-shrink: 0;
  width: var(--stx2-title-dot-size, 6px);
  height: var(--stx2-title-dot-size, 6px);
  background: var(--stx2-title-dot-color, var(--primary, #dc2626));
  border-radius: 50%;
}
/* 사각형 도트 - data-dot="square" 로 제어하지 않고 CSS 변수에서 제어 불가 → JS에서 class */
/* disc(기본) = 원형, 별도 처리 불필요 */

/* ── 본문 ── */
.STACK_IN_TX_2 .content {
  margin: 4px 0 0;
  font-size: var(--stx2-content-size, clamp(12px, calc(0.08vw + 11.75px), 13px));
  color: var(--stx2-content-color, #666);
  font-weight: var(--stx2-content-weight, 400);
  line-height: var(--stx2-content-lh, 1.5);
  letter-spacing: var(--stx2-content-spacing);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%; max-width: 100%; min-width: 0;
}

/* ── NEW 아이콘 ── */
.STACK_IN_TX_2 .stx2_new {
  display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700;
  color: #23db79; background: #e8fff1; border-radius: 3px;
  vertical-align: middle; line-height: 1.4; margin: 0 4px;
}

/* ── 댓글 수 ── */
.STACK_IN_TX_2 .stx2_comment {
  display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700;
  color: #f97316; background: #fff7ed; border-radius: 3px;
  vertical-align: middle; line-height: 1.4; margin-left: 4px;
}
.STACK_IN_TX_2 .stx2_comment::before { content: '+'; }


/* ================================================
   날짜 + 제목 배열 변형
   ================================================ */

/* ── 세로 배열: 날짜 위 + 제목 아래 (일반 게시물만) ── */
.STACK_IN_TX_2[data-date-layout="vertical"] li:not(.point_item) a {
  flex-direction: column; align-items: flex-start; gap: 4px;
}
/* 포인트에 pt_date_layout 미지정 시 일반 배열 따라감 */
.STACK_IN_TX_2[data-date-layout="vertical"]:not([data-pt-date-layout]) li.point_item a {
  flex-direction: column; align-items: flex-start; gap: 4px;
}

/* ── 날짜 우측 정렬 (일반 게시물만) ── */
.STACK_IN_TX_2[data-date-align="right"] li:not(.point_item) a {
  justify-content: space-between;
}
.STACK_IN_TX_2[data-date-align="right"] li:not(.point_item) a .date-txt {
  order: 2; padding-left: 12px;
}
.STACK_IN_TX_2[data-date-align="right"] li:not(.point_item) a .text-box {
  order: 1;
}
/* 포인트에 pt_date_align 미지정 시 일반 정렬 따라감 */
.STACK_IN_TX_2[data-date-align="right"]:not([data-pt-date-align]) li.point_item a {
  justify-content: space-between;
}
.STACK_IN_TX_2[data-date-align="right"]:not([data-pt-date-align]) li.point_item a .date-txt {
  order: 2; padding-left: 12px;
}
.STACK_IN_TX_2[data-date-align="right"]:not([data-pt-date-align]) li.point_item a .text-box {
  order: 1;
}


/* ================================================
   포인트 게시물
   ================================================ */

.STACK_IN_TX_2 li.point_item .subject {
  font-size: var(--stx2-pt-title-size, var(--stx2-title-size));
  color: var(--stx2-pt-title-color, var(--stx2-title-color, #000));
  font-weight: var(--stx2-pt-title-weight, 600);
  white-space: normal; overflow: visible; text-overflow: unset;
}
.STACK_IN_TX_2 li.point_item .content {
  font-size: var(--stx2-pt-content-size, var(--stx2-content-size));
  color: var(--stx2-pt-content-color, var(--stx2-content-color));
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 포인트 전용 세로 배열 ── */
.STACK_IN_TX_2[data-pt-date-layout="vertical"] li.point_item a {
  flex-direction: column; align-items: flex-start; gap: 4px;
}
/* ── 포인트 전용 가로 배열 (명시적 가로) ── */
.STACK_IN_TX_2[data-pt-date-layout="horizontal"] li.point_item a {
  flex-direction: row; align-items: center;
}

/* ── 포인트 전용 날짜 우측 정렬 ── */
.STACK_IN_TX_2[data-pt-date-align="right"] li.point_item a {
  justify-content: space-between;
}
.STACK_IN_TX_2[data-pt-date-align="right"] li.point_item a .date-txt,
.STACK_IN_TX_2[data-pt-date-align="right"] li.point_item a .date-deco {
  order: 2; padding-left: 12px;
}
.STACK_IN_TX_2[data-pt-date-align="right"] li.point_item a .text-box {
  order: 1;
}
/* ── 포인트 전용 날짜 좌측 정렬 (명시적) ── */
.STACK_IN_TX_2[data-pt-date-align="left"] li.point_item a .date-txt,
.STACK_IN_TX_2[data-pt-date-align="left"] li.point_item a .date-deco {
  order: 0; padding-left: 0;
}
.STACK_IN_TX_2[data-pt-date-align="left"] li.point_item a .text-box {
  order: 0;
}

/* 포인트↔일반 구분선 */
.STACK_IN_TX_2 li.pt_border_top {
  border-top: 1px solid var(--stx2-pt-divider-color, #ccc);
  margin-top: var(--stx2-pt-divider-gap, clamp(15px, calc(0.78vw + 12.5px), 25px));
  padding-top: var(--stx2-pt-divider-gap, clamp(15px, calc(0.78vw + 12.5px), 25px));
}


/* ================================================
   포인트 날짜 데코 디자인 (style1/2/3)
   ================================================ */

.STACK_IN_TX_2 .date-deco {
  flex-shrink: 0;
  width: var(--stx2-pt-date-width, clamp(55px, calc(1.17vw + 51.25px), 70px));
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.STACK_IN_TX_2 .date-deco .deco-small {
  display: block;
  font-size: var(--stx2-pt-date-small-size, clamp(11px, calc(0.08vw + 10.75px), 12px));
  color: var(--stx2-pt-date-small-color, #888);
  margin-bottom: 2px;
}

.STACK_IN_TX_2 .date-deco .deco-big {
  display: block;
  font-size: var(--stx2-pt-date-big-size, clamp(22px, calc(0.94vw + 19px), 28px));
  font-weight: var(--stx2-pt-date-big-weight, 700);
  color: var(--stx2-pt-date-big-color, #222);
  line-height: 1;
}

/* style3: 배경 박스형 */
.STACK_IN_TX_2 .date-deco-card {
  background: var(--stx2-pt-date-box-bg, #f1f5f9);
  border-radius: var(--stx2-pt-date-box-radius, 8px);
  padding: 8px;
  aspect-ratio: 1;
  box-sizing: border-box;
}

/* 데코가 있는 포인트 아이템: 말줄임 해제 */
.STACK_IN_TX_2 li.point_item:has(.date-deco) {
  white-space: normal; overflow: visible;
}


/* ================================================
   빈 리스트
   ================================================ */

.STACK_IN_TX_2 .empty_li {
  padding: 60px 20px; text-align: center;
  color: #94a3b8; font-size: 15px;
}


/* ================================================
   반응형 - 모바일
   ================================================ */

@media only all and (max-width: 767px) {
  .STACK_IN_TX_2 li a {
    gap: 8px;
  }

  .STACK_IN_TX_2 .date-txt {
    font-size: var(--stx2-date-size, 11px);
  }

  .STACK_IN_TX_2 .subject {
    font-size: var(--stx2-title-size, 13px);
  }

  .STACK_IN_TX_2 .content {
    font-size: var(--stx2-content-size, 12px);
  }

  .STACK_IN_TX_2 .date-deco {
    width: var(--stx2-pt-date-width, 50px);
  }
  .STACK_IN_TX_2 .date-deco .deco-big {
    font-size: var(--stx2-pt-date-big-size, 20px);
  }
  .STACK_IN_TX_2 .date-deco .deco-small {
    font-size: var(--stx2-pt-date-small-size, 10px);
  }
}