/*
 * Novel Info unified feed and its review dialog.
 *
 * Scoped to #hbl-community and the composer form. Colors come from the child
 * theme tokens, not from literals, so the feed follows the rest of the novel
 * page in both themes. The font is inherited for the same reason.
 * The matching script is assets/js/hbl-community.js.
 */

#hbl-community,
[data-hbl-chapter-thread],
[data-hbl-profile-activity],
[data-hbl-community],
.hbl-community-card,
[data-hbl-community-card],
[data-hbl-gif-panel],
#madara-comments {
  --hbl-community-soft-background: #fcf3f2;
  --hbl-community-card-radius: 8px;
  --hbl-community-control-radius: 8px;
  /* The theme has one neutral border, used for the hairline dividers between
     cards. An input needs a stronger edge than a divider, so the composer
     field gets its own value. */
  --hbl-community-field-border: #c7c7cc;
  --hbl-community-field-background: var(--color-background-main-content);
  /* The theme has two text levels: strong and medium. The feed needs three, so
     a timestamp can sit a step behind Reply instead of matching it. Medium
     stays the secondary level; this is the tertiary one. */
  --hbl-community-text-tertiary: #99999f;
}

#hbl-community,
[data-hbl-chapter-thread],
[data-hbl-profile-activity],
[data-hbl-community] {
  width: 100%;
  min-width: 0;
  color: var(--color-content-neutral-strong);
  /* 테마가 이미 불러오는 Inter. 버튼과 모달 등 테마 컴포넌트가 쓰는
     서체와 같게 두어 피드만 글자 모양이 어긋나지 않게 한다. */
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

html[data-theme="dark"] #hbl-community,
html[data-theme="dark"] [data-hbl-chapter-thread],
html[data-theme="dark"] [data-hbl-profile-activity],
html[data-theme="dark"] [data-hbl-community],
html[data-theme="dark"] .hbl-community-card,
html[data-theme="dark"] [data-hbl-community-card],
html[data-theme="dark"] [data-hbl-gif-panel],
html[data-theme="dark"] #madara-comments {
  --hbl-community-soft-background: #2c2323;
  --hbl-community-field-border: #505057;
  /* The theme's main content is pure black in dark, the same as the page
     behind it, which would leave the field as a bare outline. Lift it. */
  --hbl-community-field-background: #1b1b1e;
  --hbl-community-text-tertiary: #85858c;
}

#hbl-community *,
[data-hbl-chapter-thread] *,
[data-hbl-profile-activity] *,
[data-hbl-community] * {
  box-sizing: border-box;
}

#hbl-community [hidden],
[data-hbl-chapter-thread] [hidden],
[data-hbl-profile-activity] [hidden],
[data-hbl-community] [hidden] {
  display: none !important;
}

.hbl-community__composer {
  width: 100%;
  padding: 20px 0 24px;
}

.hbl-community-composer__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 10px 68px 0 14px;
  border: 0;
}

.hbl-community-composer__rating-label {
  margin: 0;
  padding: 0;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.hbl-community-composer__stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.hbl-community-composer__stars label {
  display: grid;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--color-content-neutral-medium);
  cursor: pointer;
}

.hbl-community-composer__stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hbl-community-composer__stars svg {
  width: 20px;
  height: 20px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill 120ms ease, color 120ms ease, transform 120ms ease;
}

.hbl-community-composer__stars label:hover svg,
.hbl-community-composer__stars label.is-selected svg {
  fill: var(--color-content-primary);
  color: var(--color-content-primary);
}

.hbl-community-composer__stars label:hover svg {
  transform: scale(1.08);
}

.hbl-community-composer__stars input:focus-visible + svg {
  outline: 2px solid var(--color-content-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The field is the visible control: the textarea, the counter, and the submit
   all sit inside one border so focus reads as one thing. The right padding on
   the textarea and the meta row reserves the submit button's column. */
.hbl-community-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 9px;
  background: var(--hbl-community-field-background);
}

/* No focus-within treatment on the field. The textarea inside it still takes
   the shared focus outline, so keyboard focus stays visible without the
   border also changing colour. */

.hbl-community-composer__field textarea,
.hbl-community-composer__field textarea[data-hbl-comment-text] {
  display: block;
  width: 100%;
  min-height: 104px;
  max-height: 220px;
  overflow-y: hidden;
  resize: none;
  margin: 0;
  padding: 14px 68px 8px 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 14px;
  /* The grown height is scrollHeight, so the line height has to match the
     prototype exactly or the field settles a few pixels off. */
  line-height: 1.5;
}

/* 이름 옆의 작은 표. 출처 배지와 같은 자리에 서지만 Review / Comment 를
   가르는 말이 아니라 누구 것인지를 말하는 표라, 글자가 아니라 면으로 띄운다. */
.hbl-community-card__mine {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-content-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

/* 이미 쓴 리뷰를 고치는 중이라는 한 줄. 작성칸 위에 서서, 누르기 전에
   읽히도록 한다. */
.hbl-community-composer__notice {
  margin: 0 0 8px;
  padding: 0 14px;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-composer__meta {
  display: flex;
  align-items: center;
  /* 스포일러와 GIF 가 왼쪽부터 선다. 글자수는 오른쪽 아래에 떠 있으므로
     이 줄의 배치와 상관없다. */
  justify-content: flex-start;
  gap: 12px;
  min-height: 32px;
  padding: 0 68px 8px 14px;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-composer__counter {
  position: absolute;
  right: 14px;
  bottom: 8px;
  /* "2,000 / 2,000" 이 들어갈 만큼. 고정 폭이라 숫자가 늘어도 글이 밀리지 않는다. */
  min-width: 84px;
  color: var(--hbl-community-text-tertiary);
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* 넘었다는 것만 알린다. 쓰는 동안 막지 않으므로 이 표시가 제출이 왜 꺼져
   있는지 말해주는 유일한 자리다. 쓰기 너비가 흔들리지 않게 굵기는 두고
   색만 바꾼다. */
.hbl-community-composer__counter.is-over {
  color: var(--color-content-primary);
}

.hbl-community-button.hbl-community-composer__submit {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  transform: translateY(-50%);
}

.hbl-community-composer__submit svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hbl-community__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 57px;
  margin: 0;
  border-bottom: 1px solid var(--color-border-neutral);
}

.hbl-community__filters {
  position: relative;
  display: flex;
  gap: 24px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hbl-community__filters::-webkit-scrollbar {
  display: none;
}

/* Underline tabs: the selected one carries a 2px accent bar sitting on the
   toolbar rule, so the bar must overlap it by one pixel. */
.hbl-community-filter,
[data-hbl-community-filter] {
  position: relative;
  margin: 0;
  padding: 17px 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.hbl-community-filter.is-active,
[data-hbl-community-filter].is-active,
[data-hbl-community-filter][aria-selected="true"] {
  color: var(--color-content-neutral-strong);
  font-weight: 700;
}

/* 밑줄은 탭마다 하나씩이 아니라 띠 하나다. 그래야 어느 탭에서 어느 탭으로
   갔는지가 움직임으로 보인다. 탭마다 켜고 끄면 사라졌다 나타날 뿐이다.

   자리는 스크립트가 재어 translateX 와 width 로 준다. 폭을 미리 알 수 없는
   것은 선택된 탭이 굵어지면서 넓어지기 때문이다. 띠는 탭들과 같은 흐름 안에
   있으므로 탭 줄이 가로로 스크롤되면 함께 밀린다. */
.hbl-community__filters-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-content-primary);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    width 220ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 첫 그림에는 움직임이 없어야 한다. 0 에서 날아오는 것은 전환이 아니다. */
.hbl-community__filters-indicator.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hbl-community__filters-indicator {
    transition: none;
  }
}

.hbl-community__feed,
[data-hbl-community-list] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

/* No gap here. The children carry their own spacing (meta 10px down, footer
   10px up), and a gap on top of that stacked to 18px between rows. One owner
   per edge. */
.hbl-community-card,
[data-hbl-community-card] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--hbl-community-card-radius);
  background: var(--color-background-main-content);
  color: var(--color-content-neutral-strong);
}

#hbl-community .hbl-community__feed,
[data-hbl-chapter-thread] .hbl-community__feed,
[data-hbl-profile-activity] .hbl-community__feed,
#hbl-community [data-hbl-community-list],
[data-hbl-chapter-thread] [data-hbl-community-list],
[data-hbl-profile-activity] [data-hbl-community-list] {
  gap: 0;
}

#hbl-community .hbl-community-card,
[data-hbl-chapter-thread] .hbl-community-card,
[data-hbl-profile-activity] .hbl-community-card,
#hbl-community [data-hbl-community-card],
[data-hbl-chapter-thread] [data-hbl-community-card],
[data-hbl-profile-activity] [data-hbl-community-card] {
  gap: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-neutral);
  border-radius: 0;
  background: transparent;
}

.hbl-community-card:target,
[data-hbl-community-card]:target {
  border-color: var(--color-content-primary);
  box-shadow: 0 0 0 2px var(--hbl-community-soft-background);
  scroll-margin-top: 96px;
}

#hbl-community .hbl-community-card:target,
[data-hbl-chapter-thread] .hbl-community-card:target,
[data-hbl-profile-activity] .hbl-community-card:target,
#hbl-community [data-hbl-community-card]:target,
[data-hbl-chapter-thread] [data-hbl-community-card]:target,
[data-hbl-profile-activity] [data-hbl-community-card]:target {
  border-bottom-color: var(--color-content-primary);
  border-radius: var(--hbl-community-control-radius);
  background: var(--hbl-community-soft-background);
  box-shadow: none;
}

.hbl-community-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 18px;
}

/* The author's name is the bold element in the row. The source is a quiet
   label beside it, so it carries the accent colour but not the weight. */
.hbl-community-card__source {
  flex: 0 0 auto;
  color: var(--color-content-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.hbl-community-card__rating {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  color: var(--color-content-neutral-strong);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hbl-community-card__rating svg {
  width: 13px;
  height: 13px;
  fill: var(--color-content-primary);
  color: var(--color-content-primary);
}

/* Which chapter the comment belongs to. Underlined because it navigates; the
   locked variant keeps the label and drops the affordance. */
#hbl-community .hbl-community-card__chapter,
#hbl-community .hbl-community-card__chapter:link,
[data-hbl-chapter-thread] .hbl-community-card__chapter:link,
[data-hbl-profile-activity] .hbl-community-card__chapter:link,
#hbl-community .hbl-community-card__chapter:visited,
[data-hbl-chapter-thread] .hbl-community-card__chapter:visited,
[data-hbl-profile-activity] .hbl-community-card__chapter:visited,
[data-hbl-community] .hbl-community-card__chapter,
[data-hbl-community] .hbl-community-card__chapter:link,
[data-hbl-community] .hbl-community-card__chapter:visited {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content-primary);
  font-size: 12px;
  line-height: 18px;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

#hbl-community .hbl-community-card__chapter.is-locked,
[data-hbl-chapter-thread] .hbl-community-card__chapter.is-locked,
[data-hbl-profile-activity] .hbl-community-card__chapter.is-locked,
[data-hbl-community] .hbl-community-card__chapter.is-locked {
  color: var(--color-content-neutral-medium);
  text-decoration: none;
  cursor: default;
}

.hbl-community-card__avatar,
.hbl-community-card__avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.hbl-community-card__avatar {
  flex: 0 0 28px;
  overflow: hidden;
  background: var(--color-background-sub-content);
}

.hbl-community-card__avatar img {
  display: block;
  object-fit: cover;
}

.hbl-community-card__author {
  min-width: 0;
  overflow: hidden;
  color: var(--color-content-neutral-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 답글과 같은 자리다. ⋯ 는 이름 줄 끝에, 날짜는 이 줄 끝에 선다. */
.hbl-community-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  margin-top: 10px;
}

.hbl-community-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Reply sits at the secondary level: readable, but behind the name and body. */
.hbl-community-card__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community-card__action:hover {
  color: var(--color-content-neutral-strong);
}

/* 좋아요. 비어 있으면 선만, 누르면 브랜드색으로 채운다. 수는 버튼 안에
   두어 누르는 자리와 결과가 한 곳에 있다. */
.hbl-community-like svg {
  width: 16px;
  height: 16px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill 120ms ease, transform 120ms ease;
}

.hbl-community-like.is-liked {
  color: var(--color-content-primary);
}

.hbl-community-like.is-liked svg {
  fill: currentColor;
}

.hbl-community-like:not(.is-static):active svg {
  transform: scale(0.88);
}

/* 내 글의 수는 누르는 것이 아니다. */
.hbl-community-like.is-static {
  cursor: default;
}

.hbl-community-like.is-static:hover {
  color: var(--color-content-neutral-medium);
}

@media (prefers-reduced-motion: reduce) {
  .hbl-community-like svg {
    transition: none;
  }
}

/* Replies are one flat list under the post, not a nest. Indenting every level
   eats the reading width after two or three, so depth is carried by the @name
   each reply opens with. */
.hbl-community__reply-list {
  display: grid;
  gap: 14px;
  margin: 14px 0 0 36px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border-neutral);
}

.hbl-community__reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 28px;
  margin: 8px 0 0 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community__reply-toggle .hbl-community__chevron {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  transition: transform 180ms ease;
}

.hbl-community__reply-toggle[aria-expanded="true"] .hbl-community__chevron {
  transform: rotate(180deg);
}

.hbl-community-reply {
  min-width: 0;
}

.hbl-community-reply__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-reply__avatar,
.hbl-community-reply__avatar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.hbl-community-reply__avatar {
  flex: 0 0 24px;
  overflow: hidden;
  background: var(--color-background-sub-content);
}

.hbl-community-reply__avatar img {
  display: block;
  object-fit: cover;
}

.hbl-community-reply__author {
  min-width: 0;
  overflow: hidden;
  color: var(--color-content-neutral-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbl-community-reply__body {
  display: block;
  margin: 0;
  color: var(--color-content-neutral-strong);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.hbl-community-reply__body p {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: inherit;
}

.hbl-community-reply__target {
  color: var(--color-content-primary);
}

.hbl-community-reply__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-reply__footer time {
  color: var(--hbl-community-text-tertiary);
  white-space: nowrap;
}

/* The reply box replaces the one-line gap under the post it answers. It is
   shorter than the review field because a reply is a shorter thing. */
.hbl-community-reply-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0 36px;
}

.hbl-community-reply-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 9px;
  background: var(--hbl-community-field-background);
}

.hbl-community-reply-composer__field textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 140px;
  overflow-y: hidden;
  resize: none;
  margin: 0;
  padding: 10px 50px 6px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  /* Same size as the review field: a reply is not smaller writing. The box is
     shorter, the type is not. */
  font-size: 14px;
  line-height: 21px;
}

.hbl-community-button.hbl-community-reply-composer__submit {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  transform: translateY(-50%);
}

.hbl-community-reply-composer__submit svg {
  display: block;
  width: 15px;
  height: 15px;
}

.hbl-community-reply-composer__cancel {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community__replies-notice {
  margin: 10px 0 0;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-composer__reply-context {
  margin: 0 0 8px;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  line-height: 18px;
}

/* A step behind Reply: the date is the least actionable thing in the row, and
   matching Reply's colour flattened the hierarchy. */
.hbl-community-card__time {
  margin-left: auto;
  color: var(--hbl-community-text-tertiary);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

/* 가려진 글 자리에 서는 안내. 프로토타입과 같은 모양이다 — 본문 폭을 채우는
   띠 하나에 안내 한 줄과 여는 버튼. */
.hbl-community-spoiler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  margin: 0 0 4px;
  padding: 10px 16px;
  border-radius: var(--hbl-community-card-radius);
  background: var(--hbl-community-soft-background);
  text-align: center;
}

.hbl-community-spoiler[hidden],
[data-hbl-spoiler-actions][hidden],
[data-hbl-spoiler-body][hidden] {
  display: none;
}

.hbl-community-spoiler__notice {
  color: var(--color-content-neutral-medium);
  font-size: 13px;
  line-height: 18px;
}

.hbl-community-spoiler__reveal {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 7px;
  background: var(--color-background-main-content);
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community-spoiler__reveal:hover,
.hbl-community-spoiler__reveal:focus-visible {
  border-color: var(--color-content-primary);
  color: var(--color-content-primary);
}

/* 가리는 일은 두 겹이다. hidden 이 글을 레이아웃과 보조기기와 페이지 안
   찾기에서 빼고, 그 위에 글자색을 검게 깔아 둔다. 두 번째 겹은 첫 번째가
   무너졌을 때만 일한다 — 인쇄 스타일시트, 리더 모드, hidden 을 무시하는
   확장, 사용자 스타일. 그때도 검은 바탕에 검은 글자라 읽히지 않는다.
   드러내는 순간 두 겹 모두 사라진다. */
/* 클래스를 두 번 적는다. 바로 아래 .hbl-community-card__body 규칙이 같은
   특정도라 순서만으로는 그쪽이 이기고, 다크에서 검은 바탕에 흰 글자가 남는다. */
.hbl-community-card__body.hbl-community-card__body--spoiler,
.hbl-community-reply__text.hbl-community-reply__text--spoiler {
  border-radius: 4px;
  background: #000;
  color: #000;
  -webkit-text-fill-color: #000;
}

.hbl-community-card__body.hbl-community-card__body--spoiler *,
.hbl-community-reply__text.hbl-community-reply__text--spoiler * {
  color: #000;
  -webkit-text-fill-color: #000;
}

.hbl-community-composer__spoiler {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--color-content-neutral-medium);
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community-composer__spoiler input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-content-primary);
  /* 브라우저는 체크 안 된 상자를 밝은 배경 기준으로 그린다. 다크에서는 그
     흰 면이 체크된 것처럼 읽히므로, 이 컨트롤에만 어두운 배색을 알린다.
     루트에 걸면 사이트의 모든 기본 위젯이 함께 바뀐다. */
  color-scheme: light;
}

html[data-theme="dark"] .hbl-community-composer__spoiler input {
  color-scheme: dark;
}

.hbl-community-card__body,
.hbl-community-card__body p {
  margin: 0;
  color: var(--color-content-neutral-strong);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Pointing down reads as "more below", which is what the replies toggle does. */
.hbl-community__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.hbl-community__empty {
  width: 100%;
  margin: 0;
  padding: 54px 20px;
  color: var(--color-content-neutral-medium);
  text-align: center;
}

/* 이어 붙이는 동안에는 읽던 글을 흐리지 않는다. 아래의 한 줄이 알린다. */
#hbl-community.is-loading:not(.is-appending) [data-hbl-community-list],
[data-hbl-community].is-loading:not(.is-appending) [data-hbl-community-list] {
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.hbl-community-status.is-visible {
  display: block;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: var(--hbl-community-control-radius);
  background: var(--hbl-community-soft-background);
  color: var(--color-content-neutral-strong);
  font-size: 12px;
  line-height: 18px;
}

.hbl-community-status.is-error {
  color: #c62828;
}

#hbl-community button:focus-visible,
[data-hbl-chapter-thread] button:focus-visible,
[data-hbl-profile-activity] button:focus-visible,
#hbl-community a:focus-visible,
[data-hbl-chapter-thread] a:focus-visible,
[data-hbl-profile-activity] a:focus-visible,
#hbl-community select:focus-visible,
[data-hbl-chapter-thread] select:focus-visible,
[data-hbl-profile-activity] select:focus-visible,
#hbl-community textarea:focus-visible,
[data-hbl-chapter-thread] textarea:focus-visible,
[data-hbl-profile-activity] textarea:focus-visible,
#hbl-community input:focus-visible,
[data-hbl-chapter-thread] input:focus-visible,
[data-hbl-profile-activity] input:focus-visible,
#hbl-community summary:focus-visible,
[data-hbl-chapter-thread] summary:focus-visible,
[data-hbl-profile-activity] summary:focus-visible,
#hbl-community [data-hbl-community-card][role="link"]:focus-visible,
[data-hbl-chapter-thread] [data-hbl-community-card][role="link"]:focus-visible,
[data-hbl-profile-activity] [data-hbl-community-card][role="link"]:focus-visible,
[data-hbl-community] button:focus-visible,
[data-hbl-community] a:focus-visible,
[data-hbl-community] select:focus-visible,
[data-hbl-community] textarea:focus-visible,
[data-hbl-community] input:focus-visible,
[data-hbl-community] summary:focus-visible,
[data-hbl-community] [data-hbl-community-card][role="link"]:focus-visible {
  outline: 2px solid var(--color-content-primary);
  outline-offset: 2px;
}

/* The field border already identifies the writing area. A textarea outline is
   clipped by the rounded field and otherwise appears as a stray coral rule at
   the bottom while typing. */
#hbl-community .hbl-community-composer__field textarea:focus,
[data-hbl-chapter-thread] .hbl-community-composer__field textarea:focus,
[data-hbl-profile-activity] .hbl-community-composer__field textarea:focus,
#hbl-community .hbl-community-composer__field textarea:focus-visible,
[data-hbl-chapter-thread] .hbl-community-composer__field textarea:focus-visible,
[data-hbl-profile-activity] .hbl-community-composer__field textarea:focus-visible,
#hbl-community .hbl-community-reply-composer__field textarea:focus,
[data-hbl-chapter-thread] .hbl-community-reply-composer__field textarea:focus,
[data-hbl-profile-activity] .hbl-community-reply-composer__field textarea:focus,
#hbl-community .hbl-community-reply-composer__field textarea:focus-visible,
[data-hbl-chapter-thread] .hbl-community-reply-composer__field textarea:focus-visible,
[data-hbl-profile-activity] .hbl-community-reply-composer__field textarea:focus-visible,
[data-hbl-community] .hbl-community-composer__field textarea:focus,
[data-hbl-community] .hbl-community-composer__field textarea:focus-visible,
[data-hbl-community] .hbl-community-reply-composer__field textarea:focus,
[data-hbl-community] .hbl-community-reply-composer__field textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 767px) {
  /* Only the floor changes on a narrow screen. The body text stays 14px so a
     review reads the same size as the cards below it. */
  .hbl-community-composer__field textarea,
  .hbl-community-composer__field textarea[data-hbl-comment-text] {
    min-height: 112px;
  }

  .hbl-community__filters {
    gap: 18px;
  }

  .hbl-community-filter,
[data-hbl-community-filter] {
    font-size: 12px;
  }

  .hbl-community-card__meta {
    flex-wrap: wrap;
  }

  .hbl-community-modal__header {
    padding: 18px 18px 14px;
  }

  .hbl-community-modal__title {
    font-size: 19px;
  }

  .hbl-community-modal .modal-body {
    padding: 0 18px 18px;
  }
}

/* A phone, not a tablet. Capping the author's name only makes sense where the
   row genuinely runs out of width, so this is a tighter breakpoint than the
   one above. The grid fixes each label's column instead of letting a long
   name wrap the whole row. */
@media (max-width: 480px) {
  .hbl-community-card__meta {
    display: grid;
    grid-template-columns: 28px max-content max-content max-content minmax(0, 1fr);
    gap: 2px 8px;
    flex-wrap: nowrap;
  }

  .hbl-community-card__chapter {
    grid-column: 4;
    grid-row: 1;
  }

  .hbl-community-card__rating {
    grid-column: 4;
    grid-row: 1;
  }

  .hbl-community__reply-list,
  .hbl-community-reply-composer {
    margin-left: 20px;
  }

  .hbl-community__reply-toggle {
    margin-left: 34px;
  }

  .hbl-community-card__avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .hbl-community-card__author {
    grid-column: 2;
    grid-row: 1;
    max-width: 112px;
  }

  .hbl-community-card__source {
    grid-column: 3;
    grid-row: 1;
  }

}

@media (prefers-reduced-motion: reduce) {
  #hbl-community *,
[data-hbl-chapter-thread] *,
[data-hbl-profile-activity] *,
[data-hbl-community] * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* The review form is WordPress markup, so only the gap above it is ours. */
.hbl-community__compose {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hbl-community-rule, rgba(128, 128, 128, 0.22));
}

/* ---------- buttons ---------- */

.hbl-community-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--hbl-community-control-radius);
  background: transparent;
  color: var(--color-content-neutral-strong);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

/* The modifiers used to be scoped to the signed-out prompt, which no longer
   exists. They are the shared primary and secondary button now. The hover
   value matches the theme's own .hbl-btn-primary so community buttons do not
   drift from the rest of the novel page. */
.hbl-community-button--primary {
  border-color: var(--color-content-primary);
  background: var(--color-content-primary);
  color: var(--color-content-white-in-card);
}

.hbl-community-button--primary:hover,
.hbl-community-button--primary:focus-visible {
  border-color: #de635d;
  background: #de635d;
  color: var(--color-content-white-in-card);
}

.hbl-community-button--secondary {
  border-color: var(--color-border-neutral);
  background: var(--color-background-main-content);
  color: var(--color-content-neutral-strong);
}

.hbl-community-button--secondary:hover {
  background: var(--color-background-sub-content);
}

.hbl-community-button[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* The form is a passthrough: the prototype puts the field directly in the
   section, so the form must add no box of its own or the field narrows. */
.hbl-community-composer,
[data-hbl-community-composer] {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
}

/* Clearly lighter than the body text, so an empty field reads as a prompt
   rather than as content already written. */
.hbl-community-composer__field textarea::placeholder,
.hbl-community-composer__field textarea[data-hbl-comment-text]::placeholder,
.hbl-community-reply-composer__field textarea::placeholder {
  color: var(--hbl-community-text-tertiary);
  opacity: 1;
}

.hbl-community-composer__error {
  width: 100%;
  margin: 8px 0 0;
  color: #c62828;
  font-size: 12px;
  line-height: 18px;
}
/* ---------- review dialog ---------- */

.hbl-community-modal .modal-dialog {
  width: min(100%, 520px);
  max-width: 520px;
}

.hbl-community-modal .modal-content {
  border: 1px solid var(--color-border-neutral);
  border-radius: 16px;
  background: var(--color-background-main-content);
}

.hbl-community-modal__header {
  display: flex;
  /* The close control belongs in the corner, so the row aligns to the top
     rather than centring it against the title. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
}

.hbl-community-modal__title {
  margin: 0;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.hbl-community-modal__close {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  /* Pulled into the header padding so the glyph sits near the corner while
     the 34px target stays. Still a flex item, so a long title cannot run
     underneath it. */
  margin: -6px -8px 0 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.hbl-community-modal .modal-body {
  padding: 0 24px 24px;
}

/* The brand colour, not a warning colour: nothing has gone wrong, the reader
   just needs to know their text is safe before they are sent to sign in. */
.hbl-community-modal__kept {
  margin: 0 0 6px;
  color: var(--color-content-primary);
  font-weight: 700;
}

.hbl-community-modal__intro {
  margin: 0 0 18px;
  color: var(--color-content-neutral-medium);
}

.hbl-community-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* GIF. 버튼은 스포일러 옆의 작은 글자 버튼이고, 고른 것은 글 아래에 작게
   보인다. 고르는 창은 버튼 위에 떠 있다. */
.hbl-community-gif-button {
  flex: 0 0 auto;
  margin: 0;
  padding: 1px 6px;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
}

.hbl-community-gif-button[aria-expanded="true"] {
  border-color: var(--color-content-primary);
  color: var(--color-content-primary);
}

.hbl-community-reply-composer__field .hbl-community-gif-button {
  margin: 0 0 8px 12px;
}

.hbl-community-gif-selected {
  position: relative;
  display: inline-block;
  margin: 0 0 8px 14px;
}

.hbl-community-gif-selected[hidden] {
  display: none;
}

.hbl-community-gif-selected img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border-radius: 6px;
}

.hbl-community-gif-selected__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.hbl-community-reply-composer__field .hbl-community-gif-selected {
  display: block;
  margin-left: 12px;
}

.hbl-community-reply-composer__field .hbl-community-gif-selected[hidden] {
  display: none;
}

/* 고르는 창. GIF 버튼 위에 떠 있으므로 화면을 내리지 않고 고른다.
   위치와 크기는 버튼 자리에 맞춰 스크립트가 잡는다. */
.hbl-community-gif {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-neutral, var(--hbl-community-field-border));
  border-radius: 12px;
  background: var(--color-background-main-content);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}

.hbl-community-gif[hidden] {
  display: none;
}

.hbl-community-gif__search {
  position: relative;
  flex: 0 0 auto;
  margin: 10px 10px 8px;
}

.hbl-community-gif__search svg {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--hbl-community-text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 테마가 검색 입력칸의 안쪽 여백을 덮어쓴다. 창 안의 칸으로 좁혀 다시 정한다. */
[data-hbl-gif-panel] input.hbl-community-gif__query {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px 0 32px;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: var(--hbl-community-control-radius);
  background: var(--hbl-community-field-background);
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 14px;
}

.hbl-community-gif__box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px;
  overscroll-behavior: contain;
}

/* 두 줄로 쌓는다. 그림마다 높이가 달라서 칸을 정사각으로 자르지 않고
   제 비율대로 둔다. */
.hbl-community-gif__results {
  column-count: 2;
  column-gap: 6px;
}

.hbl-community-gif[aria-busy="true"] .hbl-community-gif__results {
  opacity: 0.5;
}

.hbl-community-gif__item {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 0;
  border-radius: 6px;
  background: var(--hbl-community-soft-background);
  cursor: pointer;
}

.hbl-community-gif__item img {
  display: block;
  width: 100%;
  height: auto;
}

.hbl-community-gif__item:focus-visible {
  outline: 2px solid var(--color-content-primary);
  outline-offset: -2px;
}

.hbl-community-gif__status {
  margin: 16px 0;
  color: var(--hbl-community-text-tertiary);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.hbl-community-gif__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--hbl-community-field-border);
}

.hbl-community-gif__page {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community-gif__page[disabled] {
  opacity: 0.4;
  cursor: default;
}

.hbl-community-gif__credit {
  color: var(--hbl-community-text-tertiary);
  font-size: 11px;
  line-height: 16px;
}

/* 카드 본문의 GIF. 피드에서 한 장이 화면을 차지하지 않도록 높이를 묶는다. */
.hbl-community-gif-media {
  margin: 8px 0 0;
}

.hbl-community-gif-media img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  height: auto;
  border-radius: 6px;
}

/* ⋯ 메뉴. 이름 줄의 끝에 서고, 목록은 그 아래로 떨어진다. */
.hbl-community-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.hbl-community-menu__toggle {
  display: grid;
  width: 28px;
  height: 28px;
  margin: -5px 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-content-neutral-medium);
  cursor: pointer;
}

.hbl-community-menu__toggle:hover,
.hbl-community-menu__toggle[aria-expanded="true"] {
  background: var(--color-background-sub-content);
}

.hbl-community-menu__toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.hbl-community-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 120px;
  padding: 4px;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--hbl-community-control-radius);
  background: var(--color-background-main-content);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.hbl-community-menu__list[hidden] {
  display: none;
}

.hbl-community-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.hbl-community-menu__item:hover,
.hbl-community-menu__item:focus-visible {
  background: var(--color-background-sub-content);
}

.hbl-community-menu__item--danger {
  color: var(--color-content-primary);
}

/* 좁은 화면의 이름 줄은 격자다. 메뉴는 마지막 칸의 끝에 붙는다. */
@media (max-width: 480px) {
  .hbl-community-card__meta .hbl-community-menu {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
  }
}

/* 지우기 확인과 신고 창. 화면 가운데에 서고, 바깥은 어둡게 덮는다. */
.hbl-community-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.hbl-community-sheet[hidden] {
  display: none;
}

body.hbl-community-sheet-open {
  overflow: hidden;
}

.hbl-community-sheet__panel {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 20px;
  border-radius: 12px;
  background: var(--color-background-main-content);
  color: var(--color-content-neutral-strong);
}

/* 다크에서는 페이지 바탕도 검정이라 창의 가장자리가 사라진다. 한 단 밝은
   바탕과 테두리로 띄운다. */
html[data-theme="dark"] .hbl-community-sheet {
  background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .hbl-community-sheet__panel {
  border: 1px solid #3a3a3f;
  background: #1c1c1f;
}

/* 로그인을 묻는 창도 같은 바탕이다. 사이트는 모든 모달 바탕을 흰색으로
   덮으므로(body.hbl-novel .modal .modal-content) 그보다 무거운 선택자가 필요하다.
   그대로 두면 다크의 흰 글자가 흰 바탕에 묻혀 제목이 사라진다. */
html[data-theme="dark"] body .hbl-community-modal.modal .modal-content {
  border: 1px solid #3a3a3f;
  background: #1c1c1f;
}

.hbl-community-sheet__title {
  margin: 0 0 8px;
  color: var(--color-content-neutral-strong);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.hbl-community-sheet__copy {
  margin: 0 0 16px;
  color: var(--color-content-neutral-medium);
  font-size: 14px;
  line-height: 20px;
}

/* 이미 신고한 글이라는 안내. 오류색이 아니라 피드의 안내 줄과 같은 면이다. */
.hbl-community-sheet__notice {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: var(--hbl-community-control-radius, 8px);
  background: var(--hbl-community-soft-background, #fcf3f2);
  color: var(--color-content-neutral-strong);
  font-size: 13px;
  line-height: 18px;
}

.hbl-community-sheet__notice[hidden] {
  display: none;
}

.hbl-community-sheet__reasons {
  margin: 8px 0 12px;
  padding: 0;
  border: 0;
}

.hbl-community-sheet__reason {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

.hbl-community-sheet__reason input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-content-primary);
}

.hbl-community-sheet__note {
  display: block;
  width: 100%;
  min-height: 72px;
  margin: 0 0 12px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: var(--hbl-community-control-radius);
  background: var(--hbl-community-field-background);
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.hbl-community-sheet__actions,
.hbl-community-inline-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 그 자리에서 고치는 칸. 본문이 있던 자리를 그대로 쓴다. */
.hbl-community-inline-edit {
  margin: 0 0 8px;
}

.hbl-community-inline-edit__text {
  display: block;
  width: 100%;
  min-height: 72px;
  margin: 0 0 8px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 9px;
  background: var(--hbl-community-field-background);
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
}

.hbl-community-inline-edit__actions .hbl-community-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

/* 목록 상자. 처음 보이는 높이 그대로이고, 그 안을 내려 읽는다. 높이는
   스크립트가 첫 쪽을 잰 값으로 잡는다.
   스크롤바는 보이지 않는다. 더 있다는 표시는 아래쪽의 옅어짐이 맡고, 다
   불러와 바닥에 닿으면 걷힌다. 끝에 닿으면 페이지가 이어서 내려간다 —
   상자 안에 갇히지 않는다. */
.hbl-community__feed.is-scrolling {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}

.hbl-community__feed.is-scrolling::-webkit-scrollbar {
  display: none;
}

.hbl-community__feed.is-scrolling.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.hbl-community__feed.is-scrolling:focus-visible {
  outline: 2px solid var(--color-content-primary);
  outline-offset: 2px;
}

.hbl-community__more {
  margin: 0;
  padding: 16px 0 24px;
  color: var(--hbl-community-text-tertiary);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* 모바일의 전체 보기. 첫 쪽 아래 오른쪽에 작은 글자 링크로 선다. 버튼처럼
   두드러지면 목록보다 먼저 눈에 걸린다. */
.hbl-community__sheet-open {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  margin: 12px 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--color-content-neutral-medium);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}

.hbl-community__sheet-open[hidden] {
  display: none;
}

.hbl-community__sheet-open-count {
  font-weight: 400;
}

.hbl-community__sheet-open svg {
  width: 12px;
  height: 12px;
}

@media (min-width: 481px) {
  .hbl-community__sheet-open {
    display: none !important;
  }
}

/* 전체 보기 시트. 화면을 덮고, 그 안이 따로 내려간다. 뒤 페이지는 멈춘다. */
.hbl-feed-sheet {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--color-background-main-content);
  animation: hbl-feed-sheet-in 200ms ease-out;
}

.hbl-feed-sheet[hidden] {
  display: none;
}

@keyframes hbl-feed-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.hbl-feed-sheet__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--hbl-community-rule, rgba(128, 128, 128, 0.22));
}

.hbl-feed-sheet__title {
  margin: 0;
  color: var(--color-content-neutral-strong);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.hbl-feed-sheet__count {
  color: var(--color-content-neutral-medium);
  font-weight: 400;
}

.hbl-feed-sheet__close {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-content-neutral-strong);
  cursor: pointer;
}

.hbl-feed-sheet__close svg {
  width: 22px;
  height: 22px;
}

.hbl-feed-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 탭은 시트 위쪽에 붙어 있다. 내려 읽다가도 바로 바꾼다. */
.hbl-feed-sheet__body .hbl-community__toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-top: 8px;
  background: var(--color-background-main-content);
}

/* 뒤 페이지 멈춤. 아이폰은 overflow 만으로는 멈추지 않아 자리를 고정한다. */
html.hbl-feed-sheet-lock,
html.hbl-feed-sheet-lock body {
  overflow: hidden;
}

html.hbl-feed-sheet-lock body {
  position: fixed;
  right: 0;
  left: 0;
}

/* 시트 위에서 뜨는 로그인 창은 시트보다 위다. 사이트 공통 스타일(hbl.css)이
   모든 창을 !important 로 10001 에 묶어 두어, 시트가 열린 동안만 같은 힘으로
   올린다. */
html.hbl-feed-sheet-lock .modal-backdrop {
  z-index: 100000 !important;
}

html.hbl-feed-sheet-lock .modal {
  z-index: 100001 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hbl-feed-sheet {
    animation: none;
  }
}

/* 순서 고르기. 프로토타입 그대로 — 탭과 같은 줄, 같은 크기의 글자와 화살표.
   누르면 카드 모양의 작은 목록이 오른쪽 아래로 열린다. */
.hbl-community__sort {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-end;
}

.hbl-community__sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 17px 0 14px;
  border: 0;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.hbl-community__sort-trigger .hbl-community__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* 버튼 아래 여백(14px)을 거슬러 올라가 글자 바로 아래에 붙는다. */
.hbl-community__sort-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  z-index: 4;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--color-border-neutral);
  border-radius: 10px;
  background: var(--color-background-main-content);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.14);
}

.hbl-community__sort-menu[hidden] {
  display: none;
}

.hbl-community__sort-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-neutral-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.hbl-community__sort-menu button:hover,
.hbl-community__sort-menu button:focus-visible {
  background: var(--color-background-sub-content);
}

.hbl-community__sort-menu button[aria-checked="true"] {
  font-weight: 600;
}

html[data-theme="dark"] .hbl-community__sort-menu {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.5);
}

/* ---------- 회차 화면 댓글 ----------
   작성칸은 리뷰 작성칸과 같은 상자다. WordPress 폼 안에 서므로 테마가 폼의
   본문 칸에 거는 테두리와 여백을 벗긴다. 댓글 목록의 가림막과 GIF 는 피드와
   같은 조각이다. */
/* 부모 테마는 이 폼의 모든 자식에서 테두리를 지우고 좌우 여백을 준다(폼은
   음수 여백). 같은 무게의 선택자로 상자만 리뷰 작성칸의 모양으로 되돌린다. */
#madara-comments.comments-area #respond.comment-respond .comment-form > [data-hbl-chapter-comment] {
  display: block;
  width: auto;
  margin: 0 15px 12px;
  padding: 0;
  border: 1px solid var(--hbl-community-field-border);
  border-radius: 9px;
  background: var(--hbl-community-field-background);
  font-size: 14px;
}

#commentform [data-hbl-chapter-comment] textarea {
  height: auto;
  min-height: 104px;
  margin: 0;
  padding: 14px 68px 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-content-neutral-strong);
  font-size: 14px;
  line-height: 1.5;
}

#commentform [data-hbl-chapter-comment] textarea:focus,
#commentform [data-hbl-chapter-comment] textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* 보내기 버튼은 상자 안에 있다. 남은 줄에는 숨은 값만 있다. */
#commentform:has([data-hbl-chapter-comment]) .form-submit {
  margin: 0;
  padding: 0;
}

.hbl-community-comment-text .hbl-community-spoiler {
  margin: 4px 0;
}

.hbl-community-comment-text__body p:last-child {
  margin-bottom: 0;
}