/* ===========================
   목록 공통 변수
=========================== */
:root {
    --list-gallery-width: 180px;
    --list-gallery-height: 240px;
    --list-gallery-gap: 20px;

    --list-border-color: #dddddd;
    --list-light-border-color: #e5e5e5;

    --list-muted-color: #888888;
    --list-secondary-color: #555555;

    --list-overlay-color:
        rgba(0, 0, 0, 0.62);

    --list-locked-overlay:
        rgba(30, 30, 30, 0.56);
}

/* ===========================
   기본 목록
=========================== */
.list-wrap,
.list-inner {
    width: 100%;
}

.list-header {
    margin-bottom: 30px;
}

.list-title {
    margin-bottom: 6px;

    font-size: 28px;
    line-height: 1.35;
}

.list-count {
    color:
        var(--list-muted-color);

    font-size: 14px;
}

.list-item {
    margin-bottom: 30px;
    padding-bottom: 24px;

    border-bottom:
        1px solid
        var(--list-border-color);
}

.list-item > a {
    display: flex;
    align-items: flex-start;

    gap: 20px;
}

.list-thumb {
    position: relative;

    width: 160px;
    min-width: 160px;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    border-radius: 6px;

    background: transparent;

    font-size: 0;
    line-height: 0;
}

.list-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    font-size: initial;
    line-height: normal;
}

.list-info {
    flex: 1;

    min-width: 0;
}

.list-item-title,
.list-item h2 {
    margin-bottom: 10px;

    font-size: 22px;
    line-height: 1.4;
}

.list-summary,
.list-item p {
    color:
        var(--list-secondary-color);

    font-size: 15px;
    line-height: 1.6;
}

.list-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

    color:
        var(--list-muted-color);

    font-size: 13px;
}

.empty-list {
    padding: 80px 20px;

    color:
        var(--list-muted-color);

    text-align: center;
}

/* ===========================
   외부 썸네일
=========================== */
.external-thumb {
    display: none;
}

.list-thumb.has-external-thumb
> .external-thumb {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}

.list-thumb.has-external-thumb
> .tistory-thumb {
    display: none;
}

.list-thumb.no-thumb:not(.has-external-thumb)::before {
    content: "NO IMAGE";

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: #aaaaaa;

    font-size: 13px;
    line-height: 1.4;
}

/* ===========================
   갤러리 카드 공통
=========================== */
.list-item.is-gallery-layout-item {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    overflow: hidden;
}

.list-item.is-gallery-layout-item
> a {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;
}

.list-item.is-gallery-layout-item
.list-thumb {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;

    aspect-ratio: 3 / 4;

    margin: 0;

    overflow: hidden;

    border-radius: 6px;

    background: transparent;
}

.list-item.is-gallery-layout-item
.list-thumb
> .tistory-thumb,

.list-item.is-gallery-layout-item
.list-thumb.has-external-thumb
> .external-thumb {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;

    transition:
        transform 0.3s ease,
        filter 0.25s ease;
}

.list-item.is-gallery-layout-item
.list-thumb.has-external-thumb
> .tistory-thumb,

.list-item.is-gallery-layout-item
.list-thumb:not(.has-external-thumb)
> .external-thumb {
    display: none;
}

.list-item.is-gallery-layout-item
.list-info {
    position: absolute;

    left: 0;
    bottom: -48px;
    z-index: 3;

    width: 100%;
    min-width: 0;

    padding: 10px 8px;

    background:
        var(--list-overlay-color);

    color: #ffffff;

    text-align: center;

    opacity: 0;

    transition:
        bottom 0.3s ease,
        opacity 0.3s ease;
}

.list-item.is-gallery-layout-item
.list-summary,

.list-item.is-gallery-layout-item
.list-meta {
    display: none;
}

.list-item.is-gallery-layout-item
.list-item-title,

.list-item.is-gallery-layout-item
h2 {
    margin: 0;

    color: inherit;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item.is-gallery-layout-item:hover
.list-info,

.list-item.is-gallery-layout-item:focus-within
.list-info {
    bottom: 0;

    opacity: 1;
}

.list-item.is-gallery-layout-item:hover
.list-thumb img,

.list-item.is-gallery-layout-item:focus-within
.list-thumb img {
    transform:
        scale(1.05);
}

/* ===========================
   갤러리형 개별 카테고리
=========================== */
body.is-person-category
.list-inner {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            var(--list-gallery-width)
        );

    justify-content: center;

    gap:
        var(--list-gallery-gap);

    width: 100%;

    max-width:
        calc(
            (
                var(--list-gallery-width) *
                4
            ) +
            (
                var(--list-gallery-gap) *
                3
            )
        );

    margin: 0 auto;
}

body.is-person-category
.list-item.is-gallery-layout-item {
    width:
        var(--list-gallery-width);

    height:
        var(--list-gallery-height);
}

/* ===========================
   압축 목록 공통
=========================== */
body.is-simple-list-category
.list-inner,

.all-category-list {
    display: block;

    width: 100%;
}

body.is-simple-list-category
.list-item,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
),

.all-category-list-item {
    width: 100%;

    margin: 0;
    padding: 14px 0;

    border-bottom:
        1px solid
        var(--list-light-border-color);
}

.all-category-list-item:first-child {
    border-top:
        1px solid
        var(--list-light-border-color);
}

body.is-simple-list-category
.list-item
> a,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
> a,

.all-category-list-item
> a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;
}

body.is-simple-list-category
.list-item
.list-thumb,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-thumb,

.all-category-list-item
.list-thumb,

body.is-simple-list-category
.list-item
.list-summary,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-summary,

.all-category-list-item
.list-summary,

body.is-simple-list-category
.list-item
.list-category,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-category,

.all-category-list-item
.list-category {
    display: none;
}

body.is-simple-list-category
.list-item
.list-info,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-info,

.all-category-list-item
.list-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;
    min-width: 0;
}

body.is-simple-list-category
.list-item
.list-item-title,

body.is-simple-list-category
.list-item h2,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-item-title,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
h2,

.all-category-list-item
.list-item-title,

.all-category-list-item h2 {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

body.is-simple-list-category
.list-item
.list-meta,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
)
.list-meta,

.all-category-list-item
.list-meta {
    display: flex;
    flex-shrink: 0;

    margin: 0;

    color: #999999;

    font-size: 13px;
}

body.is-simple-list-category
.list-item:hover h2,

body.is-simple-list-category
.list-item:focus-within h2,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
):hover h2,

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
):focus-within h2,

.all-category-list-item:hover h2,

.all-category-list-item:focus-within h2 {
    color:
        var(--color-accent, #d28a2e);
}

/* ===========================
   검색·태그 결과
=========================== */
body:is(
    .is-search-page,
    .is-tag-result-page
)
.list-inner {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            var(--list-gallery-width)
        );

    justify-content: center;

    gap:
        var(--list-gallery-gap);

    width: 100%;

    max-width:
        calc(
            (
                var(--list-gallery-width) *
                5
            ) +
            (
                var(--list-gallery-gap) *
                4
            )
        );

    margin-right: auto;
    margin-left: auto;
}

/*
 * 검색·태그 결과의 갤러리 게시글은
 * 개별 갤러리형 카테고리와 같은 180×240 크기를 사용합니다.
 */
body:is(
    .is-search-page,
    .is-tag-result-page
)
.search-person-item {
    width:
        var(--list-gallery-width);

    height:
        var(--list-gallery-height);

    min-width:
        var(--list-gallery-width);

    max-width:
        var(--list-gallery-width);

    justify-self: center;
}

body:is(
    .is-search-page,
    .is-tag-result-page
)
.search-person-item
> a {
    width:
        var(--list-gallery-width);

    height:
        var(--list-gallery-height);
}

body:is(
    .is-search-page,
    .is-tag-result-page
)
.search-person-item
.list-thumb {
    width:
        var(--list-gallery-width);

    min-width:
        var(--list-gallery-width);

    max-width:
        var(--list-gallery-width);

    height:
        var(--list-gallery-height);

    aspect-ratio: auto;
}

body:is(
    .is-search-page,
    .is-tag-result-page
)
:is(
    .search-default-item,
    .search-simple-item
) {
    grid-column:
        1 / -1;
}

/* ===========================
   카테고리 전체보기
=========================== */
body.is-all-category-page.is-all-category-layout-enabled
.list-header {
    margin-bottom: 36px;
}

body.is-all-category-page.is-all-category-layout-enabled
.list-count {
    display: none;
}

body:not(.is-all-category-layout-enabled)
.all-category-sections {
    display: none;
}

.all-category-sections {
    display: flex;
    flex-direction: column;

    gap: 54px;

    width: 100%;
}

.all-category-section {
    width: 100%;
}

.all-category-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
    padding-bottom: 0;

    border-bottom: 0;
}

.all-category-section-title {
    margin: 0;

    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.all-category-section-title-link {
    color:
        var(--color-text, #333333);
}

.all-category-section-title-link:hover,
.all-category-section-title-link:focus-visible {
    color:
        var(--color-accent, #d28a2e);
}

.all-category-section-footer {
    margin-top: 16px;

    text-align: right;
}

.all-category-more-link {
    color:
        var(--color-muted, #777777);

    font-size: 13px;
    line-height: 1.5;
}

.all-category-more-link:hover,
.all-category-more-link:focus-visible {
    color:
        var(--color-accent, #d28a2e);
}

/* ===========================
   전체보기 갤러리
=========================== */
.all-category-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            var(--list-gallery-width)
        );

    justify-content: start;

    gap:
        var(--list-gallery-gap);

    width: 100%;
}

.all-category-gallery-item {
    width:
        var(--list-gallery-width);

    height:
        var(--list-gallery-height);
}

/* ===========================
   전체보기 상태 메시지
=========================== */
.all-category-loading,
.all-category-error,
.all-category-empty {
    grid-column:
        1 / -1;

    width: 100%;

    padding: 30px 16px;

    color:
        var(--list-muted-color);

    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.all-category-error {
    color: #aa5555;
}

/* ===========================
   보호글·비공개글 공통
=========================== */
.locked-thumb {
    position: absolute;

    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;

    background:
        var(--list-locked-overlay);

    color: #ffffff;

    text-align: center;

    pointer-events: none;
}

.locked-thumb-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;

    padding: 6px 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.74);

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.38);

    color: #ffffff;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;

    letter-spacing: 0.02em;
}

.is-locked-post
.list-thumb {
    isolation: isolate;
}

.is-locked-post
.list-thumb
> img {
    transition:
        filter 0.25s ease,
        transform 0.3s ease;
}

.is-gallery-layout-item.is-locked-post
.list-thumb
> img,

.is-private-post
.list-thumb
> img {
    filter:
        grayscale(0.88)
        brightness(0.72);
}

/*
 * 목록형 보호글은 썸네일 대신
 * 제목 앞 보호글 배지를 사용합니다.
 */
.is-list-layout-item.is-protected-post:not(.is-private-post)
.list-thumb {
    display: none;
}

.protected-title-badge {
    display: inline-flex;
    align-items: center;

    margin-right: 7px;
    padding: 2px 6px;

    border:
        1px solid #bbbbbb;

    border-radius: 3px;

    color: #777777;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;

    vertical-align: 0.12em;
}

.is-gallery-layout-item
.protected-title-badge {
    display: none;
}

/*
 * 비공개글은 목록형에서도 썸네일과
 * 비공개 라벨을 유지합니다.
 */
.is-list-layout-item.is-private-post
.list-thumb {
    display: block;
}

/* ===========================
   전체보기 반응형
=========================== */
@media (max-width: 1280px) {
    .all-category-gallery-grid {
        grid-template-columns:
            repeat(
                4,
                var(--list-gallery-width)
            );
    }
}

@media (max-width: 1040px) {
    .all-category-gallery-grid {
        grid-template-columns:
            repeat(
                3,
                var(--list-gallery-width)
            );
    }
}

/* ===========================
   태블릿 검색·태그 결과
=========================== */
@media (max-width: 1024px) {
    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .list-inner {
        grid-template-columns:
            repeat(
                3,
                var(--list-gallery-width)
            );

        max-width:
            calc(
                (
                    var(--list-gallery-width) *
                    3
                ) +
                (
                    var(--list-gallery-gap) *
                    2
                )
            );
    }
}

/* ===========================
   모바일 목록
=========================== */
@media (max-width: 768px) {
    .list-title {
        font-size: 24px;
    }

    /*
     * 기본형 목록만 세로 카드로 전환합니다.
     * 갤러리와 압축 목록은 아래 전용 규칙을 사용합니다.
     */
    .list-item:not(.is-gallery-layout-item)
    > a {
        display: block;
    }

    .list-item:not(.is-gallery-layout-item)
    .list-thumb {
        width: 100%;
        min-width: 0;

        margin-bottom: 14px;
    }

    .list-item:not(.is-gallery-layout-item)
    .list-item-title,

    .list-item:not(.is-gallery-layout-item)
    h2 {
        font-size: 20px;
    }

    /* ===========================
       모바일 갤러리형 카테고리
    =========================== */
    body.is-person-category
    .list-inner {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;

        width: 100%;
        max-width: 560px;

        margin: 0 auto;
    }

    body.is-person-category
    .list-item.is-gallery-layout-item {
        width: 100%;
        height: auto;
    }

    /* ===========================
       모바일 갤러리 카드 공통
    =========================== */
    .list-item.is-gallery-layout-item {
        width: 100%;
        height: auto;
    }

    .list-item.is-gallery-layout-item
    > a {
        width: 100%;
        height: auto;
    }

    .list-item.is-gallery-layout-item
    .list-thumb {
        width: 100%;
        min-width: 0;
        height: auto;

        aspect-ratio: 3 / 4;
    }

    .list-item.is-gallery-layout-item
    .list-info {
        bottom: 0;

        padding: 8px 6px;

        opacity: 1;
    }

    .list-item.is-gallery-layout-item
    .list-item-title,

    .list-item.is-gallery-layout-item
    h2 {
        font-size: 13px;
    }

    /*
     * 검색·태그 결과의 갤러리 항목은
     * 모바일 공통 유동 크기 규칙보다 우선하여
     * 180×240 크기를 유지합니다.
     */
    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .search-person-item {
        width:
            var(--list-gallery-width);

        height:
            var(--list-gallery-height);

        min-width:
            var(--list-gallery-width);

        max-width:
            var(--list-gallery-width);

        justify-self: center;
    }

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .search-person-item
    > a {
        width:
            var(--list-gallery-width);

        height:
            var(--list-gallery-height);
    }

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .search-person-item
    .list-thumb {
        width:
            var(--list-gallery-width);

        min-width:
            var(--list-gallery-width);

        max-width:
            var(--list-gallery-width);

        height:
            var(--list-gallery-height);

        aspect-ratio: auto;

        margin-bottom: 0;
    }

    /* ===========================
       모바일 압축 목록
    =========================== */
    body.is-simple-list-category
    .list-item
    > a,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    > a,

    .all-category-list-item
    > a {
        display: block;
    }

    body.is-simple-list-category
    .list-item
    .list-info,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    .list-info,

    .all-category-list-item
    .list-info {
        display: block;
    }

    body.is-simple-list-category
    .list-item
    .list-thumb,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    .list-thumb,

    .all-category-list-item
    .list-thumb {
        display: none;

        margin: 0;
    }

    body.is-simple-list-category
    .list-item
    .list-item-title,

    body.is-simple-list-category
    .list-item h2,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    .list-item-title,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    h2,

    .all-category-list-item
    .list-item-title,

    .all-category-list-item h2 {
        margin-bottom: 6px;

        font-size: 16px;

        white-space: normal;
    }

    body.is-simple-list-category
    .list-item
    .list-meta,

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    )
    .list-meta,

    .all-category-list-item
    .list-meta {
        font-size: 12px;
    }

    /* ===========================
       모바일 검색·태그 결과
    =========================== */
    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .list-inner {
        grid-template-columns:
            repeat(
                2,
                var(--list-gallery-width)
            );

        gap: 14px;

        width: 100%;

        max-width:
            calc(
                (
                    var(--list-gallery-width) *
                    2
                ) +
                14px
            );

        margin-right: auto;
        margin-left: auto;
    }

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    ) {
        grid-column:
            1 / -1;
    }

    /* ===========================
       모바일 전체 카테고리
    =========================== */
    .all-category-sections {
        gap: 42px;
    }

    .all-category-section-header {
        margin-bottom: 4px;
    }

    .all-category-section-title {
        font-size: 20px;
    }

    .all-category-gallery-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;
    }

    /*
     * 모바일 전체보기에서는 2열 두 줄,
     * 총 네 개까지만 표시합니다.
     */
    .all-category-gallery-grid
    .all-category-gallery-item:nth-child(n + 5) {
        display: none;
    }

    .all-category-gallery-item {
        width: 100%;
        height: auto;
    }

    /* ===========================
       모바일 잠금 표시
    =========================== */
    .locked-thumb {
        padding: 8px;
    }

    .locked-thumb-label {
        min-width: 50px;

        padding: 5px 8px;

        font-size: 11px;
    }

    .protected-title-badge {
        margin-right: 5px;
        padding: 2px 5px;

        font-size: 10px;
    }
}

/* ===========================
   작은 모바일 검색·태그 결과
=========================== */
@media (max-width: 480px) {
    /*
     * 180px 카드 두 개가 들어가지 않는 화면에서는
     * 한 열로 전환하여 가로 스크롤을 방지합니다.
     */
    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    .list-inner {
        grid-template-columns:
            var(--list-gallery-width);

        max-width:
            var(--list-gallery-width);
    }

    body:is(
        .is-search-page,
        .is-tag-result-page
    )
    :is(
        .search-default-item,
        .search-simple-item
    ) {
        grid-column:
            1;
    }
}

/* ===========================
   모션 감소 환경
=========================== */
@media (prefers-reduced-motion: reduce) {
    .list-item.is-gallery-layout-item
    .list-info,

    .list-item.is-gallery-layout-item
    .list-thumb
    > img,

    .is-locked-post
    .list-thumb
    > img {
        transition: none;
    }
}