/* ---------------------------------------
   Works
--------------------------------------- */

.works-page {
    width: 100%;

    padding:
        16px
        var(--page-x);
}


/* ---------------------------------------
   Grid
--------------------------------------- */

.works-grid {
    width: 100%;

    row-gap: 32px;

    align-items: start;
}


.work-card {
    grid-column: span 3;

    display: block;

    min-width: 0;
}


/* ---------------------------------------
   Image
--------------------------------------- */

.work-card__image-area {
    width: 100%;
    height: 169px;

    padding:
        16px
        0;

    display: flex;

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

    overflow: hidden;
}


.work-card__image {
    display: block;

    width: auto;
    height: auto;

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

    object-fit: contain;
}


/* ---------------------------------------
   Information
--------------------------------------- */

.work-card__info {
    margin-top: 8px;

    display: grid;

    grid-template-columns:
        max-content
        minmax(0, 1fr);

    column-gap: 8px;

    align-items: start;
}


.work-card__year {
    padding-top: 3px;

    font-family:
        var(--font-hal),
        serif;

    font-size: 12px;
    line-height: 1;

    white-space: nowrap;
}


.work-card__description {
    min-width: 0;
}


.work-card__title-ko {
    font-family: var(--font-schema), var(--font-ko), sans-serif;
    font-size: 15px;
    line-height: 1.32;
    font-weight: 500;
    word-break: keep-all;
}


.work-card__english {
    margin-top: 4px;

    font-family:
        var(--font-hal),
        serif;

    font-size: 16px;
    line-height: 1.23;
}


.work-card__title-en,
.work-card__details {
    font: inherit;
}

.work-card__title-en em {
    font-style: italic;
}

/* ---------------------------------------
   Modal
--------------------------------------- */


.works-modal[aria-hidden="true"] {
    display: none;
}

/* ---------------------------------------
   Works Modal
--------------------------------------- */

.works-modal[aria-hidden="true"] {
    display: none;
}

.works-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

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

.works-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(204, 204, 204, 0.87);
}

.works-modal__panel {
    position: relative;
    z-index: 1;

    width: calc(
        ((100vw - 32px - 112px) / 15) * 13
        + 96px
    );

    max-width: 1380px;

    height: min(
        calc(100dvh - 160px),
        900px
    );

    padding: 16px;

    background: #fff;
}

.works-modal__content {
    height: 100%;

    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    column-gap: 8px;
}

.works-modal__media {
    grid-column: 1 / span 7;

    min-width: 0;
    min-height: 0;
}

.works-modal__media img {
    display: block;
}

.works-modal__media.is-portrait img {
    height: 100%;
    width: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: left top;
}

.works-modal__media.is-landscape img {
    width: 100%;
    height: auto;
}

.works-modal__info {
    grid-column: 9 / span 5;

    min-width: 0;

    display: flex;
    flex-direction: column;
}

.works-modal__text {
    font-size: 16px;
    line-height: 1.3;
}

.works-modal__desktop-nav {
    margin-top: auto;

    display: grid;
    grid-template-columns: auto auto 1fr auto;
    column-gap: 16px;

    align-items: end;
}

.works-modal__desktop-nav button {
    padding: 0;
    border: 0;

    background: none;
    color: inherit;

    font: inherit;

    cursor: pointer;
}

.works-modal__desktop-nav [data-work-close] {
    grid-column: 4;
}

.works-modal__mobile-nav {
    display: none;
}

body.works-modal-open {
    overflow: hidden;
}

.works-modal__title-ko {
    font-weight: 500;
}

.works-modal [data-work-prev]:disabled,
.works-modal [data-work-next]:disabled {
    color: #AEAEB2;
    cursor: default;
}

.works-modal__title-en {
    font-family:
        var(--font-hal),
        serif;
}

.works-modal__details {
    font-family:
        var(--font-hal),
        serif;
}

.works-modal__description {
    margin-top: 8px;
}

.works-modal__english {
    margin-top: 0;
}

.works-modal__year {
    font-family: var(--font-hal), serif;
    font-size: 12px;
}