@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Serif+KR:wght@300;400;500&display=swap');


:root {

    --bg: #050505;

    --panel: #080808;

    --panel-soft: #0d0d0d;

    --line: #272727;

    --line-light: #343434;

    --text: #c7c7c7;

    --text-soft: #777;

    --white: #e7e7e7;

    --red: #9d1118;

    --red-light: #9d1118;

    --sidebar-width: 240px;

}


* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

}


body {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 60% 10%,
            rgba(120, 0, 0, 0.06),
            transparent 30%
        ),

        #050505;

    color: var(--text);

    font-family:
        "Noto Serif KR",
        serif;

    font-size: 14px;

    letter-spacing: 0.02em;

}


/* 전체 */

.site {

    width:
        min(
            1400px,
            calc(100% - 40px)
        );

    margin:
        20px auto;

    display:
        grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    border:
        1px solid var(--line);

    background:
        rgba(5, 5, 5, 0.96);

}


/* 사이드바 */

.sidebar {

    border-right:
        1px solid var(--line);

}


.logo {

    min-height:
        220px;

    padding:
        45px 25px 30px;

    border-bottom:
        1px solid var(--line);

    text-align:
        center;

}


.logo a {

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        0.18em;

}


.logo a span {

    display:
        block;

    color:
        var(--red-light);

    font-size:
        18px;

    line-height:
        1.6;

}


.logo-mark {

    margin:
        25px 0 20px;

    color:
        var(--red);

    font-size:
        18px;

}


.logo p {

    margin: 0;

    color:
        var(--text-soft);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        14px;

    line-height:
        1.6;

    letter-spacing:
        0.1em;

}


/* 메뉴 */

.main-nav a {

    min-height:
        58px;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    border-bottom:
        1px solid var(--line);

    color:
        #999;

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        16px;

    letter-spacing:
        0.08em;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}


.main-nav a:hover,
.main-nav a.active {

    color:
        var(--red-light);

    background:

        linear-gradient(
            90deg,
            rgba(120, 0, 0, 0.08),
            transparent
        );

}


.nav-number {

    width:
        28px;

    color:
        #666;

    font-size:
        13px;

}


/* 사이트 인포 */

.site-info {

    padding:
        30px 25px 40px;

}


.site-info h3,
.section-head h2 {

    margin: 0;

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        15px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

}


.site-info dl {

    margin-top:
        22px;

}


.site-info dl > div {

    margin-bottom:
        10px;

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    color:
        #777;

}


.site-info dt {

    font-family:
        "Cormorant Garamond",
        serif;

}


.site-info dd {

    margin:
        0;

    word-break:
        break-word;

}


.admin-link {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        #555;

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        0.1em;

}


.admin-link:hover {

    color:
        var(--red-light);

}


/* 메인 */

.content {

    min-width:
        0;

}


/* 히어로 */

.hero {

    border-bottom:
        1px solid var(--line);

}


.hero-small {

    height:
        45px;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid var(--line);

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        13px;

}


.hero-content {

    min-height:
        390px;

    padding:
        70px 80px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.hero-symbol {

    margin:
        0 0 18px;

    color:
        var(--red);

    font-size:
        16px;

}


.hero h1 {

    margin:
        0;

    max-width:
        900px;

    color:
        var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            38px,
            5vw,
            70px
        );

    font-weight:
        400;

    line-height:
        1.1;

    letter-spacing:
        0.12em;

    word-break:
        break-word;

}


.hero-line {

    width:
        40px;

    height:
        1px;

    margin:
        22px 0;

    background:
        var(--red);

}


.hero-subtitle {

    margin:
        0;

    color:
        #777;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        0.15em;

}


.hero-description {

    margin:
        30px 0 0;

    color:
        #888;

    line-height:
        2;

}


/* 섹션 */

.section {

    padding:
        35px 35px 45px;

}


.section-head {

    margin-bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.section-head a {

    color:
        #666;

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        serif;

}


.section-head a:hover {

    color:
        var(--red-light);

}


/* 업데이트 */

.update-grid {

    display:
        grid;

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

    gap:
        18px;

}


.update-card {

    border:
        1px solid var(--line);

    background:
        var(--panel);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;

}


.update-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--red);

}


.update-image {

    aspect-ratio:
        4 / 3;

    border-bottom:
        1px solid var(--line);

    overflow:
        hidden;

}


.update-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    filter:
        grayscale(35%)
        brightness(0.65)
        contrast(1.05);

}


.empty-image {

    display:
        grid;

    place-items:
        center;

    background:

        linear-gradient(
            135deg,
            #0d0d0d,
            #080808
        );

    color:
        #383838;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        0.15em;

}


.update-text {

    padding:
        18px 20px 20px;

}


.category {

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        12px;

    letter-spacing:
        0.12em;

}


.update-text h3 {

    margin:
        10px 0 8px;

    color:
        #aaa;

    font-size:
        14px;

    font-weight:
        400;

}


.update-text time {

    color:
        #555;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        12px;

}


/* 하단 */

.bottom-grid {

    padding:
        0 35px 45px;

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr;

    gap:
        18px;

}


.simple-box {

    min-height:
        170px;

    padding:
        25px;

    border:
        1px solid var(--line);

    background:
        var(--panel);

}


.notice-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.notice-list li {

    padding:
        8px 0;

    color:
        #888;

    border-bottom:
        1px dotted #222;

}


.notice-list li span {

    margin-right:
        14px;

    color:
        #555;

    font-family:
        "Cormorant Garamond",
        serif;

}


.memo {

    margin:
        0;

    color:
        #888;

    line-height:
        2;

}


/* 푸터 */

.footer {

    width:
        min(
            1400px,
            calc(100% - 40px)
        );

    margin:
        -1px auto 30px;

    padding:
        18px 22px;

    display:
        flex;

    justify-content:
        space-between;

    border:
        1px solid var(--line);

    color:
        #555;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        0.08em;

}


/* 모바일 */

@media (max-width: 900px) {


    .site {

        width:
            calc(100% - 20px);

        grid-template-columns:
            1fr;

    }


    .sidebar {

        border-right:
            0;

        border-bottom:
            1px solid var(--line);

    }


    .logo {

        min-height:
            auto;

        padding:
            25px;

    }


    .logo-mark,
    .logo p,
    .site-info {

        display:
            none;

    }


    .main-nav {

        display:
            grid;

        grid-template-columns:
            repeat(3, 1fr);

    }


    .main-nav a {

        min-height:
            50px;

        padding:
            10px;

        justify-content:
            center;

        border-right:
            1px solid var(--line);

        font-size:
            13px;

    }


    .nav-number {

        display:
            none;

    }


    .hero-content {

        min-height:
            320px;

        padding:
            50px 30px;

    }


    .hero h1 {

        font-size:
            38px;

    }


    .update-grid {

        grid-template-columns:
            1fr;

    }


    .bottom-grid {

        grid-template-columns:
            1fr;

    }


    .footer {

        width:
            calc(100% - 20px);

        flex-direction:
            column;

        gap:
            5px;

    }

}
/* ========================================
   CHARACTER
======================================== */

.character-page {

    padding:
        55px 45px 70px;

}


.character-page-head {

    margin-bottom:
        45px;

}


.page-small {

    margin:
        0 0 8px;

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        13px;

}


.character-page-head h1 {

    margin:
        0;

    color:
        var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        42px;

    font-weight:
        400;

    letter-spacing:
        .12em;

}


.character-page-head > p:last-child {

    margin-top:
        15px;

    color:
        #666;

    line-height:
        1.8;

}


.character-grid {

    display:
        grid;

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

    gap:
        22px;

}


.character-card {

    display:
        block;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color:
        inherit;

    text-decoration:
        none;

    overflow:
        hidden;

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.character-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--red);

}


.character-card-image {

    position:
        relative;

    aspect-ratio:
        3 / 4;

    border-bottom:
        1px solid var(--line);

    background:
        #0c0c0c;

    overflow:
        hidden;

}


.character-card-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .35s ease,
        filter .35s ease;

}


.character-card:hover
.character-card-image img {

    transform:
        scale(1.025);

}


.character-card-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        grid;

    place-items:
        center;

    color:
        #323232;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        .15em;

}


.character-card-info {

    min-height:
        150px;

    padding:
        21px 20px;

}


.character-number {

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        11px;

    letter-spacing:
        .12em;

}


.character-card-info h2 {

    margin:
        11px 0 4px;

    color:
        #bbb;

    font-size:
        19px;

    font-weight:
        400;

}


.character-english {

    margin:
        0;

    color:
        #555;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        13px;

    letter-spacing:
        .08em;

}


.character-subtitle {

    margin:
        15px 0 0;

    color:
        #777;

    font-size:
        12px;

    line-height:
        1.7;

}


.character-empty {

    grid-column:
        1 / -1;

    padding:
        80px 20px;

    border:
        1px solid var(--line);

    color:
        #555;

    text-align:
        center;

}


/* ========================================
   CHARACTER VIEW
======================================== */


.character-view {

    padding:
        55px 55px 70px;

}


.character-view-top {

    display:
        grid;

    grid-template-columns:
        minmax(240px, 370px)
        minmax(0, 1fr);

    gap:
        55px;

    align-items:
        center;

}


.character-view-image {

    aspect-ratio:
        3 / 4;

    border:
        1px solid var(--line);

    background:
        #0c0c0c;

    overflow:
        hidden;

}


.character-view-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

}


.character-view-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        grid;

    place-items:
        center;

    color:
        #333;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        .2em;

}


.character-view-label {

    margin:
        0 0 13px;

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        12px;

    letter-spacing:
        .15em;

}


.character-view-info h1 {

    margin:
        0;

    color:
        var(--white);

    font-family:
        "Cormorant Garamond",
        "Noto Serif KR",
        serif;

    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    font-weight:
        400;

    line-height:
        1.2;

}


.character-view-english {

    margin:
        8px 0 0;

    color:
        #555;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        17px;

    letter-spacing:
        .12em;

}


.character-view-line {

    width:
        45px;

    height:
        1px;

    margin:
        28px 0;

    background:
        var(--red);

}


.character-view-subtitle {

    margin:
        0;

    max-width:
        600px;

    color:
        #888;

    line-height:
        2;

}


.character-tags {

    margin-top:
        25px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.character-tags span {

    padding:
        6px 10px;

    border:
        1px solid #292929;

    color:
        #666;

    font-size:
        11px;

}


.character-view-body {

    margin-top:
        60px;

    padding-top:
        35px;

    border-top:
        1px solid var(--line);

}


.character-section-title {

    margin-bottom:
        25px;

}


.character-section-title span {

    color:
        var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        14px;

    letter-spacing:
        .15em;

}


.character-description {

    max-width:
        900px;

    color:
        #888;

    line-height:
        2.1;

    word-break:
        keep-all;

}


.empty-text {

    color:
        #4d4d4d;

}


.character-view-bottom {

    margin-top:
        50px;

    padding-top:
        25px;

    border-top:
        1px solid var(--line);

}


.character-view-bottom a {

    color:
        #666;

    text-decoration:
        none;

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing:
        .08em;

}


.character-view-bottom a:hover {

    color:
        var(--red-light);

}


@media (max-width: 1000px) {

    .character-grid {

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

    }

}


@media (max-width: 700px) {

    .character-page {

        padding:
            40px 20px 55px;

    }


    .character-grid {

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

        gap:
            12px;

    }


    .character-card-info {

        min-height:
            130px;

        padding:
            15px;

    }


    .character-card-info h2 {

        font-size:
            16px;

    }


    .character-view {

        padding:
            35px 20px 55px;

    }


    .character-view-top {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .character-view-image {

        width:
            min(
                100%,
                420px
            );

        margin:
            auto;

    }


    .character-view-info h1 {

        font-size:
            40px;

    }

}
/* ========================================
   CHARACTER PROFILE EXTENSION
======================================== */

.character-view-label,
.character-section-title span {

    color:
        var(
            --character-color,
            var(--red-light)
        );

}


.character-view-line {

    background:
        var(
            --character-color,
            var(--red)
        );

}


.character-tags span {

    transition:
        border-color .2s ease,
        color .2s ease;

}


.character-tags span:hover {

    border-color:
        var(
            --character-color,
            var(--red)
        );

    color:
        var(
            --character-color,
            var(--red-light)
        );

}


.character-profile-area {

    margin-top:
        60px;

    padding-top:
        35px;

    border-top:
        1px solid var(--line);

}


.character-profile-grid {

    display:
        grid;

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

    border-top:
        1px solid var(--line);

    border-left:
        1px solid var(--line);

}


.character-profile-item {

    min-height:
        105px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        15px;

    border-right:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    background:
        var(--panel);

}


.profile-label {

    color:
        var(
            --character-color,
            var(--red-light)
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        11px;

    letter-spacing:
        .14em;

}


.character-profile-item strong {

    color:
        #aaa;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.6;

    word-break:
        keep-all;

}


.character-view-bottom a:hover {

    color:
        var(
            --character-color,
            var(--red-light)
        );

}


@media (
    max-width: 850px
) {

    .character-profile-grid {

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

    }

}


@media (
    max-width: 500px
) {

    .character-profile-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .character-profile-item {

        min-height:
            90px;

        padding:
            17px;

    }

}
/* ========================================
   CUSTOM CHARACTER PROFILE
======================================== */

.character-profile-item.custom {

    position: relative;

}


.character-profile-item.custom::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background:
        var(
            --character-color,
            var(--red)
        );

    transition:
        width .25s ease;

}


.character-profile-item.custom:hover::after {

    width: 100%;

}


.character-profile-item.custom
.profile-label {

    color:
        var(
            --character-color,
            var(--red-light)
        );

}


.character-profile-item.custom
strong {

    white-space: normal;

    word-break: keep-all;

}
/* ========================================
   CHARACTER TABS
======================================== */

.character-tabs {

    margin-top: 65px;

    display: flex;

    flex-wrap: wrap;

    border-bottom:
        1px solid var(--line);

}


.character-tab {

    position: relative;

    padding:
        15px 18px;

    border: 0;

    border-right:
        1px solid var(--line);

    background:
        transparent;

    color:
        #555;

    cursor:
        pointer;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        12px;

    letter-spacing:
        .12em;

    transition:
        color .2s ease,
        background .2s ease;

}


.character-tab:first-child {

    border-left:
        1px solid var(--line);

}


.character-tab:hover {

    color:
        #999;

}


.character-tab.active {

    color:
        var(
            --character-color,
            var(--red-light)
        );

    background:
        var(--panel);

}


.character-tab.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 2px;

    background:
        var(
            --character-color,
            var(--red)
        );

}


.character-tab-panel {

    display: none;

    min-height: 300px;

    padding-top: 40px;

}


.character-tab-panel.active {

    display: block;

    animation:
        characterTabFade
        .22s ease;

}


@keyframes characterTabFade {

    from {

        opacity: 0;

        transform:
            translateY(4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.character-tab-text {

    max-width: 900px;

    padding:
        27px 30px;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color:
        #888;

    font-size:
        14px;

    line-height:
        2.1;

    white-space:
        normal;

    word-break:
        keep-all;

}


#tab-profile
.character-profile-grid {

    margin-bottom:
        45px;

}


#tab-profile
.character-view-body {

    margin-top: 0;

}


@media (
    max-width: 650px
) {

    .character-tabs {

        display: grid;

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

    }


    .character-tab {

        padding:
            13px 5px;

        font-size:
            9px;

        letter-spacing:
            .04em;

    }


    .character-tab-text {

        padding:
            20px;

    }

}
/* ========================================
   GALLERY
======================================== */

.gallery-page {

    width: 100%;

}

.gallery-page-head {

    margin-bottom: 45px;

    padding-bottom: 25px;

    border-bottom:
        1px solid var(--line);

}

.gallery-page-head p {

    margin: 0 0 8px;

    color: var(--red);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .18em;

}

.gallery-page-head h1 {

    margin: 0;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;

    font-weight: 400;

}

.gallery-page-head span {

    display: block;

    margin-top: 10px;

    color: var(--text-soft);

    font-size: 12px;

}

.gallery-grid {

    column-count: 3;

    column-gap: 16px;

}

.gallery-card {

    margin-bottom: 16px;

    display: inline-block;

    width: 100%;

    overflow: hidden;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color: inherit;

    text-decoration: none;

    break-inside: avoid;

    transition:
        border-color .2s ease,
        transform .2s ease;

}

.gallery-card:hover {

    border-color: var(--red);

    transform:
        translateY(-2px);

}

.gallery-card-image {

    overflow: hidden;

    background: #0b0b0b;

}

.gallery-card-image img {

    width: 100%;

    height: auto;

    display: block;

    transition:
        transform .35s ease;

}

.gallery-card:hover
.gallery-card-image img {

    transform:
        scale(1.015);

}

.gallery-card-info {

    padding: 16px;

}

.gallery-card-info h2 {

    margin: 0 0 7px;

    color: #aaa;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    font-weight: 400;

}

.gallery-card-info p {

    margin: 0 0 8px;

    color: var(--red-light);

    font-size: 11px;

}

.gallery-card-info time {

    color: #444;

    font-size: 10px;

}

.gallery-empty {

    padding: 70px 20px;

    border:
        1px solid var(--line);

    color: #555;

    text-align: center;

}


/* VIEW */

.gallery-view {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .5fr);

    gap: 45px;

    align-items: start;

}

.gallery-view-image {

    min-width: 0;

    text-align: center;

}

.gallery-view-image img {

    max-width: 100%;

    max-height: 85vh;

    border:
        1px solid var(--line);

    object-fit: contain;

}

.gallery-view-info {

    position: sticky;

    top: 40px;

}

.gallery-view-label {

    color: var(--red);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .16em;

}

.gallery-view-info h1 {

    margin: 8px 0 10px;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 34px;

    font-weight: 400;

}

.gallery-view-info time {

    color: #555;

    font-size: 11px;

}

.gallery-view-characters {

    margin-top: 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}

.gallery-view-characters a {

    padding: 7px 10px;

    border:
        1px solid var(--line);

    color: #777;

    text-decoration: none;

    font-size: 11px;

}

.gallery-view-characters a:hover {

    border-color: var(--red);

    color: var(--red-light);

}

.gallery-view-description {

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid var(--line);

    color: #888;

    font-size: 13px;

    line-height: 2;

    word-break: keep-all;

}

.gallery-back {

    margin-top: 35px;

    display: inline-block;

    color: #555;

    text-decoration: none;

    font-size: 11px;

}


/* CHARACTER GALLERY */

.character-gallery-grid {

    display: grid;

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

    gap: 13px;

}

.character-gallery-card {

    overflow: hidden;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color: inherit;

    text-decoration: none;

}

.character-gallery-card:hover {

    border-color:
        var(
            --character-color,
            var(--red)
        );

}

.character-gallery-card img {

    width: 100%;

    aspect-ratio: 1 / 1;

    display: block;

    object-fit: cover;

}

.character-gallery-card > div {

    padding: 12px;

}

.character-gallery-card strong {

    display: block;

    margin-bottom: 5px;

    color: #999;

    font-size: 12px;

    font-weight: 400;

}

.character-gallery-card time {

    color: #444;

    font-size: 9px;

}


@media (
    max-width: 1000px
) {

    .gallery-grid {

        column-count: 2;

    }

}


@media (
    max-width: 750px
) {

    .gallery-view {

        grid-template-columns: 1fr;

    }

    .gallery-view-info {

        position: static;

    }

    .character-gallery-grid {

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

    }

}


@media (
    max-width: 520px
) {

    .gallery-grid {

        column-count: 1;

    }

}

/* ========================================
   GALLERY SPACING FIX
======================================== */

.gallery-page {
    padding:
        40px
        42px
        70px;
}


/* 상단 제목 영역 */

.gallery-page-head {
    margin-bottom: 45px;
    padding-bottom: 28px;
}


/* 갤러리 목록 */

.gallery-grid {
    column-gap: 24px;
}


/* 카드 사이 세로 간격 */

.gallery-card {
    margin-bottom: 24px;
}


/* 카드 내부 */

.gallery-card-info {
    padding:
        18px
        20px
        20px;
}


/* 카드 제목 */

.gallery-card-info h2 {
    margin-bottom: 9px;
}


/* 빈 갤러리 */

.gallery-empty {
    margin-top: 20px;
}


/* ========================================
   CHARACTER GALLERY TAB
======================================== */

.character-gallery-grid {
    gap: 20px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 750px) {

    .gallery-page {
        padding:
            28px
            24px
            55px;
    }

    .gallery-page-head {
        margin-bottom: 32px;
    }

}


@media (max-width: 520px) {

    .gallery-page {
        padding:
            22px
            18px
            45px;
    }

    .gallery-grid {
        column-gap: 16px;
    }

    .gallery-card {
        margin-bottom: 16px;
    }

}
/* ========================================
   LOG
======================================== */

.log-page {

    padding:
        40px
        42px
        70px;

}


.log-page-head {

    margin-bottom: 45px;

    padding-bottom: 28px;

    border-bottom:
        1px solid var(--line);

}


.log-page-head p {

    margin: 0 0 8px;

    color: var(--red);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .18em;

}


.log-page-head h1 {

    margin: 0;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;

    font-weight: 400;

}


.log-page-head span {

    display: block;

    margin-top: 10px;

    color: var(--text-soft);

    font-size: 12px;

}


.log-list {

    border-top:
        1px solid var(--line);

}


.log-card {

    min-height: 105px;

    padding:
        22px
        18px;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid var(--line);

    color: inherit;

    text-decoration: none;

    transition:
        background .2s ease;

}


.log-card:hover {

    background:
        var(--panel);

}


.log-card-number {

    color: #333;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

}


.log-card-category {

    margin-bottom: 6px;

    color: var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 10px;

    letter-spacing: .14em;

}


.log-card h2 {

    margin: 0;

    color: #aaa;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    font-weight: 400;

}


.log-card p {

    margin:
        7px
        0
        0;

    color: #555;

    font-size: 11px;

}


.log-card time {

    color: #444;

    font-size: 10px;

}


.log-empty {

    padding:
        70px
        20px;

    border:
        1px solid var(--line);

    color: #555;

    text-align: center;

}


/* LOG VIEW */

.log-view {

    width:
        min(
            850px,
            100%
        );

    margin: 0 auto;

    padding:
        45px
        42px
        70px;

}


.log-view-head {

    margin-bottom: 45px;

    padding-bottom: 30px;

    border-bottom:
        1px solid var(--line);

}


.log-view-head > p {

    margin: 0 0 10px;

    color: var(--red-light);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .16em;

}


.log-view-head h1 {

    margin:
        0
        0
        12px;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 38px;

    font-weight: 400;

}


.log-view-head time {

    color: #444;

    font-size: 10px;

}


.log-view-characters {

    margin-top: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.log-view-characters a {

    padding:
        7px
        10px;

    border:
        1px solid var(--line);

    color: #777;

    text-decoration: none;

    font-size: 11px;

}


.log-view-characters a:hover {

    border-color:
        var(--red);

    color:
        var(--red-light);

}


.log-view-content {

    min-height: 250px;

    color: #999;

    font-size: 14px;

    line-height: 2.15;

    word-break: keep-all;

}


.log-view-bottom {

    margin-top: 60px;

    padding-top: 25px;

    border-top:
        1px solid var(--line);

}


.log-view-bottom a {

    color: #555;

    text-decoration: none;

    font-size: 11px;

}


/* CHARACTER LOG */

.character-log-list {

    border-top:
        1px solid var(--line);

}


.character-log-card {

    padding:
        18px
        15px;

    display: grid;

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

    gap: 20px;

    border-bottom:
        1px solid var(--line);

    color: inherit;

    text-decoration: none;

}


.character-log-card:hover {

    background:
        var(--panel);

}


.character-log-card span {

    display: block;

    margin-bottom: 5px;

    color:
        var(
            --character-color,
            var(--red-light)
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 10px;

    letter-spacing: .12em;

}


.character-log-card strong {

    color: #999;

    font-size: 13px;

    font-weight: 400;

}


.character-log-card time {

    align-self: center;

    color: #444;

    font-size: 9px;

}


@media (max-width: 650px) {

    .log-page {

        padding:
            28px
            24px
            55px;

    }


    .log-card {

        grid-template-columns:
            35px
            minmax(0, 1fr);

    }


    .log-card time {

        grid-column: 2;

    }


    .log-view {

        padding:
            30px
            24px
            55px;

    }

}
/* ========================================
   PAIR
======================================== */

.pair-page {

    padding:
        40px
        42px
        70px;

}


.pair-page-head {

    margin-bottom: 45px;
    padding-bottom: 28px;

    border-bottom:
        1px solid var(--line);

}


.pair-page-head p {

    margin: 0 0 8px;

    color: var(--red);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .18em;

}


.pair-page-head h1 {

    margin: 0;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;
    font-weight: 400;

}


.pair-page-head span {

    display: block;

    margin-top: 10px;

    color: var(--text-soft);

    font-size: 12px;

}


/* LIST */

.pair-grid {

    display: grid;

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

    gap: 22px;

}


.pair-card {

    overflow: hidden;

    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr);

    min-height: 180px;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color: inherit;

    text-decoration: none;

    transition:
        border-color .2s ease,
        transform .2s ease;

}


.pair-card:hover {

    border-color:
        var(--pair-color);

    transform:
        translateY(-2px);

}


.pair-card-visual {

    min-height: 180px;

    overflow: hidden;

    background: #0b0b0b;

}


.pair-main-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.pair-character-images {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        1fr
        22px
        1fr;

    align-items: center;

}


.pair-character-images > div {

    height: 100%;

    overflow: hidden;

    display: grid;
    place-items: center;

}


.pair-character-images img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.pair-character-images span {

    color: #333;

    font-family:
        "Cormorant Garamond",
        serif;

}


.pair-character-images b {

    color:
        var(--pair-color);

    text-align: center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-weight: 400;

}


.pair-card-info {

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.pair-card-label {

    margin-bottom: 7px;

    color:
        var(--pair-color);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 10px;

    letter-spacing: .16em;

}


.pair-card h2 {

    margin: 0 0 10px;

    color: #aaa;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 23px;
    font-weight: 400;

}


.pair-card-members {

    margin: 0;

    color: #666;

    font-size: 11px;

}


.pair-card-subtitle {

    margin:
        15px
        0
        0;

    color: #555;

    font-size: 11px;

    line-height: 1.7;

}


.pair-empty {

    padding:
        70px
        20px;

    border:
        1px solid var(--line);

    color: #555;

    text-align: center;

}


/* ========================================
   PAIR VIEW
======================================== */

.pair-view {

    width:
        min(
            950px,
            100%
        );

    margin: 0 auto;

    padding:
        40px
        42px
        70px;

}


.pair-view-head {

    margin-bottom: 40px;

    padding-bottom: 28px;

    border-bottom:
        1px solid var(--line);

    text-align: center;

}


.pair-view-head p {

    margin: 0 0 10px;

    color:
        var(--pair-color);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 10px;

    letter-spacing: .18em;

}


.pair-view-head h1 {

    margin:
        0
        0
        10px;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;
    font-weight: 400;

}


.pair-view-head > span {

    color: #666;

    font-size: 12px;

}


.pair-view-main-image {

    margin-bottom: 35px;

    text-align: center;

}


.pair-view-main-image img {

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

    object-fit: contain;

    border:
        1px solid var(--line);

}


.pair-members {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        70px
        minmax(0, 1fr);

    align-items: center;

    margin-bottom: 55px;

}


.pair-member {

    color: inherit;

    text-align: center;

    text-decoration: none;

}


.pair-member-image {

    width: 180px;
    height: 180px;

    margin:
        0 auto
        20px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        1px solid var(--line);

    background: var(--panel);

    transition:
        border-color .2s ease;

}


.pair-member:hover
.pair-member-image {

    border-color:
        var(--pair-color);

}


.pair-member-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.pair-member-image span {

    color: #333;

    font-size: 9px;

}


.pair-member > p {

    margin: 0 0 6px;

    color:
        var(--pair-color);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 9px;

    letter-spacing: .14em;

}


.pair-member h2 {

    margin: 0 0 5px;

    color: #aaa;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;
    font-weight: 400;

}


.pair-member > span {

    color: #555;

    font-size: 10px;

}


.pair-cross {

    text-align: center;

}


.pair-cross span {

    color:
        var(--pair-color);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 30px;

}


.pair-view-description {

    padding-top: 35px;

    border-top:
        1px solid var(--line);

}


.pair-section-title {

    margin-bottom: 18px;

    color:
        var(--pair-color);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 11px;

    letter-spacing: .16em;

}


.pair-description-text {

    padding: 28px;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color: #888;

    font-size: 14px;

    line-height: 2.1;

    word-break: keep-all;

}


.pair-view-bottom {

    margin-top: 45px;

}


.pair-view-bottom a {

    color: #555;

    text-decoration: none;

    font-size: 11px;

}


/* CHARACTER RELATIONSHIP */

.character-pair-list {

    display: grid;

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

    gap: 12px;

}


.character-pair-card {

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 15px;

    border:
        1px solid var(--line);

    background:
        var(--panel);

    color: inherit;

    text-decoration: none;

    transition:
        border-color .2s ease;

}


.character-pair-card:hover {

    border-color:
        var(
            --character-color,
            var(--red)
        );

}


.character-pair-thumb {

    width: 60px;
    height: 60px;

    flex:
        0 0 60px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        1px solid var(--line);

    background: #0b0b0b;

}


.character-pair-thumb img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.character-pair-thumb span {

    color: #333;

    font-size: 8px;

}


.character-pair-info span {

    display: block;

    margin-bottom: 5px;

    color:
        var(
            --character-color,
            var(--red-light)
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 9px;

    letter-spacing: .12em;

}


.character-pair-info strong {

    display: block;

    margin-bottom: 5px;

    color: #999;

    font-size: 13px;

    font-weight: 400;

}


.character-pair-info small {

    color: #555;

    font-size: 10px;

}


@media (max-width: 900px) {

    .pair-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 650px) {

    .pair-page,
    .pair-view {

        padding:
            28px
            24px
            55px;

    }


    .pair-card {

        grid-template-columns:
            120px
            minmax(0, 1fr);

    }


    .pair-members {

        grid-template-columns:
            1fr
            35px
            1fr;

    }


    .pair-member-image {

        width: 110px;
        height: 110px;

    }


    .character-pair-list {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 430px) {

    .pair-card {

        grid-template-columns: 1fr;

    }


    .pair-card-visual {

        height: 200px;

    }


    .pair-members {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .pair-cross {

        transform:
            rotate(90deg);

    }

}
/* ========================================
   CUSTOM SITE THEME
======================================== */

html,
body {
    background: var(--bg);
    color: var(--text);
}

.site,
.content {
    background: var(--bg);
}

.sidebar {
    background: var(--panel);
    border-color: var(--line);
}

.hero,
.simple-box,
.update-card,
.character-profile-item,
.character-tab-text,
.character-gallery-card,
.character-log-card,
.character-pair-card,
.gallery-card,
.log-card,
.pair-card,
.pair-description-text {
    background: var(--panel);
    border-color: var(--line);
}

.main-nav a,
.site-info,
.section-head,
.gallery-page-head,
.log-page-head,
.pair-page-head,
.character-tabs,
.character-view-body,
.character-view-bottom,
.gallery-view-description,
.log-view-bottom,
.pair-view-description {
    border-color: var(--line);
}

body,
p,
dd,
.character-description,
.character-tab-text,
.gallery-view-description,
.log-view-content,
.pair-description-text {
    color: var(--text);
}

h1,
h2,
h3,
strong,
.logo a,
.main-nav a.active {
    color: var(--text);
}