/* 댓글·채널 슬롯의 생김새. 템플릿 설정과 Studio가 같은 그림을 그려야 하므로
 * 노드(template-layouts.mjs의 decorateCommentSlot/decorateChannelSlot)에 이어
 * 스타일도 한 벌만 둔다. 페이지마다 복사해 두었더니 단위를 손으로 옮기다
 * 1.5~1.8배씩 어긋났고, 댓글 내용이 슬롯 높이를 넘겨 잘렸다.
 *
 * 수치의 정본은 실제 영상을 그리는 렌더러(remotion/RenderOptionOverlays의
 * COMMENT_CAPTURE_TOKENS, 캔버스 가로 1080)다. 100cqw = 캔버스 가로이므로
 * 렌더러의 1px = 0.0926cqw. 캔버스가 고정 300px인 편집기에서는 예전 px
 * 값과 똑같이 나오고, 폭이 변하는 Studio 미리보기에서는 같은 비율로 줄어든다.
 *
 * 쓰는 쪽은 슬롯을 감싸는 요소에 container-type:inline-size를 선언해야 한다.
 */

.comment-slot {
  align-items: center;
  gap: 1.8519cqw; /* 20 */
}

.comment-avatar {
  flex: 0 0 auto;
  width: 5.9259cqw; /* 64 */
  height: 5.9259cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.963cqw; /* avatarInitial 32 */
  font-weight: 700;
}

.comment-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.9259cqw; /* bodyTop 10 */
  min-width: 0;
  text-align: left;
}

/* 이름·시간 줄. inline으로 두면 좁아질 때 모자이크 막대가 혼자 줄바꿈된다.
 * 렌더러처럼 flex 한 줄로 묶어 절대 끊기지 않게 한다. */
.comment-body b {
  display: flex;
  align-items: center;
  gap: 1.1111cqw; /* identityGap 12 */
  font-size: 2.6852cqw; /* identity 29 */
  font-weight: 600;
  opacity: 0.7;
}

/* 한국어는 기본 규칙이 어절을 쪼갠다. 원본 댓글처럼 어절 단위로 끊는다. */
.comment-body span {
  font-size: 3.1481cqw; /* body 34 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 원본 액션 줄: 썸업 · 수치 · 썸다운 · 답글 */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 1.1111cqw; /* actionsGap 12 */
  margin-top: 0.3704cqw; /* actionsTop 14 - bodyTop 10 */
  font-size: 2.5cqw; /* action 27 */
  font-style: normal;
  font-weight: 650;
  opacity: 0.65;
}

.comment-thumb {
  flex: 0 0 auto;
  width: 2.2222cqw; /* actionIcon 24 */
  height: 2.2222cqw;
  overflow: visible;
}

.comment-thumb.is-down {
  transform: scaleY(-1);
}

.comment-reply {
  margin-left: 1.4815cqw; /* replyLeft 16 */
}

.comment-nickname {
  display: inline-block;
  vertical-align: middle;
  width: calc(var(--mask-length, 4) * 0.62em);
  height: 0.85em;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 0.22em,
    transparent 0.22em 0.34em
  );
  opacity: 0.5;
  filter: none;
}

.channel-avatar {
  flex: 0 0 auto;
  width: 4.6667cqw; /* 14 */
  height: 4.6667cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.15);
}