.catalogShell.eventCatalog {
    --catalog-shell-width: var(--bj-content-max, 1000px);
    --catalog-shell-grid-columns: 3;
    --catalog-shell-grid-gap: 42px 20px;
    --catalog-media-aspect-ratio: 16 / 9;
    --catalog-media-radius: var(--bj-catalog-media-radius, 8px);
    padding-bottom: 80px;
    color: var(--bj-text);
    font-family: var(--bj-font-family);
}

.eventCatalog__category { border-bottom: 1px solid var(--bj-line); }
.eventCatalog__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 24px; }
.eventCatalog__count { margin: 0; color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
.eventCatalog__count strong { color: var(--bj-text); font-weight: 600; }
.eventCatalogCard__media { position: relative; margin: 0; background: var(--bj-product-stage); }
.eventCatalogCard__media a, .eventCatalogCard__media img { display: block; width: 100%; height: 100%; }
.eventCatalogCard__media img { object-fit: cover; }
.eventCatalogCard__media img.is-ended { filter: grayscale(1); }
/* Block surface focus: the image link and the title link underline the event title; no box. */
.catalogShell .eventCatalogCard .eventCatalogCard__media > a:focus-visible, .eventCatalogCard__title a:focus-visible { outline: none; }
.eventCatalogCard:has(.eventCatalogCard__media > a:focus-visible) .eventCatalogCard__title a, .eventCatalogCard__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.eventCatalogCard__test { position: absolute; top: 8px; left: 8px; padding: 3px 6px; color: #fff; background: rgba(0,0,0,.65); font-size: 11px; }
.eventCatalogCard__description, .eventCatalogCard__date { margin: 0; color: var(--bj-muted); line-height: var(--bj-catalog-supporting-line, 20px); }
.eventCatalogCard__description { font-size: var(--bj-catalog-price-size, 14px); }
.eventCatalogCard__description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.eventCatalogCard__date { margin-top: auto; font-size: var(--bj-catalog-supporting-size, 13px); }
.eventCatalogCard__date time { font: inherit; }

@media (max-width: 1023px) { .catalogShell.eventCatalog { width: calc(100vw - 48px); --catalog-shell-grid-columns: 2; } }
@media (max-width: 767px) {
    .catalogShell.eventCatalog { width: 100%; padding: 0 16px 56px; --catalog-shell-grid-columns: 1; --catalog-shell-grid-gap: 24px; }
    .catalogShell.eventCatalog.catalogShell--without-identity { margin-top: 0; }
    /* 청첩장 목록의 모바일 카테고리 레일(92px)과 같은 수치·상태를 사용합니다. */
    .eventCatalog__category {
        height: 92px;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 16px 8px 0;
        scrollbar-width: none;
    }
    .eventCatalog__category::-webkit-scrollbar { display: none; }
    .eventCatalog__category .eventCatalogNavigation {
        display: grid;
        width: 100%;
        height: 75px;
        min-width: 100%;
        align-items: flex-start;
        gap: 0;
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
    .eventCatalogNavigation .catalogCategoryNav__group {
        display: grid;
        height: 75px;
        min-width: 0;
        align-items: flex-start;
        gap: 0;
    }
    .eventCatalogNavigation .catalogCategoryNav__group--primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .eventCatalogNavigation .catalogCategoryNav__group--related {
        grid-template-columns: minmax(0, 1fr);
    }
    .eventCatalogNavigation .eventCatalogNavigation__item {
        width: 100%;
        min-width: 0;
        height: 69px;
        justify-content: center;
        padding: 2px 8px 0;
        gap: 5px;
        color: var(--bj-nav-primary, #384a52);
        font-weight: var(--bj-type-control-weight, 500);
    }
    .eventCatalogNavigation .eventCatalogNavigation__item:is(.is-current, [aria-current="page"]) {
        color: var(--bj-nav-active, #132b34);
    }
    .eventCatalogNavigation .eventCatalogNavigation__item::after {
        bottom: -6px;
        height: 1px;
    }
    .eventCatalog__toolbar { gap: 12px; padding: 20px 0; }
    /* 단추 모양은 공용 .catalogOutlineSwitch(112px 두 단추)를 따르되 칸이 모자라면 줄어든다. 종전 «격자 두 칸·최소 폭 0» 은 공용 규칙
     * (catalog-shell.css — 이 파일보다 뒤에 실린다)과 우선순위가 같아 한 번도 먹지 않았고, 320 폭에서 두 단추(112+8+112)가 칸(207px)을
     * 넘어 「완료 이벤트」가 화면 밖 9px 였다(실측 20260924). 두 클래스로 세워 줄어들 수만 있게 한다 — 360 이상은 종전 모양 그대로. */
    .eventCatalog__mode { min-width: 0; flex: 1; }
    .catalogOutlineSwitch.eventCatalog__mode a { flex: 0 1 112px; min-width: 0; padding: 0 8px; }
}

/* PC 주소에서도 모바일 헤더가 제목을 담당한다. */
@media (max-width: 768px) {
    .eventCatalog--pc .catalogListIdentity { display: none; }
    .catalogShell.eventCatalog--pc { margin-top: 0; }
}