/* 글꼴과 카드 미리보기 — 회원·관리자 화면이 같이 쓴다 */
@font-face {
  font-family: "Pretendard NX";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

/* 카드: 4:5, 글자는 카드 폭 기준 */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 4px;
  font-family: "Pretendard NX", -apple-system, "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
  background: #0a0c0d;
  /* 사파리에서 flex 안에 들어가면 비율이 무너져 카드가 길게 늘어났다 — 비율을 늘 지키게 */
  flex: none;
  min-height: 0;
  height: auto;
}
.card__photo { position: absolute; inset: 0; background: #2a2d2b center / cover no-repeat; }
.card [data-edit] { cursor: pointer; border-radius: 1.2cqw; outline: 0.5cqw dashed transparent; outline-offset: 0.8cqw; transition: outline-color 0.15s, background-color 0.15s; }
.card[data-noedit] [data-edit] { cursor: inherit; }
.editable .card:not([data-noedit]) [data-edit]:hover,
.editable .card:not([data-noedit]) [data-edit].is-on { outline-color: #2f6fed; }
.editable .card:not([data-noedit]) .card__photo[data-edit].is-on { outline-offset: -2cqw; }

/* 앱 결: 어두운 사진 + 가는 큰 글씨(점핑런 앱 디자인 값) */
.card--app .card__photo { filter: saturate(0.84) brightness(0.8) contrast(1.04); }
.card--app .card__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(10, 12, 13, 0.5) 0, rgba(10, 12, 13, 0) 28%),
  linear-gradient(180deg, rgba(10, 12, 13, 0) 38%, rgba(10, 12, 13, 0.7) 60%, rgba(10, 12, 13, 0.96) 82%); }
.card--app .card__wordmark { position: absolute; top: 5.4cqw; left: 0; right: 0; text-align: center; color: rgba(244, 241, 234, 0.95); font-size: 3.6cqw; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em; }
.card--app .card__body { position: absolute; left: 6cqw; right: 6cqw; bottom: 8cqw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3cqw; }
.card--app .card__kicker { font-size: 3cqw; font-weight: 600; letter-spacing: 0.16em; color: rgba(244, 241, 234, 0.72); padding: 0.6cqw 1.6cqw; }
.card--app .card__title { margin: 0; font-size: 8.4cqw; font-weight: 300; line-height: 1.22; letter-spacing: -0.035em; color: #f4f1ea; padding: 0.6cqw 1.6cqw; }
.card--app .card__summary { margin: 0; font-size: 3.5cqw; line-height: 1.58; color: rgba(244, 241, 234, 0.74); padding: 0.6cqw 1.6cqw; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 사진 강조: 사진 크게, 아래 흰 띠 */
.card--photo { background: #fff; }
.card--photo .card__photo { inset: 0 0 34% 0; }
.card--photo .card__band { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; padding: 4.6cqw 6cqw 4cqw; display: flex; flex-direction: column; gap: 1.4cqw; background: #fff; color: #15181a; }
.card--photo .card__kicker { align-self: flex-start; font-size: 2.8cqw; font-weight: 700; color: #fff; background: #2f6fed; border-radius: 1cqw; padding: 0.8cqw 2cqw; }
.card--photo .card__title { margin: 0; font-size: 6.4cqw; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.card--photo .card__title br { display: none; }
.card--photo .card__summary { margin: 0; font-size: 3.1cqw; line-height: 1.5; color: #4a5157; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card--photo .card__brand { position: absolute; right: 6cqw; top: 4.6cqw; font-size: 2.6cqw; font-weight: 600; color: #8a9096; }

/* 공지형: 밝은 바탕에 굵은 제목 */
.card--notice { background: #f3f1ea; color: #15181a; padding: 7cqw 7cqw 0; display: flex; flex-direction: column; gap: 2.4cqw; }
.card--notice .card__brand { font-size: 2.8cqw; font-weight: 700; letter-spacing: 0.12em; color: #2f6fed; }
.card--notice .card__kicker { align-self: flex-start; font-size: 3cqw; font-weight: 700; color: #15181a; background: #ffd257; border-radius: 1cqw; padding: 0.8cqw 2cqw; }
.card--notice .card__title { margin: 1cqw 0 0; font-size: 9cqw; font-weight: 800; line-height: 1.16; letter-spacing: -0.04em; }
.card--notice .card__summary { margin: 0; font-size: 3.5cqw; line-height: 1.55; color: #3d4448; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card--notice .card__photo { position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin: 2cqw -7cqw 0; border-radius: 0; }

/* 사진 장 */
.card--slide .card__page { position: absolute; top: 4cqw; right: 4cqw; font-size: 2.8cqw; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 99px; padding: 0.8cqw 2.2cqw; }
.card--slide .card__tag { position: absolute; left: 4.4cqw; bottom: 4cqw; font-size: 2.8cqw; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }