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

.index-single {
    width: 100%;

    padding:
        0
        var(--page-x);
}


.index-single__layout {
    width: 100%;

    align-items: start;
}


/* ---------------------------------------
   Left
--------------------------------------- */

.index-single__left {
    grid-column: 1 / span 5;

    position: sticky;

    top: var(--header-height);

    min-width: 0;

    transition:
        top 0.28s ease;
}


body.header-hidden
.index-single__left {
    top: 0;
}


.index-single__title {
    font-size: 32px;
    line-height: 1.20;
}

.index-single__title-ko {
    font-family: var(--font-schema), var(--font-ko), sans-serif;
    font-weight: 500;
    word-break: keep-all;
}

.index-single__title-en {
    font-family:
        var(--font-schema),
        sans-serif;
}


.index-single__title-en em {
    font-style: italic;
}


.index-single__single-image {
    width: 100%;

    margin-top: 10px;
}


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


/* ---------------------------------------
   Right
--------------------------------------- */

.index-single__right {
    grid-column: 7 / -1;

    min-width: 0;
}


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

.grid-9 {
    display: grid;

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

    column-gap: calc(var(--grid-gap) * 2);
}


.index-single__text {
    width: 100%;
    font-family: var(--font-hal), var(--font-ko), serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    word-break: keep-all;
}

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


.index-single__overview {
    grid-column: 1 / span 3;

    min-width: 0;
}


.index-single__body {
    grid-column: 4 / span 6;

    min-width: 0;
}


.index-single__overview p,
.index-single__body p {
    margin:
        0
        0
        1.3em;
}


.index-single__overview p:last-child,
.index-single__body p:last-child {
    margin-bottom: 0;
}


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

.index-slider {
    position: relative;

    width: 100%;
    height: 585px;
    overflow: hidden;
    background: #fff;
    box-shadow: -2px 2px 9px rgb(0 0 0 / 6%), 0px -8px 6px rgb(0 0 0 / 2%);
    cursor: pointer;
}


.index-slider__slide {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #fff;
}


.index-slider__image-frame {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.index-slider__image-frame img {
    position: absolute;

    top: 0;
    right: 0;

    width: auto;
    height: 100%;

    max-width: none;

    object-fit: contain;
}


/*
 * 이미지가 slider width보다 넓을 때만
 * 가운데 crop
 */

.index-slider__image-frame.is-overflowing img {
    right: auto;
    left: 50%;

    transform: translateX(-50%);
}


/* caption */

.index-slider__caption {
    position: absolute;

    z-index: 5;

    left: 16px;
    right: 16px;
    bottom: 16px;

    display: flex;
    align-items: flex-start;

    font-family:
        var(--font-schema),
        var(--font-ko),
        sans-serif;

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

    color: #34C759;

    pointer-events: none;
}


.index-slider__number {
    flex: 0 0 20px;

    width: 20px;

    text-align: left;
}


.index-slider__caption-text {
    flex: 1;

    min-width: 0;
}

.index-single__body-ko {
    word-break: keep-all;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    font-family:
        var(--font-ko),
        var(--font-hal),
        sans-serif;
}

.index-single__body-en {
    margin-top: 48px;
    font-family:
        var(--font-hal),
        var(--font-ko),
        sans-serif;
}