/* 공개 카드 격자.
 *
 * 색을 직접 적지 않는다 — studio 스킨이 재정의해 둔 브랜드 토큰을 그대로 쓴다.
 * 그래야 다크 모드가 따라오고 브랜드 색을 조정할 때 이 파일만 옛 색으로 남지 않는다.
 * 토큰이 없는 곳(다른 스킨)에서도 뜨도록 각 var() 에 기본값을 둔다.
 */

.crv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

/* 블록이 코어 공용 레이아웃(리스트형·슬라이드형)으로 그릴 때. 열 수·슬라이드는
 * block.css 와 MubloItemLayout.js 가 맡고, 카드는 칸을 꽉 채우기만 한다.
 * `/showcase` 페이지는 위의 `.crv-cards` 격자를 그대로 쓴다. */
.crv-cards-layout { margin-top: 28px; }
.crv-cards-item { display: flex; min-width: 0; }
.crv-cards-item > .crv-card { flex: 1 1 auto; width: 100%; }
.crv-cards-layout.is-slide .swiper-slide { height: auto; }

.crv-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--card, #fff);
    border: 1px solid var(--border, #ece8ed);
    border-radius: var(--radius-xl, 18px);
    box-shadow: 0 9px 28px color-mix(in srgb, var(--foreground, #27071b) 7%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, border-color .16s ease;
}
.crv-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #d41472);
    box-shadow: 0 15px 38px color-mix(in srgb, var(--foreground, #27071b) 13%, transparent);
}
@media (prefers-reduced-motion: reduce) { .crv-card:hover { transform: none; } }

.crv-card__visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg,
                var(--accent, #ffe4ec),
                color-mix(in srgb, var(--accent, #ffe4ec) 60%, var(--card, #fff)));
}
.crv-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crv-card__visual--empty { display: grid; place-items: center; }
/* 썸네일이 없으면 브랜드 마크를 놓는다 — 꽉 채우면 마크가 잘린다. */
.crv-card__visual--empty img { width: 78px; height: 78px; object-fit: contain; }

.crv-card__platform {
    position: absolute;
    left: 13px;
    top: 13px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--background, #fff);
    background: color-mix(in srgb, var(--foreground, #190c15) 76%, transparent);
    backdrop-filter: blur(8px);
}

.crv-card__body { display: flex; min-height: 132px; flex-direction: column; padding: 17px; }
.crv-card__body h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    /* 카드가 이 화면의 증거다 — 제목은 읽히는 크기여야 한다. 두 줄로 자르므로
       키워도 카드 높이는 그대로다. */
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -.02em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.crv-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 13.5px;
    color: var(--muted-foreground, #7b7080);
}
.crv-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crv-card__go { flex: none; font-weight: 700; color: var(--primary, #d41472); }

.crv-showcase__more { margin-top: 26px; }

/* ── 빈 카드 (편집기 전용) ──────────────────────────────────
 *
 * 실물이 모자랄 때 **자리가 어떻게 잡히는지** 보라고 두는 것이다. 공개 화면에는
 * 나오지 않는다 — 렌더러가 편집기일 때만 수를 넘긴다(ShowcaseRenderer).
 *
 * **진짜 카드처럼 보이면 안 된다.** 점선 테두리와 옅은 바탕으로 "여기는 비어
 * 있다" 를 먼저 읽히고, 안의 막대는 글이 들어올 자리만 표시한다. 가짜 제목이나
 * 가짜 썸네일을 채우면, 편집기에서 본 화면과 공개된 화면이 달라진다. */
.crv-card--ghost {
    box-shadow: none;
    background: transparent;
    border-style: dashed;
    border-color: var(--border, #ece8ed);
}
.crv-card--ghost:hover { transform: none; border-color: var(--border, #ece8ed); box-shadow: none; }
.crv-card--ghost .crv-card__visual {
    background: color-mix(in srgb, var(--muted, #f6f2f7) 70%, transparent);
}
.crv-card__ghost-mark {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted-foreground, #7b7080);
    opacity: .7;
}
/* 글이 들어올 자리. 높이만 잡고 내용은 두지 않는다. */
.crv-card__bar {
    display: block;
    height: 11px;
    margin-bottom: 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--muted-foreground, #7b7080) 16%, transparent);
}
.crv-card__bar--short { width: 62%; }
.crv-card__bar--tiny { width: 34%; height: 9px; margin-bottom: 0; }

/* 편집기에서만 뜨는 안내. 공개 화면에는 이 요소 자체가 없다. */
.crv-showcase__notice {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px dashed var(--primary, #d41472);
    background: color-mix(in srgb, var(--primary, #d41472) 7%, transparent);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--foreground, #27071b);
}

/* ── 그 자리에서 재생 ───────────────────────────────────────
 *
 * 원본 영상은 서버에 없다. 주소만 받아 두고(`content_id`) 누르면 유튜브 창을
 * 그 칸에 끼운다(showcase.js). 누르기 전에는 썸네일뿐이다. */
.crv-card--play { cursor: pointer; }
.crv-card--play:focus-visible {
    outline: 2px solid var(--ring, #ff2d8f);
    outline-offset: 3px;
}

/* 재생 표시. **썸네일 위에 얹는다** — 영상인지 글인지가 누르기 전에 보여야
   "눌렀더니 유튜브로 나갔다" 가 안 생긴다. */
.crv-card__play {
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--foreground, #27071b) 62%, transparent);
    transition: transform .16s ease, background .16s ease;
}
/* 삼각형은 이미지가 아니라 테두리로 그린다 — 파일 하나를 더 받지 않는다. */
.crv-card__play::after {
    content: "";
    position: absolute;
    left: 21px; top: 17px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}
.crv-card--play:hover .crv-card__play {
    transform: scale(1.08);
    background: var(--primary, #d41472);
}
@media (prefers-reduced-motion: reduce) {
    .crv-card--play:hover .crv-card__play { transform: none; }
}

/* 끼워 넣은 유튜브 창. 썸네일 칸을 그대로 채운다 — 카드 높이가 안 바뀌어야
   옆 카드들이 밀리지 않는다. */
.crv-card__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* 재생 중에는 썸네일과 재생 표시를 걷는다. */
.crv-card.is-playing .crv-card__play { display: none; }
.crv-card.is-playing .crv-card__visual img { visibility: hidden; }
/* 카드가 들썩이지 않게 — 재생 중에는 들어올리지 않는다. */
.crv-card.is-playing:hover { transform: none; }

/* 묶음 라벨 — `영상` · `블로그`.
 *
 * 제목을 뺐으므로 **이 라벨이 섹션의 머리를 맡는다.** `.st-kicker` 의 11px 꼬리표
 * 크기로는 카드 위에 떠 있는 작은 글자로만 읽힌다. 제목 자리인 만큼 제목처럼
 * 세운다 — 색도 강조 분홍이 아니라 본문색으로 둔다. 분홍은 카드 안에서 이미
 * 여러 번 쓰인다. */
.crv-showcase .st-kicker {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: -.028em;
    text-transform: none;
    color: var(--foreground, #27071b);
}

/* PC·모바일 출력 개수를 따로 지킨다(Support\BlockCount). 렌더러는 큰 수만큼 그리고 넘치는
 * 카드는 그 폭에서 숨긴다. 슬라이드형은 숨기지 않는다 — 슬라이드 사이에 숨은 칸이 끼면
 * Swiper 의 넘김 계산이 어긋난다. */
@media (min-width: 768px) {
    .mublo-item-layout:not(.is-slide) .crv-hide-pc { display: none; }
}
@media (max-width: 767.98px) {
    .mublo-item-layout:not(.is-slide) .crv-hide-mo { display: none; }
}