/* ==========================================================================
   more — 긴 글을 접었다 펼친다 `[2026-09-18]`

   접힌 상태에서는 아래가 흐려지며 끊긴다. 칼로 자른 듯 끊기면 글이 거기서
   끝난 것처럼 보여, 펼쳐볼 것이 남았다는 신호가 되지 않는다.

   기본은 **펼친 상태**다. 접는 것은 more.js 가 글 높이를 재고 나서 붙인다 —
   JS 가 죽으면 전부 보인다.
   ========================================================================== */

/* 묶음 자체는 아래 여백을 갖지 않는다 — 부모의 줄 간격(12px)이 이미 있다 */
.more { margin-bottom: calc(var(--sp-3) * -1); }

.more__body { position: relative; }

.is-clamped .more__body {
  /* 자르는 높이는 more.js 가 Description 위치를 재서 넣는다 */
  max-height: var(--more-max, 420px);
  overflow: hidden;
}

/* 흐려지는 끝단. 글 위에 얹히므로 클릭을 가로채지 않게 한다 */
.is-clamped .more__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--c-bg));
  pointer-events: none;
}

.more__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  /* 위는 넉넉히, 아래는 붙인다 `[2026-09-18]` — 버튼은 위 글에서 떨어져 나와야
     "여기부터는 더 볼 사람만" 으로 읽힌다. 아래는 상세가 끝나는 자리라
     여백이 겹쳐 빈 칸만 넓어진다 */
  margin-top: var(--sp-6);
  /* 선 하나만 두고 안은 비운다. 선도 글자도 회색이다 `[2026-09-18]` —
     --c-line-card 는 제품 카드용이라 파란빛(#a2bde4)이 돌아, 회색 자리에
     쓰면 흐린 파란 버튼처럼 보였다. 썸네일 테두리와 같은 회색을 쓴다 */
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.more__toggle:hover {
  border-color: var(--c-text-chip);
  color: var(--c-text);
  background: none;
}

/* 펼치면 화살표가 돌아 위를 가리킨다 — 다시 접는 버튼이라는 뜻이다 */
.more__toggle svg { transition: transform .18s ease; }
.more__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 넓은 화면에서는 접지 않는다 — more.js 도 붙지 않지만, 화면을 넓혔을 때
   접힌 채로 남지 않게 CSS 로도 못을 박는다 `[2026-09-18]` */
@media (min-width: 768px) {
  .is-clamped .more__body { max-height: none; overflow: visible; }
  .is-clamped .more__body::after { content: none; }
  .more__toggle { display: none; }
}