@charset "UTF-8";

.p-chara_list{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    .list_item{
        border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
        a{
            display: grid;
            grid-template-columns: 2rem max-content;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 0.6rem;
        }
        .pict{
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 50%;
            background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
        }
    }
}

.p-chapter_filter{
    display: flex;
    gap: 1rem;
    .btn{
        padding: 0.6rem 1rem;
        color: var(--color-accent);
        background-color: transparent;
        box-shadow:-4px -4px 8px #fff,4px 4px 8px rgb(0 0 0 / 24%);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: box-shadow 0.2s;
        &:hover{
            box-shadow:-2px -2px 4px #fff,2px 2px 4px rgb(0 0 0 / 24%);
        }
        &.active{
            font-weight: bold;
        }
    }
}

.p-list_chapter{
    .chapter_section{
        display: grid;
        gap: 1.6rem;
    }
    .narou-episode-list{
        display: grid;
        gap: 1rem;
        li{
            a{
                display: inline-block;
            }
            &::before{
                content: "-";
                margin-right: 0.4rem;
                color: var(--color-primary);
                vertical-align: top;
            }
            &.narou-chapter{
                font-weight: bold;
                font-size: larger;
                display: grid;
                grid-template-columns: max-content 1fr;
                align-items: center;
                gap: 1rem;
                margin: 1rem 0;
                &::before{
                    content: "";
                    display: inline-block;
                    width: 2rem;
                    aspect-ratio: 1 / 1;
                    mask-position: center center;
                    mask-repeat: no-repeat;
                    mask-size: contain;
                    mask-image: url(../img/icon-king.svg);
                    background: var(--color-accent);
                }
            }
        }
        .narou-date{
            font-size: small;
            color: var(--color-accent);
            @media (width <= 760px)  {
                display: block;
            }
        }
    }
    .narou-episode-listsp{
        display: grid;
        gap: 1.4rem;
        li{
            a{
                display: inline-block;
                &::before{
                    content: "-";
                    margin-right: 0.6rem;
                    color: var(--color-primary);
                    vertical-align: bottom;
                }
            }
            &.ep_sequel{
                padding-left: 2rem;
                margin-top: -0.6rem;
                .title{
                    text-indent: initial;
                }
                a{
                    &::before{
                        content: "∟";
                        font-size: smaller;
                        vertical-align: text-top;
                    }
                }
            }
        }
        .title{
            display: inline-block;
        }
        .narou-date{
            font-size: small;
            color: var(--color-accent);
            @media (width <= 760px)  {
                display: block;
            }
        }
    }
    .episode_summary{
        display: inline-block;
        width: 100%;
        color: color-mix(in srgb, var(--color-font) 60%, white);
        background-color: rgba(255, 255, 255, 0.75);
        font-size: smaller;
        border-radius: 0 0 4px 4px;
        overflow: hidden;
        margin-bottom: 0.4rem;
        .label{
            display: block;
            border-top: 1px solid var(--color-primary);
            color: color-mix(in srgb, var(--color-primary) 75%, white);
            padding: 0.4rem 0.6rem 0;
            line-height: 1;
            text-indent: initial;
        }
        .summary{
            display: block;
            padding: 0.6rem;
            text-indent: initial;
        }
    }
}