/* ===========================
   캐릭터 시트 변수
=========================== */
:root {
    --character-fullbody-width: 600px;
    --character-panel-width: 450px;
    --character-portrait-width: 150px;

    --character-gap: 30px;

    --character-border-color: #dddddd;
    --character-light-border-color: #eeeeee;
    --character-background: #ffffff;
    --character-muted-background: #f7f7f7;

    --character-text-color:
        var(--color-text, #333333);

    --character-muted-color:
        var(--color-muted, #777777);

    --character-accent-color:
        var(--color-accent, #d28a2e);
}

/* ===========================
   캐릭터 게시글 본문
=========================== */
body.is-character-post
.post-body {
    width: 100%;

    overflow: visible;
}

body.is-character-post
.post-tags,

body.is-character-post
.post-comments {
    max-width: 900px;

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

/* ===========================
   캐릭터 시트 전체 구조
=========================== */
.character-sheet {
    width: 100%;
    max-width:
        calc(
            var(--character-fullbody-width) +
            var(--character-panel-width) +
            var(--character-gap)
        );

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

    gap:
        var(--character-gap);

    margin: 0 auto;
}

/* ===========================
   전신 이미지
=========================== */
.character-fullbody {
    flex:
        1 1
        var(--character-fullbody-width);

    width: 100%;
    max-width:
        var(--character-fullbody-width);

    min-width: 0;

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

.character-fullbody:empty {
    display: none;
}

.character-fullbody img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 1200px;
    height: auto;

    margin: 0 auto;

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

/* ===========================
   캐릭터 정보 패널
=========================== */
.character-panel {
    flex:
        0 0
        var(--character-panel-width);

    width:
        var(--character-panel-width);

    max-width:
        var(--character-panel-width);

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--character-border-color);

    background:
        var(--character-background);
}

/* ===========================
   증명 이미지와 프로필
=========================== */
.character-profile-top {
    display: grid;

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

    align-items: stretch;

    width: 100%;
    min-height: 200px;
}

.character-portrait {
    width:
        var(--character-portrait-width);

    min-width:
        var(--character-portrait-width);

    aspect-ratio: 188 / 250;

    overflow: hidden;

    border-right:
        1px solid
        var(--character-border-color);

    background:
        var(--character-muted-background);
}

.character-portrait:empty {
    min-height: 200px;
}

.character-portrait img {
    display: block;

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

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

.character-profile {
    min-width: 0;

    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.character-profile h2 {
    margin: 0 0 14px;

    color:
        var(--character-text-color);

    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.character-profile dl {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin: 0;
}

.character-profile dl div {
    display: grid;

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

    align-items: start;

    gap: 8px;

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

.character-profile dt {
    color:
        var(--character-muted-color);

    font-weight: 500;
}

.character-profile dd {
    min-width: 0;

    margin: 0;

    color:
        var(--character-text-color);

    overflow-wrap: anywhere;
}

/* ===========================
   정보 섹션
=========================== */
.character-info-section {
    padding: 18px;

    border-top:
        1px solid
        var(--character-border-color);
}

.character-info-section h3 {
    margin: 0 0 10px;

    color:
        var(--character-text-color);

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

.character-info-section p {
    margin: 0;

    color:
        var(--character-text-color);

    font-size: 14px;
    line-height: 1.75;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===========================
   서식 보존 본문
=========================== */
.character-rich-text {
    min-width: 0;

    color:
        var(--character-text-color);

    font-size: 14px;
    line-height: 1.75;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.character-rich-text
> :first-child {
    margin-top: 0;
}

.character-rich-text
> :last-child {
    margin-bottom: 0;
}

.character-rich-text p,
.character-rich-text div,
.character-rich-text blockquote,
.character-rich-text figure,
.character-rich-text ul,
.character-rich-text ol,
.character-rich-text table {
    margin-top: 0;
    margin-bottom: 12px;
}

.character-rich-text p {
    white-space: pre-wrap;
}

.character-rich-text ul,
.character-rich-text ol {
    padding-left: 22px;
}

.character-rich-text ul {
    list-style: disc;
}

.character-rich-text ol {
    list-style: decimal;
}

.character-rich-text blockquote {
    padding:
        10px 14px;

    border-left:
        3px solid
        var(--character-border-color);

    background:
        var(--character-muted-background);
}

.character-rich-text img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        12px auto;
}

.character-rich-text iframe,
.character-rich-text video,
.character-rich-text audio {
    max-width: 100%;
}

.character-rich-text iframe,
.character-rich-text video {
    width: 100%;
}

.character-rich-text table {
    width: 100%;
    max-width: 100%;

    border-collapse: collapse;

    overflow-wrap: anywhere;
}

.character-rich-text th,
.character-rich-text td {
    padding: 7px 8px;

    border:
        1px solid
        var(--character-border-color);

    text-align: left;
    vertical-align: top;
}

.character-rich-text hr {
    margin: 16px 0;

    border: 0;
    border-top:
        1px solid
        var(--character-border-color);
}

.character-rich-text a {
    color:
        var(--character-accent-color);

    text-decoration: underline;

    text-underline-offset: 2px;
}

/* ===========================
   관계
=========================== */
.character-relation-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

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

.character-relation-item {
    width: 100%;
    min-width: 0;

    color:
        var(--character-text-color);

    font-size: 14px;
    line-height: 1.65;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
}

.character-relation-item strong {
    font-weight: 700;
}

.character-relation-link {
    color:
        var(--character-accent-color);

    text-decoration: none;
}

.character-relation-link:hover,
.character-relation-link:focus-visible {
    text-decoration: underline;

    text-underline-offset: 2px;
}

/* ===========================
   태블릿
=========================== */
@media (max-width: 1180px) {
    .character-sheet {
        gap: 24px;
    }

    .character-fullbody {
        max-width:
            calc(
                100% -
                var(--character-panel-width) -
                24px
            );
    }
}

/* ===========================
   모바일 캐릭터 시트
=========================== */
@media (max-width: 768px) {
    body.is-character-post
    .post-wrap {
        max-width: 100%;
    }

    .character-sheet {
        display: block;

        width: 100%;
        max-width: 100%;
    }

    .character-fullbody {
        display: flex;

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

        margin-bottom: 24px;
    }

    .character-fullbody:empty {
        display: none;
    }

    .character-fullbody img {
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;

        object-fit: contain;
    }

    .character-panel {
        width: 100%;
        max-width: 100%;

        flex-basis: auto;
    }

    .character-profile-top {
        grid-template-columns:
            150px minmax(0, 1fr);

        gap: 0;

        align-items: stretch;
    }

    .character-portrait {
        width: 150px;
        min-width: 150px;

        aspect-ratio: 188 / 250;
    }

    .character-portrait img {
        width: 100%;
        height: 100%;

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

    .character-profile {
        padding: 12px;
    }

    .character-profile h2 {
        margin-bottom: 10px;

        font-size: 20px;
    }

    .character-profile dl {
        gap: 5px;
    }

    .character-profile dl div {
        grid-template-columns:
            52px minmax(0, 1fr);

        gap: 6px;

        font-size: 13px;
    }

    .character-info-section {
        padding: 12px;
    }

    .character-info-section h3 {
        margin-bottom: 8px;

        font-size: 15px;
    }

    .character-info-section p,
    .character-rich-text,
    .character-relation-item,
    .character-relation-list li {
        font-size: 13px;
    }
}

/* ===========================
   작은 모바일
=========================== */
@media (max-width: 480px) {
    .character-profile-top {
        grid-template-columns:
            120px minmax(0, 1fr);
    }

    .character-portrait {
        width: 120px;
        min-width: 120px;
    }

    .character-profile {
        padding: 10px;
    }

    .character-profile h2 {
        font-size: 18px;
    }

    .character-profile dl div {
        grid-template-columns:
            46px minmax(0, 1fr);

        font-size: 12px;
    }

    .character-info-section {
        padding: 11px;
    }
}