@media (min-width: 1700px) {

}


@media (min-width: 2000px) {

}

@media all and (min-width: 813px) and (max-width: 1100px) {

    .home-card {
        grid-column: span 6;
    }

}

@media (hover: hover) and (pointer: fine) {

    .header-back-link:hover {
        color: var(--black);
        transition: color 0.12s ease;
    }

}

@media all and (max-width: 812px) and (orientation: portrait) {

    :root {
        --page-x: 24px;
        --grid-gap: 8px;

        --header-height: 70px;
    }


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

    .grid-12,
    .grid-15,
    .grid-8 {
        display: grid;

        grid-template-columns:
            repeat(8, minmax(0, 1fr));

        column-gap: var(--grid-gap);
    }



/* ---------------------------------------
   Header
--------------------------------------- */

.site-header__desktop {
    display: none;
}

.site-header__mobile {
    display: block;
}


/* ---------------------------------------
   Closed Header
--------------------------------------- */

    .mobile-header__base {
        padding:
            16px
            var(--page-x);
    }


    .mobile-header__brand-row {
        height: 16px;
        line-height: 1;
    }


    .mobile-header__brand {
        display: block;
        color: #000;
        font-size: 16px;
        line-height: 1;
    }

    .mobile-header-grid, .mobile-header__controls {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        align-items: start;
    }

    .mobile-header__controls {
        min-height: 16px;
        margin-top: 6px;
    }


    .mobile-header__menu-trigger {
        grid-column: 1 / span 2;
        color: #000;
        text-align: left;
        line-height: 1;
    }


    .mobile-header__secondary {
        grid-column: 3 / -1;
        margin: 0;
        color: #000;
        text-align: left;
        line-height: 1;
    }


    .mobile-header__language {
        grid-column: 8;
        justify-self: end;

        padding: 0;
        border: 0;
        background: none;

        font-family: var(--font-schema), sans-serif;
        font-size: 16px;
        line-height: 1;

        color: #000;
        cursor: pointer;
    }

.section-texts .mobile-header__secondary {
    grid-column: 3 / span 5;
}

    /* Back to List는 항상 회색 */

    .mobile-header__secondary.header-back-link,
    .header-back-link {
        color: var(--gray);
    }


/* ---------------------------------------
   Mobile Panel
--------------------------------------- */

.mobile-header__panel {
    display: none;
    position: fixed;
    z-index: 10001;
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: 16px var(--page-x);
    background: var(--page-bg);
}


.mobile-header__panel.is-open {
    display: block;
}


body.mobile-panel-open {
    overflow: hidden;
}


/* panel 안의 첫 줄 */

.mobile-header__panel > .mobile-header__brand {
    height: 16px;
}


/* brand 아래 Menu / Filter 영역 */

.mobile-header__open-row {
    margin-top: 12px;
}


/* ---------------------------------------
   Menu Open
--------------------------------------- */

.mobile-header__menu-list {
    grid-column: 1 / span 2;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    row-gap: 12px;

    min-width: 0;
}


.mobile-header__menu-list .mobile-menu-link {
    display: block;

    color: var(--gray);

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

    white-space: nowrap;
}


/* 현재 페이지 */

.mobile-header__menu-list .mobile-menu-link.is-active {
    color: #000;
}


/* 홈에서는 Works / Index / Texts / About 모두 검정 */

body.is-home
.mobile-header__menu-list
.mobile-menu-link {
    color: #000;
}


/* Close
   기존 항목 간격 12px + margin-top 12px
   = 앞 항목과 총 24px
*/

.mobile-header__menu-list
.mobile-header__close {
    margin-top: 12px;
}


.mobile-header__close {
    color: #000;

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

    text-align: left;

    white-space: nowrap;
}


/* Menu가 열린 상태에서 우측 Filter */

.mobile-header__switch--filter {
    grid-column: 3 / -1;

    color: #000;

    text-align: left;
    line-height: 1;
}


/* ---------------------------------------
   Filter Open
--------------------------------------- */

/* Filter가 열린 상태에서 좌측 Menu */

.mobile-header__switch--menu {
    grid-column: 1 / span 2;

    color: #000;

    text-align: left;
    line-height: 1;
}


.mobile-header__filter-list {
    grid-column: 3 / -1;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    row-gap: 12px;

    min-width: 0;
}


.mobile-header__filter-list a {
    display: block;

    color: var(--gray);

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

    white-space: nowrap;
}


.mobile-header__filter-list a.is-active {
    color: #000;
}


/* Filter Close도 앞 항목에서 총 24px */

.mobile-header__filter-list
.mobile-header__close {
    margin-top: 12px;
}


/* ---------------------------------------
   Panel Switch Buttons
--------------------------------------- */

.mobile-header__switch {
    padding: 0;
    border: 0;

    background: none;

    font-family: inherit;
    font-size: 16px;
    line-height: 1;

    cursor: pointer;
}


/* ---------------------------------------
   Copyright
--------------------------------------- */

.mobile-header__copyright {
    position: absolute;

    left: var(--page-x);
    bottom: 16px;

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

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

    color: #000;

    text-align: left;

    white-space: nowrap;
}


/* ---------------------------------------
   Home Header
--------------------------------------- */

/* 홈 닫힌 상태도 전부 검정 */

body.is-home
.mobile-header__brand,
body.is-home
.mobile-header__control,
body.is-home
.mobile-header__menu-trigger,
body.is-home
.mobile-header__secondary {
    color: #000;
}


    /* ---------------------------------------
       Footer
    --------------------------------------- */

    .site-footer {
        padding:
            80px
            var(--page-x)
            16px;

        text-align: left;
    }

        /* ---------------------------------------
       Home
    --------------------------------------- */

    .home-page {
        padding:
            0
            var(--page-x);
    }


    /* Intro */

    .home-intro__ko {
        font-size: 29px;
        line-height: 1.26;
    }


    .home-intro__en {
        margin-top: 24px;

        font-size: 31px;
        line-height: 1.10;
    }


    /* Hero */

    .home-hero-grid {
        display: block;

        margin-top: 24px;
    }


    .home-hero {
        width: 100%;
        height: auto;

        display: block;
    }


    .home-hero__media {
        width: 100%;
        height: auto;

        object-fit: unset;
    }


    /* Feed */

    .home-feed {
        display: block;
        margin-top: 24px;
    }


    .home-card {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(8, minmax(0, 1fr));

        column-gap: 8px;

        align-items: start;

        margin-bottom: 24px;
    }

    .home-card:last-child {
        margin-bottom: 0;
    }


    .home-card__text {
        grid-column: 1 / span 5;

        width: auto;
        min-width: 0;

        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        column-gap: 8px;
        row-gap: 0;
    }


    .home-card__year {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
        padding: 0;
        white-space: nowrap;
    }

    .home-card__category {
        grid-column: 3 / span 3;
        grid-row: 1;

        min-width: 0;
    }

    .home-card__titles {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 8px;
        min-width: 0;
    }


    .home-card__title-ko {
        font-size: 14.5px;
        line-height: 1.22;
        word-break: keep-all;
        font-weight: 500;
    }


    .home-card__title-en {
        margin-top: 0px;
        font-size: 16px;
        line-height: 1.20;
        word-break: keep-all;
    }


    .home-card__image {
        grid-column: 6 / span 3;
    }

    .home-card__image img {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;
    }


    /* Random logo */

    .home-random-logo {
        width: 40px;
    }


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

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

    .works-grid {
        display: block;
    }


    .work-card {
        display: block;

        width: 100%;

        margin-bottom: 48px;
    }


    .work-card:last-child {
        margin-bottom: 0;
    }


/* image height is no longer fixed */

.work-card__image-area {
    width: 100%;
    height: auto;
    padding: 0;
    display: grid;
    grid-template-columns:
        repeat(8, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
    justify-items: start;
    overflow: visible;
}

/* 세로형
   높이 315px 고정 / 너비 auto / 좌측 정렬
*/

.work-card__image.is-portrait {
    grid-column: 1 / -1;
    width: auto;
    height: 315px;
    max-width: 100%;
    object-fit: contain;
    object-position: left top;
    justify-self: start;
}


/* 가로형
   8단 중 7칸 / 높이 auto
*/

.work-card__image.is-landscape {
    grid-column: 1 / span 7;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: unset;
    justify-self: start;
}


/* info */

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

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

    column-gap: 8px;
}


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

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


.work-card__title-ko {
    font-size: 15px;
    line-height: 1.32;
}


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

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

/* ---------------------------------------
   Index
--------------------------------------- */

.index-page {
    padding:
        0
        var(--page-x);
}

.index-list {
    gap: 24px;
}


.index-card {
    height: auto;

    padding: 24px;

    display: block;

    overflow: visible;
}


.index-card__text {
    height: auto;
}


.index-card__category {
    position: static;

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


.index-card__title {
    position: static;

    width: 100%;

    margin-top: 24px;
    padding: 0;

    transform: none;

    font-size: 32px;
    line-height: 1.20;
}


.index-card__image {
    width: 100%;
    height: auto;

    margin-top: 24px;

    display: block;
}


.index-card__image img {
    width: 100%;
    height: auto;

    max-width: 100%;
}


/* ---------------------------------------
   Index Single
--------------------------------------- */

.index-single {
    padding:
        0
        var(--page-x);
}


.index-single__layout {
    display: block;
}


.index-single__left {
    position: static;

    width: 100%;
}


.index-single__title {
    font-size: 24px;
    line-height: 1.26;
}


.index-single__single-image {
    margin-top: 16px;
}


.index-single__single-image img {
    width: 100%;
    height: auto;
}


/* Right */

.index-single__right {
    width: 100%;
}


/*
 * Single image:
 * image → body = 16px
 */

.has-single-image
.index-single__right {
    margin-top: 16px;
}


/* Text */

    .index-single__text,
    .grid-9 {
        display: block;
    }


    .index-single__text {
        font-size: 16px;
        line-height: 1.30;
    }


    .has-slider
    .index-single__text {
        margin-top: 16px;
    }


    .index-single__overview,
    .index-single__body {
        width: 100%;
    }

    .index-single__overview {
        margin-bottom: 16px;
        font-size: 13px;
    }


/* ---------------------------------------
   Mobile Slider
--------------------------------------- */

.has-slider
.index-single__right {
    margin-top: 16px;
}


.index-slider {
    width: 100%;

    /*
     * JS에서 가장 긴 slide 높이로
     * 실제 값을 넣음
     */
    height: auto;

    cursor: grab;
}


.index-slider:active {
    cursor: grabbing;
}


.index-slider__slide {
    height: 100%;

    overflow: hidden;
}


.index-slider__image-frame {
    position: relative;

    width: 100%;
    height: auto;

    overflow: visible;
}


.index-slider__image-frame img,
.index-slider__image-frame.is-overflowing img {
    position: static;

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    transform: none;
}


/*
 * Caption is anchored to bottom
 * of the tallest white slide box.
 */

.index-slider__caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
}



/* ---------------------------------------
   Texts
--------------------------------------- */

.page-texts,
.page-text-item {
    padding-top: var(--header-height);
}


.texts-page {
    height: auto;

    min-height: 100vh;

    overflow: visible;
}


.texts-stage {
    position: static;

    display: block;

    height: auto;

    padding:0;
    pointer-events: auto;
}


/* default = Detail */

.texts-list {
    display: none;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
}


.texts-detail {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* List open */

body.texts-list-open .texts-list {
    display: block;
}


body.texts-list-open .texts-detail {
    display: none;
}


    /* Cards */

    .texts-card {
        padding: 24px;
    }


    .texts-card__title {
        padding-right: 0;

        font-size: 24px;
        line-height: 1.26;
    }


    .texts-card__overview {
        margin-top: 10px;

        padding-right: 0;

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


    .texts-card__status {
        position: static;
        margin-bottom: 16px;
        align-items: flex-start;
        display: flex;
        flex-direction: row;
    }
    
/* Detail */

.texts-detail {
    background: #fff;
}


.texts-article {
    padding:
        24px
        24px
        48px;
}


.texts-article__title {
    font-size: 24px;
    line-height: 1.16;
}


.texts-article__meta {
    margin-top: 10px;

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


.texts-article__body {
    margin-top: 16px;

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

.mobile-header__language {
    justify-self: end;
}

/* ---------------------------------------
   About
--------------------------------------- */

.about-page {
    padding:
        0
        var(--page-x);
}


.about-intro {
    font-size: 32px;
    line-height: 1.15;
}


.about-content {
    display: block;

    margin-top: 24px;

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


/* Contact */

.about-contact {
    width: 100%;
}


.about-contact__link {
    margin-top: 16px;
}


/* CV */

.about-cv {
    width: 100%;

    margin-top: 72px;
}


.about-cv__row {
    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    column-gap: var(--grid-gap);
}


.about-cv__section {
    grid-column: 1 / -1;
}


.about-cv__year {
    grid-column: 1 / span 2;

    margin-top: 16px;
}


.about-cv__text {
    grid-column: 3 / span 6;

    margin-top: 16px;
}


/*
 * section title이 없는 연속 row는
 * year / content만 이어짐
 */

/* 빈 필드 제거 */
.about-cv__section:empty,
.about-cv__year:empty {
    display: none;
}


.about-cv__row.has-section:not(:first-child) {
    padding-top: 48px;
}

.site-footer {
    height: 272px;
    padding:
        0
        var(--page-x)
        16px;

    justify-content: flex-start;
}

.about-cv__row:first-child {
    margin-top: 0;
}

.site-footer__text {
    text-align: left;
}

.section-about .site-footer__text {
    grid-column: 1 / -1;
    text-align: left;
}

.about-cv__row.no-year-column .about-cv__text {
    grid-column: 1 / -1;
}


/* ---------------------------------------
   Works Modal — Mobile
--------------------------------------- */

    .works-modal {
        display: block;
        background: #fff;
        z-index: 999999;
    }


    .works-modal__backdrop {
        display: none;
    }


    .works-modal__panel {
        width: 100%;
        max-width: none;

        height: 100dvh;
        max-height: none;

        padding: 24px;

        background: #fff;

        display: flex;
        flex-direction: column;
    }


    /* ---------------------------------------
       Navigation
    --------------------------------------- */

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


    .works-modal__mobile-nav {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        column-gap: 24px;
        align-items: start;

        flex: 0 0 auto;
    }


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


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

        background: none;
        color: inherit;

        font: inherit;

        cursor: pointer;
    }


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


    /* ---------------------------------------
       Content
    --------------------------------------- */

    .works-modal__content {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;

        display: flex;
        flex-direction: column;

        column-gap: 0;
    }


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

    .works-modal__media {
        flex: 0 0 auto;

        margin-top: 48px;

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


    /*
     * Landscape
     * 패널 좌우 24px 제외 전체폭
     */
    .works-modal__media.is-landscape {
        width: 100%;
    }


    .works-modal__media.is-landscape img {
        display: block;

        width: 100%;
        height: auto;
    }


    /*
     * Portrait
     * Mobile 8-column grid 중 6 columns
     * gutter 8px 기준
     */
    .works-modal__media.is-portrait {
        width: calc(
            ((100% - 56px) / 8) * 6
            + 40px
        );
    }


    .works-modal__media.is-portrait img {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: initial;
    }


    /* ---------------------------------------
       Text
    --------------------------------------- */

    .works-modal__info {
        width: 100%;
        min-width: 0;

        flex: 1 1 auto;

        display: flex;
        flex-direction: column;
    }


    .works-modal__text {
        margin-top: auto;

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


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


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


    .error-page {
        padding: 24px;
    }

    .error-page__text {
        font-size: 31px;
        line-height: 1.1;
    }





}