/* v1.9.3 - independent styles, do not alter .desk, .edge, lace or legs */
.cover:has(.maki-book-cover) {
    background: transparent !important;
    overflow: hidden
}

.maki-book-cover {
    --mc-bg: #f9e5e8;
    --mc-ink: #70475a;
    --mc-deco: #d29cae;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    aspect-ratio: 3/4;
    min-height: 0;
    padding: 8%;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    background: var(--mc-bg);
    color: var(--mc-ink);
    box-shadow: inset 0 0 0 1px #ffffffa6;
    font-family: Georgia, 'Yu Mincho', 'Hiragino Mincho ProN', serif
}

.maki-book-cover.tone-rose {
    --mc-bg: #f7e5e9;
    --mc-ink: #764c61;
    --mc-deco: #d298ac
}

.maki-book-cover.tone-mint {
    --mc-bg: #e0eee8;
    --mc-ink: #42695e;
    --mc-deco: #8db4a6
}

.maki-book-cover.tone-blue {
    --mc-bg: #dce9f1;
    --mc-ink: #3d607e;
    --mc-deco: #8aafc9
}

.maki-book-cover.tone-lavender {
    --mc-bg: #ece5f5;
    --mc-ink: #6a5785;
    --mc-deco: #b8a1d5
}

.maki-book-cover.tone-cream {
    --mc-bg: #f6ede0;
    --mc-ink: #80644b;
    --mc-deco: #c9af91
}

.maki-book-cover.tone-navy {
    --mc-bg: #293c57;
    --mc-ink: #fff1df;
    --mc-deco: #e4c996
}

.maki-cover-inner {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6%;
    padding: 9% 3%;
    border: 1px solid var(--mc-deco);
    text-align: center;
    z-index: 1
}

.maki-cover-title {
    font-size: clamp(9px, 7cqw, 14px);
    line-height: 1.45;
    overflow-wrap: anywhere;
    font-weight: 700;
    max-height: none;
    overflow: visible
}

.maki-cover-subtitle {
    font-size: clamp(6px, .8vw, 11px);
    line-height: 1.35;
    overflow-wrap: anywhere
}

.maki-cover-author {
    font-size: clamp(6px, .8vw, 11px);
    margin-top: auto;
    letter-spacing: .05em;
    overflow-wrap: anywhere
}

.maki-cover-label {
    font: 700 clamp(6px, .65vw, 9px)/1.2 system-ui, sans-serif;
    padding: .35em .65em;
    background: var(--mc-deco);
    color: #fff;
    border-radius: 99px;
    max-width: 95%;
    overflow-wrap: anywhere
}

.maki-cover-ornament {
    display: block;
    position: relative;
    width: 75%;
    min-height: 12%;
    font-size: clamp(12px, 2vw, 24px)
}

.maki-cover-ornament::before {
    content: '✧ ୨୧ ✧';
    display: block;
    color: var(--mc-deco)
}

.maki-book-cover.design-ribbon .maki-cover-inner {
    border: 3px double var(--mc-deco);
    border-radius: 42% 42% 44% 44% / 13% 13% 15% 15%;
    background: radial-gradient(ellipse, #ffffff65 10%, transparent 65%)
}

.maki-book-cover.design-ribbon .maki-cover-ornament::before {
    content: '🎀';
    filter: saturate(.7)
}

.maki-book-cover.design-bookmark .maki-cover-inner {
    border: 1px solid var(--mc-deco);
    border-radius: 48% 48% 5px 5px / 18% 18% 5px 5px
}

.maki-book-cover.design-bookmark::before {
    content: '';
    position: absolute;
    right: 14%;
    top: 0;
    width: 13%;
    height: 27%;
    background: var(--mc-deco);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%)
}

.maki-book-cover.design-bookmark .maki-cover-ornament::before {
    content: '❧ ❦ ❧'
}

.maki-book-cover.design-paperback .maki-cover-inner {
    border-width: 2px;
    border-radius: 3px;
    justify-content: center;
    padding-bottom: 31%
}

.maki-book-cover.design-paperback::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 23%;
    background: var(--mc-deco);
    opacity: .64
}

.maki-book-cover.design-paperback .maki-cover-ornament::before {
    content: '✦ ☾ ✦'
}

/* v1.9.4: 真正面のハート型フレーム。机や他の表紙には影響しない */
.maki-book-cover.design-heart {
    background: radial-gradient(circle at 50% 42%, #ffffff88, transparent 75%), var(--mc-bg);
}

.maki-book-cover.design-heart .maki-cover-inner {
    border: 0;
    border-radius: 0;
    background: transparent;
    /* ハートと文字が重ならないよう、文字領域を下部に確保する */
    padding: 12% 8% 13%;
    justify-content: flex-end;
    gap: 3%;
}

/* 同じハートの輪郭と淡い塗りを、配色に連動するCSSマスクで描画 */
.maki-book-cover.design-heart::before,
.maki-book-cover.design-heart::after {
    content: '';
    position: absolute;
    inset: 6% 11% 38%;
    background-color: var(--mc-deco);
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.maki-book-cover.design-heart::before {
    opacity: .14;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91 C36 78 7 57 7 32 C7 10 35 5 50 26 C65 5 93 10 93 32 C93 57 64 78 50 91 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91 C36 78 7 57 7 32 C7 10 35 5 50 26 C65 5 93 10 93 32 C93 57 64 78 50 91 Z'/%3E%3C/svg%3E");
}

.maki-book-cover.design-heart::after {
    opacity: .92;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' d='M50 91 C36 78 7 57 7 32 C7 10 35 5 50 26 C65 5 93 10 93 32 C93 57 64 78 50 91 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' d='M50 91 C36 78 7 57 7 32 C7 10 35 5 50 26 C65 5 93 10 93 32 C93 57 64 78 50 91 Z'/%3E%3C/svg%3E");
}

.maki-book-cover.design-heart .maki-cover-ornament::before {
    content: none;
}

/* 飾りはハートの内側上部へ。文字はハートの下に独立して置く */
.maki-book-cover.design-heart .maki-cover-ornament {
    position: absolute;
    top: 17%;
    left: 12%;
    width: 76%;
    min-height: 0;
    font-size: clamp(10px, 1.4vw, 18px);
}

.maki-book-cover.design-heart .maki-cover-title,
.maki-book-cover.design-heart .maki-cover-subtitle {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.maki-book-cover.design-heart .maki-cover-title {
    max-height: none;
    line-height: 1.25;
}

.maki-book-cover.design-heart .maki-cover-subtitle {
    max-height: none;
    overflow: visible;
}


.maki-book-cover.design-stars {
    background: radial-gradient(circle at 25% 18%, #ffffff55 1px, transparent 2px), radial-gradient(circle at 73% 32%, #ffffff88 1px, transparent 2px), radial-gradient(circle at 40% 82%, #ffffff77 1px, transparent 2px), var(--mc-bg);
    background-size: 38px 39px, 51px 57px, 29px 35px, auto
}

.maki-book-cover.design-stars .maki-cover-inner {
    border: 1px solid var(--mc-deco);
    border-radius: 40% 40% 4px 4px / 15% 15% 4px 4px
}

.maki-book-cover.design-stars .maki-cover-ornament::before {
    content: '☾ ✦ ✧'
}

.maki-book-cover.design-flowers .maki-cover-inner {
    border: 3px double var(--mc-deco);
    border-radius: 8px
}

.maki-book-cover.design-flowers::before,
.maki-book-cover.design-flowers::after {
    content: '❀ ❧ ✿';
    position: absolute;
    color: var(--mc-deco);
    font-size: clamp(10px, 1.5vw, 21px);
    z-index: 2
}

.maki-book-cover.design-flowers::before {
    top: 3%;
    left: 5%;
    transform: rotate(-30deg)
}

.maki-book-cover.design-flowers::after {
    bottom: 3%;
    right: 5%;
    transform: rotate(150deg)
}

.maki-book-cover.design-flowers .maki-cover-ornament::before {
    content: '❁ ✿ ❁'
}

.maki-cover-settings {
    padding: 12px;
    margin: 14px 0;
    border: 1px solid #e1d6cd;
    border-radius: 12px;
    background: #faf7f4
}

.maki-cover-settings h3 {
    margin: 0 0 10px;
    font-size: 14px
}

.maki-cover-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px
}

.maki-cover-modes label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px
}

.maki-cover-modes input {
    width: auto
}

.maki-cover-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px
}

.maki-cover-fields label {
    font-size: 12px;
    font-weight: 600;
    min-width: 0
}

.maki-cover-fields input,
.maki-cover-fields select {
    margin-top: 3px;
    width: 100%;
    font-weight: 400
}

.maki-cover-live {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    background: #e5e3e1;
    border-radius: 10px;
    margin: 12px 0
}

.maki-cover-live .cover {
    width: 160px;
    aspect-ratio: 3/4;
    height: auto;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    background: transparent
}

.maki-cover-live .maki-cover-title {
    font-size: clamp(10px, 9cqw, 16px)
}

.maki-cover-live .maki-cover-subtitle,
.maki-cover-live .maki-cover-author {
    font-size: 10px
}

.maki-cover-live .maki-cover-ornament {
    font-size: 22px
}

#bookPreviewBody .maki-book-cover {
    width: 120px;
    max-width: 42%;
    aspect-ratio: 3/4;
    flex-shrink: 0;
    border-radius: 6px
}

@media(max-width:480px) {
    .maki-cover-fields {
        grid-template-columns: 1fr
    }

    .maki-cover-title {
        font-size: clamp(9px, 9cqw, 18px)
    }

    .maki-cover-subtitle,
    .maki-cover-author {
        font-size: 7px
    }
}

/* ハート表紙は小さな飾りを表示しない */
.maki-book-cover.design-heart .maki-cover-ornament {
    display: none;
}


/* 編集中・プレビュー・公開ページでタイトルの比率を揃える */
.maki-cover-live .maki-cover-title,
.maki-book-cover.design-heart .maki-cover-title,
.maki-cover-live .maki-book-cover.design-heart .maki-cover-title {
    font-size: clamp(9px, 7cqw, 14px);
    line-height: 1.35;
    letter-spacing: 0.01em;
}