:root {

    font: 14px/1.6 system-ui, -apple-system, 'Yu Gothic', sans-serif;

    color: #423a34;

    background: #f5f2ee
}



* {

    box-sizing: border-box
}



body {

    margin: 0
}



button,

input,

textarea,

select {

    font: inherit
}



button {

    cursor: pointer
}



button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible {

    outline: 3px solid #92745a;

    outline-offset: 2px
}



button {

    min-height: 42px
}



header {

    max-width: 910px;

    margin: 0 auto;

    padding: 21px 16px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px
}



h1 {

    font-size: 21px;

    margin: 0
}



header small,

.muted {

    color: #857a70;

    font-size: 12px
}



.badge {

    padding: 6px 11px;

    background: #e9e3dc;

    border-radius: 50px;

    font-size: 12px
}



.shell {

    max-width: 910px;

    padding: 0 16px 60px;

    margin: auto
}



.instructions {

    font-size: 12px;

    color: #796f66;

    margin: 0 0 12px
}



.toolbar {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px
}



.btn {

    border: 1px solid #d8cfc5;

    background: #fff;

    color: #58493f;

    border-radius: 10px;

    padding: 9px 13px;

    font-weight: 600
}



.btn.primary {

    background: #806d5b;

    color: white;

    border-color: #806d5b
}



.btn:disabled {

    opacity: .5
}



.page {

    max-width: 600px;

    margin: 0 auto;

    background: #f1ece6;

    border-radius: 17px;

    padding: 20px;

    --cloth: #dac6ae
}



.edit-target {

    position: relative;

    border: 2px solid transparent;

    transition: border-color .15s;

    background-clip: padding-box
}



.edit-target:hover {

    border-color: #aa927a
}



.edit-target:focus-visible,

.edit-target.active {

    border-color: #806d5b;

    outline: 2px solid #806d5b30
}



.edit-icon {

    position: absolute;

    right: 9px;

    top: 8px;

    background: #fff;

    color: #75614f;

    border: 1px solid #e4dacf;

    border-radius: 50%;

    width: 31px;

    height: 31px;

    display: grid;

    place-items: center;

    z-index: 1;

    font-size: 15px
}



.profile {

    background: white;

    border-radius: 13px;

    padding: 17px;

    margin-bottom: 15px;

    width: 100%;

    text-align: left
}



.profile-row {

    display: flex;

    gap: 12px;

    align-items: center
}



.avatar {

    width: 58px;

    height: 58px;

    object-fit: cover;

    border-radius: 50%;

    background: #e1d1c0;

    display: grid;

    place-items: center;

    flex: none;

    color: #775f4d;

    font-size: 24px
}



.name {

    font-size: 17px;

    font-weight: 800
}



.sub {

    font-size: 11px;

    color: #81776f
}



.bio {

    font-size: 12px;

    color: #675d54;

    margin-top: 12px;

    white-space: pre-wrap
}



.socials {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 13px
}



.pill {

    display: inline-block;

    border-radius: 99px;

    background: #f2eee9;

    padding: 6px 12px;

    font-size: 11px
}



.space-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 5px 2px 8px;

    font-size: 13px;

    font-weight: 750
}



.space-number {

    font-size: 11px;

    background: white;

    border-radius: 5px;

    padding: 4px 8px;

    font-weight: 400
}



.desk {

    background: var(--cloth);

    padding: 12px;

    border-radius: 12px;

    box-shadow: inset 0 -5px #0000000a
}



.sign {

    background: #fffaf4;

    border-radius: 7px;

    padding: 18px 8px;

    text-align: center;

    font-weight: 750;

    margin-bottom: 12px
}



.books {

    display: grid;

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

    gap: 9px
}



.book {

    background: #fffdf9;

    border-radius: 6px;

    padding: 6px;

    text-align: center;

    min-width: 0
}



.cover {

    aspect-ratio: 3/4;

    background: #8b9da8;

    color: white;

    display: grid;

    place-items: center;

    border-radius: 4px;

    overflow: hidden;

    font-size: 25px
}



.cover img {

    width: 100%;

    height: 100%;

    object-fit: contain
}



.book-title {

    font-size: 11px;

    font-weight: 700;

    overflow-wrap: anywhere;

    margin-top: 5px
}



.book-price {

    font-size: 10px;

    color: #807468
}



.edge {

    height: 10px;

    margin: 10px -4px -4px;

    background: #bba48a;

    border-radius: 4px
}



.empty {

    font-size: 12px;

    text-align: center;

    padding: 24px;

    color: #776b60
}



.add {

    background: #ffffff80;

    border: 2px dashed #b7a18b;

    border-radius: 7px;

    display: grid;

    place-items: center;

    color: #645648;

    min-height: 85px;

    font-size: 12px
}



.links {

    display: grid;

    gap: 9px;

    margin-top: 15px
}



.link-card {

    background: white;

    border-radius: 11px;

    padding: 14px;

    display: flex;

    gap: 12px;

    align-items: center;

    text-align: left;

    min-height: 66px
}



.link-square {

    width: 39px;

    height: 39px;

    background: #f1ebe4;

    border-radius: 7px;

    display: grid;

    place-items: center;

    flex: none;

    overflow: hidden
}



.link-square img {

    width: 100%;

    height: 100%;

    object-fit: cover
}



.link-card strong {

    display: block;

    font-size: 12px
}



.link-card small {

    font-size: 11px;

    color: #83796e
}



.link-card .arrow {

    margin-left: auto;

    color: #8c7b6b
}



.footer {

    text-align: center;

    margin: 20px auto 0;

    font-size: 10px;

    letter-spacing: .12em;

    color: #aa9c8c
}



.note {

    max-width: 600px;

    margin: 15px auto;

    color: #857970;

    font-size: 12px
}



.utility {

    display: flex;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;

    margin: 14px 0
}



dialog {

    width: min(520px, calc(100vw - 24px));

    max-height: min(90dvh, 850px);

    overflow: auto;

    border: 1px solid #ded4ca;

    border-radius: 17px;

    padding: 0;

    box-shadow: 0 25px 100px #28190c55
}



dialog::backdrop {

    background: #261b1499
}



.dialog-head {

    position: sticky;

    top: 0;

    background: white;

    padding: 16px 19px;

    border-bottom: 1px solid #eae4dd;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 5
}



.dialog-head h2 {

    font-size: 17px;

    margin: 0
}



.x {

    border: 0;

    background: transparent;

    font-size: 22px
}



.dialog-body {

    padding: 19px
}



.field {

    display: grid;

    gap: 5px;

    margin-bottom: 15px
}



.field label {

    font-size: 12px;

    font-weight: 700
}



input,

textarea,

select {

    width: 100%;

    border: 1px solid #d9d0c7;

    border-radius: 9px;

    padding: 11px;

    background: #fff;

    color: #40372f
}



textarea {

    min-height: 88px;

    resize: vertical
}



.hint {

    font-size: 11px;

    color: #82766a
}



.entry {

    border: 1px solid #e7dfd6;

    border-radius: 9px;

    padding: 9px;

    margin-bottom: 9px;

    display: flex;

    gap: 8px;

    align-items: center
}



.entry .meta {

    min-width: 0;

    flex: 1
}



.entry small {

    display: block;

    color: #857970;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}



.entry button {

    border: 1px solid #e6ded6;

    background: white;

    border-radius: 7px;

    min-width: 37px;

    padding: 5px
}



.form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding: 14px 19px;

    border-top: 1px solid #ece6e0;

    background: white;

    position: sticky;

    bottom: 0
}



.row {

    display: flex;

    gap: 9px
}



.row>* {

    flex: 1;

    min-width: 0
}



.panel {

    padding: 12px;

    border: 1px solid #eee5dc;

    border-radius: 9px;

    background: #fbfaf8;

    margin-bottom: 13px
}



.panel h3 {

    margin: 0 0 12px;

    font-size: 13px
}



.swatches {

    display: flex;

    gap: 12px
}



.swatches button {

    width: 35px;

    min-height: 35px;

    height: 35px;

    border-radius: 50%;

    border: 3px solid white;

    outline: 1px solid #c9bdb0
}



.toast {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    background: #3c342d;

    color: white;

    padding: 9px 16px;

    border-radius: 20px;

    z-index: 30;

    font-size: 12px;

    display: none
}



.toast.show {

    display: block
}



.sr {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0)
}



@media(max-width:600px) {

    header {

        padding: 12px
    }



    h1 {

        font-size: 18px
    }



    .shell {

        padding: 0 10px 35px
    }



    .page {

        padding: 13px
    }



    .toolbar {

        display: grid;

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



    .toolbar button {

        font-size: 12px;

        padding: 8px 5px
    }



    .books {

        gap: 6px
    }



    .book {

        padding: 4px
    }



    .profile {

        padding: 13px
    }



    dialog {

        width: 100%;

        max-height: 88dvh;

        position: fixed;

        margin: auto 0 0;

        bottom: 0;

        border-radius: 17px 17px 0 0
    }



    .dialog-body {

        padding: 14px
    }

}



/* 同人誌カード */

.book {

    border: none;

    appearance: none;

    font: inherit;

    color: inherit;

    cursor: pointer;

}



/* キーボード操作時だけフォーカスを表示 */

.book:focus-visible {

    outline: 2px solid #806d5b;

    outline-offset: 3px;

}



/* SNSリンク */

.pill {

    color: #58493f;

    text-decoration: none;

}



/* 下部リンクカード */

.link-card {

    color: inherit;

    text-decoration: none;

}



.link-card:hover,

.pill:hover {

    text-decoration: none;

}



/* 公開プレビュー */

body.public-preview header,

body.public-preview .instructions,

body.public-preview .toolbar,

body.public-preview .note,

body.public-preview #reset,

body.public-preview #export {

    display: none;

}



body.public-preview .shell {

    padding-top: 24px;

}

[hidden] {
    display: none !important
}

.login-panel {
    max-width: 600px;
    margin: 12px auto;
    padding: 20px;
    background: white;
    border-radius: 14px
}

.login-panel h2 {
    margin-top: 0
}

.login-panel .row {
    align-items: end
}

.login-panel .row button {
    flex: 0 0 auto
}

/* v0.9 アカウントは右上にまとめ、編集対象と分離 */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.account-menu {
    position: relative
}

.account-menu summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #d8cfc5;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px
}

.account-menu summary::-webkit-details-marker {
    display: none
}

.account-popover {
    position: absolute;
    z-index: 30;
    right: 0;
    top: calc(100% + 6px);
    background: white;
    border: 1px solid #ded4ca;
    border-radius: 12px;
    padding: 13px;
    min-width: 195px;
    box-shadow: 0 6px 24px #20150b22;
    display: grid;
    gap: 9px
}

#separatePreview {
    display: inline-flex;
    align-items: center;
    text-decoration: none
}

/* hidden 属性を display 指定より優先 */
[hidden] {
    display: none !important
}

/* v1.0 responsive header & login */
header {
    width: 100%;
    min-width: 0;
}

header>div:first-child {
    min-width: 0;
}

.header-actions {
    min-width: 0;
    max-width: 60%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-left: auto;
}

.header-actions .badge {
    white-space: nowrap;
}

.account-menu {
    min-width: 0;
    max-width: 100%;
}

.account-menu summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-panel {
    width: 100%;
}

.login-panel input {
    min-width: 0;
}

.login-panel .row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.login-panel .row input {
    flex: 1 1 auto;
    min-width: 0;
}

.login-panel .row button {
    flex: 0 0 auto;
}

body:not(.authenticated) #editInstructions {
    display: none;
}

.publication-panel {
    max-width: 600px;
    margin: 0 auto 14px;
    padding: 14px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.publication-panel>div {
    flex: 1 1 190px;
}

.publication-panel p {
    margin: 2px 0 0;
}

.publication-panel a {
    text-decoration: none;
}

body.public-preview .publication-panel {
    display: none;
}

@media(max-width:600px) {
    header {
        align-items: flex-start;
    }

    .header-actions {
        max-width: 55%;
        gap: 6px;
        align-items: flex-end;
        flex-direction: column;
    }

    .header-actions .badge {
        font-size: 10px;
        padding: 4px 7px;
    }

    .account-menu summary {
        font-size: 11px;
        padding: 6px 8px;
    }

    .login-panel {
        padding: 16px;
    }

    .login-panel .row {
        flex-wrap: wrap;
    }

    .login-panel .row input {
        flex: 1 1 100%;
    }

    .login-panel .row button {
        width: 100%;
    }
}

/* v1.2: sortable content blocks */
.block-toolbar {
    max-width: 600px;
    margin: 8px auto 14px
}

.block-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin: 7px 0;
    border: 1px solid #e1d6cc;
    border-radius: 10px;
    background: white
}

.block-entry>strong {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere
}

.block-entry>button {
    border: 1px solid #d8cfc5;
    border-radius: 7px;
    background: #fff;
    padding: 5px 9px;
    min-height: 40px
}

.block-entry[draggable="true"] {
    cursor: grab
}

.free-text {
    position: relative;
    background: #fff;
    border-radius: 11px;
    margin-top: 14px;
    padding: 17px 18px;
    overflow-wrap: anywhere
}

.free-text h2 {
    font-size: 14px;
    margin: 0 0 7px
}

.free-text-content {
    font-size: 12px;
    line-height: 1.85
}

.text-pencil {
    cursor: pointer
}

body.public-preview .block-toolbar {
    display: none
}

body:not(.authenticated) .block-toolbar {
    display: none
}

/* v1.3 WEBイベント案内 */
.section-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 1.5;
    color: #655343;
    background: #f0e8df;
    border-radius: 5px;
    padding: 2px 7px;
    margin: 3px 0
}

.netprint {
    border: 1px solid #e9ded2
}

.netprint p {
    margin: 7px 0;
    font-size: 12px
}

.print-code {
    font-variant-numeric: tabular-nums
}

.print-code strong {
    font-size: 17px;
    letter-spacing: .05em;
    overflow-wrap: anywhere
}

.print-link {
    display: inline-block;
    margin-top: 10px;
    color: #645142;
    text-decoration: underline;
    text-underline-offset: 3px
}

.block-entry {
    touch-action: pan-y
}

.block-entry>strong {
    font-size: 13px
}

.block-entry:focus-within {
    outline: 1px solid #937d68
}

#netprintFields[hidden] {
    display: none
}

.insert-row {
    display: flex;
    justify-content: center;
    margin: 7px 0
}

.insert-row button {
    border: 1px dashed #cdbbab;
    background: transparent;
    color: #796a5d;
    border-radius: 8px;
    padding: 3px 12px;
    min-height: 30px;
    font: inherit;
    font-size: 11px;
    cursor: pointer
}

.insert-row button:hover {
    background: #fff
}

.public-preview .insert-row {
    display: none
}

/* v1.4: 編集はページから直接。上部の旧編集メニューを非表示 */
.toolbar {
    display: none !important
}

/* 鉛筆の余計な枠・余白を抑える */
.edit-icon {
    right: 5px;
    top: 5px;
    width: 25px;
    height: 25px;
    font-size: 13px;
    border: 1px solid #e5ddd4;
    box-shadow: none;
    line-height: 1
}

.book .edit-icon {
    right: 4px;
    top: 4px
}

.edit-target:not(.book) {
    border-color: transparent
}

.edit-target:hover {
    border-color: #c5b7a7
}

/* 本の区分ラベル */
.book-category {
    display: inline-block;
    margin: 6px auto 2px;
    padding: 2px 8px;
    border-radius: 30px;
    background: #eee7df;
    color: #6c5847;
    font-size: 10px;
    line-height: 1.5
}

/* テーブル前面の縁・脚を控えめに表現。スマホ表示は省スペース */
.desk {
    position: relative;
    margin-bottom: 19px;
    border-bottom: 8px solid #b7a087;
    box-shadow: inset 0 -3px #0000000a, 0 3px 0 #d0bdab
}

.desk::before,
.desk::after {
    content: "";
    position: absolute;
    bottom: -20px;
    width: 11px;
    height: 14px;
    background: #b7a087;
    border-radius: 0 0 3px 3px;
    z-index: 0
}

.desk::before {
    left: 18px
}

.desk::after {
    right: 18px
}

.desk .edge {
    height: 4px;
    margin: 9px 0 -9px;
    background: #b7a087;
    opacity: .5
}

/* 挿入ボタンは小さく、ネップリも直接選べる */
.insert-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap
}

.insert-row button {
    font-size: 11px;
    padding: 5px 9px
}

@media(max-width:600px) {
    .desk {
        margin-bottom: 15px
    }

    .desk::before,
    .desk::after {
        height: 10px;
        bottom: -16px
    }
}

/* v1.5 布の柄と手前レース */
.page .desk {
    background-color: var(--cloth);
    background-image: none;
    isolation: isolate
}

.page[data-cloth-pattern="check"] .desk {
    background-image: linear-gradient(90deg, #ffffff35 50%, transparent 50%), linear-gradient(#ffffff35 50%, transparent 50%);
    background-size: 34px 34px
}

.page[data-cloth-pattern="stripe"] .desk {
    background-image: repeating-linear-gradient(90deg, #ffffff52 0 14px, transparent 14px 28px)
}

.page[data-cloth-pattern="dot"] .desk {
    background-image: radial-gradient(#ffffff91 2px, transparent 3px);
    background-size: 20px 20px
}

.page[data-cloth-pattern="grid"] .desk {
    background-image: linear-gradient(90deg, #ffffff83 1px, transparent 1px), linear-gradient(#ffffff83 1px, transparent 1px);
    background-size: 24px 24px
}

.page .desk .edge {
    position: relative;
    z-index: 1
}

.page[data-cloth-lace]:not([data-cloth-lace="none"]) .desk::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -23px;
    height: 28px;
    width: auto;
    border: 0;
    border-radius: 0;
    background-repeat: repeat-x;
    background-size: 64px 28px;
    z-index: 2;
    pointer-events: none
}

.page[data-cloth-lace="scallop"] .desk::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28' viewBox='0 0 64 28'%3E%3Cpath d='M0 2H64V10C56 27 40 27 32 11C24 27 8 27 0 10Z' fill='%23fffaf4' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='16' cy='12' r='2' fill='%23d6bea6'/%3E%3Ccircle cx='48' cy='12' r='2' fill='%23d6bea6'/%3E%3C/svg%3E")
}

.page[data-cloth-lace="floral"] .desk::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28' viewBox='0 0 64 28'%3E%3Cpath d='M0 2H64V11Q48 31 32 11Q16 31 0 11Z' fill='%23fffdf8' stroke='%23fff' stroke-width='1.5'/%3E%3Cg fill='%23ffffff' stroke='%23d6bca7' stroke-width='.8'%3E%3Ccircle cx='16' cy='13' r='5'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Ccircle cx='20' cy='10' r='3'/%3E%3Ccircle cx='16' cy='7' r='3'/%3E%3Ccircle cx='48' cy='13' r='5'/%3E%3Ccircle cx='44' cy='10' r='3'/%3E%3Ccircle cx='52' cy='10' r='3'/%3E%3Ccircle cx='48' cy='7' r='3'/%3E%3C/g%3E%3C/svg%3E")
}

.page[data-cloth-lace="double"] .desk::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 1H64V9Q48 24 32 9Q16 24 0 9Z' fill='%23fffdf7' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M0 4H64V12Q48 30 32 12Q16 30 0 12' fill='none' stroke='%23d7bdab' stroke-width='1.4' stroke-dasharray='3 3'/%3E%3C/svg%3E")
}

.netprint-sample {
    display: block;
    max-height: 340px;
    max-width: 100%;
    width: auto;
    margin: 12px auto;
    border-radius: 8px;
    object-fit: contain
}

.netprint .print-link {
    display: inline-block;
    margin: 8px 10px 0 0
}

#np_storeCustomField[hidden],
#np_sevenCodeField[hidden],
#np_urlField[hidden] {
    display: none
}

/* v1.6 — restrained editor chrome and distinct content sections */
:root {
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background: #f7f8f9;
    color: #303640
}

body {
    background: #f7f8f9
}

header {
    max-width: 910px;
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ebee
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: #edf0f4;
    color: #637b88;
    font-size: 21px
}

.brand h1 {
    font-size: 19px;
    font-weight: 780;
    letter-spacing: .015em;
    line-height: 1.3
}

.brand small {
    color: #77818e;
    font-size: 11px
}

.shell {
    padding-top: 12px
}

.instructions {
    max-width: 600px;
    margin: 0 auto 12px;
    font-size: 12px;
    color: #66737e
}

.editor-actionbar {
    display: flex;
    max-width: 600px;
    margin: 0 auto 14px;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap
}

.editor-actionbar .btn.primary {
    margin-left: auto;
    background: #566f82;
    border-color: #566f82
}

.btn {
    border-color: #dce2e7;
    color: #364654;
    font-weight: 600
}

.btn.primary {
    background: #566f82;
    border-color: #566f82
}

.page {
    background: #f5f3f1
}

.publication-panel {
    border: 1px solid #e6ebef;
    padding: 12px 15px;
    box-shadow: 0 1px 5px #24364808
}

.publication-panel strong {
    font-size: 12px
}

.publication-panel .muted {
    font-size: 11px
}

.utility {
    max-width: 600px;
    margin: 13px auto 0;
    display: block
}

.data-menu {
    margin-left: auto;
    max-width: 260px;
    font-size: 12px;
    color: #6f7882
}

.data-menu summary {
    cursor: pointer;
    list-style: none;
    text-align: right;
    padding: 7px 0
}

.data-menu summary::before {
    content: '⚙ ';
    font-size: 13px
}

.data-actions {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e4e7ea;
    border-radius: 10px;
    background: #fff
}

.data-actions .btn {
    width: 100%
}

.note {
    margin-top: 8px;
    color: #929ba5;
    font-size: 11px;
    text-align: center
}

.free-text {
    border: 1px solid #e3e9ed;
    box-shadow: 0 2px 8px #25364307;
    border-left: 3px solid #B8D4E8;
    padding: 17px 18px 18px
}

.free-text:not(.netprint) h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #394853;
    font-size: 14px
}

.free-text:not(.netprint) h2::before {
    content: '✦';
    font-size: 12px;
    color: #88a4b4
}

.free-text-content {
    font-size: 13px;
    line-height: 1.9;
    color: #45515b
}

.netprint {
    border: 1px solid #d9e7df;
    border-left: 3px solid #A9D7BC;
    background: #fff
}

.netprint .section-badge {
    background: #e8f2ed;
    color: #437363
}

.netprint h2 {
    font-size: 16px
}

.netprint-sample {
    border: 1px solid #edf0ef;
    background: #f7f9f8
}

.links .link-card {
    border: 1px solid #e9e9ed;
    box-shadow: 0 1px 5px #29394906
}

.link-card .section-badge {
    background: #edf2f4;
    color: #556c7b
}

.deadline-fields {
    padding: 12px;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    margin: 0 0 16px
}

.deadline-fields legend {
    font-size: 12px;
    font-weight: 700;
    padding: 0 5px
}

.deadline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.deadline-grid .field {
    margin-bottom: 3px
}

.edit-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    line-height: 1;
    border: 1px solid #e6e9ee;
    color: #637482;
    background: #fff;
    box-shadow: 0 1px 3px #00000008
}

body.public-preview .editor-actionbar,
body.public-preview #dataTools {
    display: none
}

@media(max-width:600px) {
    .brand-mark {
        width: 34px;
        height: 34px
    }

    .brand h1 {
        font-size: 17px
    }

    .editor-actionbar {
        gap: 7px
    }

    .editor-actionbar .btn {
        font-size: 12px
    }

    .deadline-grid {
        grid-template-columns: 1fr
    }
}

/* v1.6.1: ブロック種別を具体的なSVGアイコンで識別 */
.section-icon {
    width: 19px;
    height: 19px;
    flex: none;
    display: inline-block;
    vertical-align: middle
}

.section-icon-book {
    color: #677d8d
}

.section-icon-file {
    color: #b88972
}

.section-icon-printer {
    color: #6c9585
}

.section-icon-link {
    color: #7b86a5
}

.space-heading .section-heading-label,
.links-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.links-heading {
    font-size: 13px;
    font-weight: 700;
    color: #45515b;
    margin: 0 0 9px 2px
}

.free-text h2,
.netprint h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5
}

.free-text:not(.netprint) h2::before {
    content: none
}

/* v1.6.2 - unified block controls */
.optional-block {
    position: relative
}

.block-actions {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    z-index: 4
}

.block-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid #d9e2e9;
    border-radius: 50%;
    background: #fff;
    color: #516b7b;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer
}

.block-action:hover {
    background: #f1f5f8
}

.block-action:focus-visible {
    outline: 2px solid #4a7189;
    outline-offset: 2px
}

.block-action.danger {
    color: #9a6262
}

.block-hidden {
    opacity: .58
}

.hidden-note {
    font-size: 11px;
    display: inline-block;
    margin: 4px 0 0 14px;
    background: #f1f1f1;
    border-radius: 5px;
    padding: 2px 8px
}

.optional-block .free-text {
    padding-right: 116px
}

.space-heading .btn[data-open="design"] {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0 !important;
    font-size: 14px !important
}

.optional-block .text-pencil {
    display: none
}

body.public-preview .block-actions,
body.public-preview .hidden-note {
    display: none
}

@media(max-width:600px) {
    .optional-block .free-text {
        padding-right: 114px
    }
}

/* v1.7 shared block controls */
.managed-section {
    position: relative;
    margin-bottom: 12px
}

.managed-block {
    position: relative
}

.managed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 108px 6px 4px;
    font-size: 13px;
    font-weight: 700
}

.managed-heading .block-actions {
    top: 0;
    right: 0
}

/* .block-actions / .block-action were consolidated above; avoid override drift. */

.action-svg {
    width: 16px;
    height: 16px;
    display: block
}

.managed-section .free-text {
    padding-right: 118px
}

.managed-section .block-hidden {
    opacity: .6
}

@media(max-width:420px) {
    .managed-heading {
        padding-right: 108px
    }

    .managed-section .free-text {
        padding-right: 112px
    }
}

/* Plain-text block link editor */
.text-link-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px
}

.free-text-content a {
    color: #426b86;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere
}

.free-text-content a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

/* v1.8 full text formatting */
.text-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px
}

.text-format-toolbar .btn {
    min-height: 36px;
    padding: 6px 10px
}

.free-text-content p {
    margin: 0 0 .65em;
    white-space: pre-wrap
}

.free-text-content ul {
    padding-left: 1.7em;
    margin: .4em 0 .8em
}

.free-text-content h2,
.free-text-content h3 {
    margin: .7em 0 .4em;
    line-height: 1.5
}

.free-text-content .text-break {
    height: .5em
}

.text-block-image {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 7px;
    margin: 10px auto
}

.text-block-image.size-small {
    width: 35%
}

.text-block-image.size-medium {
    width: 65%
}

.text-block-image.size-large {
    width: 100%
}

#textImageFields[hidden] {
    display: none
}


/* v1.8.1: Desk legs and tablecloth lace use separate elements.
   Previously .desk::after was shared by a leg and lace, hiding the right leg. */
.page .desk {
    position: relative;
    margin-bottom: 30px;
    overflow: visible
}

.page .desk::before,
.page .desk::after {
    content: "";
    position: absolute;
    bottom: -23px;
    width: 13px;
    height: 17px;
    background: #b7a087;
    border-radius: 0 0 3px 3px;
    z-index: 0;
}

.page .desk::before {
    left: 22px;
    right: auto
}

.page .desk::after {
    right: 22px;
    left: auto
}

.page[data-cloth-lace]:not([data-cloth-lace="none"]) .desk::after {
    content: "";
    position: absolute;
    left: auto;
    right: 22px;
    bottom: -23px;
    width: 13px;
    height: 17px;
    border: 0;
    border-radius: 0 0 3px 3px;
    background: #b7a087;
    background-image: none;
    z-index: 0;
}

.page .desk .edge {
    position: relative;
    height: 4px;
    margin: 9px 0 -9px;
    background: #b7a087;
    opacity: 1;
    z-index: 1
}

.page[data-cloth-lace]:not([data-cloth-lace="none"]) .desk .edge::after {
    content: "";
    position: absolute;
    left: -7px;
    right: -7px;
    top: 1px;
    height: 28px;
    background-repeat: repeat-x;
    background-size: 64px 28px;
    pointer-events: none;
    z-index: 2;
}

.page[data-cloth-lace="scallop"] .desk .edge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28' viewBox='0 0 64 28'%3E%3Cpath d='M0 2H64V10C56 27 40 27 32 11C24 27 8 27 0 10Z' fill='%23fffaf4' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='16' cy='12' r='2' fill='%23d6bea6'/%3E%3Ccircle cx='48' cy='12' r='2' fill='%23d6bea6'/%3E%3C/svg%3E")
}

.page[data-cloth-lace="floral"] .desk .edge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28' viewBox='0 0 64 28'%3E%3Cpath d='M0 2H64V11Q48 31 32 11Q16 31 0 11Z' fill='%23fffdf8' stroke='%23fff' stroke-width='1.5'/%3E%3Cg fill='%23ffffff' stroke='%23d6bca7' stroke-width='.8'%3E%3Ccircle cx='16' cy='13' r='5'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Ccircle cx='20' cy='10' r='3'/%3E%3Ccircle cx='16' cy='7' r='3'/%3E%3Ccircle cx='48' cy='13' r='5'/%3E%3Ccircle cx='44' cy='10' r='3'/%3E%3Ccircle cx='52' cy='10' r='3'/%3E%3Ccircle cx='48' cy='7' r='3'/%3E%3C/g%3E%3C/svg%3E")
}

.page[data-cloth-lace="double"] .desk .edge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 1H64V9Q48 24 32 9Q16 24 0 9Z' fill='%23fffdf7' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M0 4H64V12Q48 30 32 12Q16 30 0 12' fill='none' stroke='%23d7bdab' stroke-width='1.4' stroke-dasharray='3 3'/%3E%3C/svg%3E")
}

/* 机の脚を長く表示する */
.page .desk {
    margin-bottom: 66px;
    overflow: visible;
}

.page .desk::before,
.page .desk::after {
    content: "";
    position: absolute;
    bottom: -60px;
    width: 16px;
    height: 56px;
    background: #b7a087;
    border-radius: 0 0 4px 4px;
    z-index: 0;
}

.page .desk::before {
    left: 22px;
    right: auto;
}

.page .desk::after {
    right: 22px;
    left: auto;
}

/* 既存のレース用CSSが右脚を上書きしないようにする */
.page[data-cloth-lace]:not([data-cloth-lace="none"]) .desk::after {
    left: auto;
    right: 22px;
    bottom: -60px;
    width: 16px;
    height: 56px;
    background: #b7a087;
    background-image: none;
    border-radius: 0 0 4px 4px;
    z-index: 0;
}

/* Shared heading icon alignment (replaces the former inline style). */
.managed-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

/* Makimaki Link v1.8.5 — mobile-only additive styles.
   Append at end of current style.css. Do not replace existing desk/cloth/lace rules. */
@media (max-width: 600px) {

    /* Keep long titles and account names inside the viewport. */
    .shell,
    .page,
    .profile,
    .managed-section,
    .managed-block,
    .free-text,
    .link-card,
    .block-entry {
        min-width: 0;
    }

    .page {
        width: 100%;
    }

    .profile,
    .link-card,
    .free-text {
        overflow-wrap: anywhere;
    }

    .header-actions {
        max-width: 62%;
    }

    #headerAccount {
        overflow-wrap: anywhere;
    }

    /* Make block titles readable without allowing controls to overlap text. */
    .managed-heading {
        gap: 8px;
        padding-right: 0;
        align-items: flex-start;
    }

    .managed-heading>span {
        min-width: 0;
        flex: 1 1 auto;
        overflow-wrap: anywhere;
        padding-top: 5px;
    }

    .managed-heading .block-actions {
        position: static;
        flex: 0 0 auto;
    }

    /* Text/netprint controls live in their card; reserve a short top row only. */
    .managed-section .free-text {
        padding-right: 13px;
        padding-top: 53px;
    }

    .managed-section .free-text>.block-actions {
        top: 10px;
        right: 10px;
    }

    /* Responsive editors and images. */
    .text-format-toolbar,
    .text-link-toolbar {
        gap: 6px;
    }

    .text-format-toolbar .btn,
    .text-link-toolbar .btn {
        min-height: 40px;
    }

    .text-block-image,
    .netprint-sample {
        max-width: 100%;
        height: auto;
    }

    .deadline-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .block-entry {
        flex-wrap: wrap;
    }

    .block-entry>strong {
        flex-basis: 50%;
    }

    .block-entry .block-actions {
        position: static;
        margin-left: auto;
    }

    .editor-actionbar {
        flex-wrap: wrap;
    }

    .editor-actionbar>* {
        max-width: 100%;
    }

    /* Preserve the manually adjusted 56px desk legs and the lace edge.
     No .desk::before / .desk::after / .edge overrides here. */
}

@media (max-width: 380px) {
    .block-actions {
        gap: 3px;
    }

    .block-action {
        width: 30px;
        height: 30px;
        min-height: 30px;
        flex-basis: 30px;
    }

    .managed-heading>span {
        font-size: 12px;
    }

    .profile-row {
        gap: 8px;
    }

    .avatar {
        width: 48px;
        height: 48px;
    }
}

/* v1.9.7: responsive book details and one shared zoom viewer */
#bookPreview {
    box-sizing: border-box;
    width: min(94vw, 680px);
    max-width: 680px;
    max-height: 90dvh;
    overflow-x: hidden;
}

#bookPreviewBody {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

#bookPreviewBody>div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 16px !important;
    align-items: start !important;
    max-width: 100%;
    min-width: 0;
}

#bookPreviewBody>div:first-child> :first-child {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 160px;
    min-width: 0;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    border-radius: 6px;
}

#bookPreviewBody>div:first-child>.cover {
    aspect-ratio: 3/4;
    overflow: hidden;
}

#bookPreviewBody>div:first-child>.cover>img,
#bookPreviewBody>div:first-child>.cover>.maki-book-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#bookPreviewBody>div:first-child>.maki-book-cover {
    aspect-ratio: 3/4;
}

#bookPreviewBody>div:first-child>div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

#bookPreviewBody [data-maki-enlarge] {
    cursor: zoom-in;
}

#bookPreviewBody [data-maki-enlarge]:focus-visible {
    outline: 3px solid #4c79b2;
    outline-offset: 3px;
}

@media(max-width:480px) {
    #bookPreview {
        width: 95vw;
        max-width: 95vw;
        padding: 14px;
    }

    #bookPreviewBody>div:first-child {
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        gap: 12px !important;
    }
}

#makiCoverZoom {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 44px 12px 22px;
    border: 0;
    background: #16171bef;
    color: white;
    overflow: hidden;
}

#makiCoverZoom::backdrop {
    background: rgba(0, 0, 0, .8);
}

#makiCoverZoom .maki-zoom-close {
    position: absolute;
    right: 14px;
    top: 8px;
    z-index: 5;
    width: 42px;
    height: 42px;
    color: white;
    background: #ffffff28;
    border: 1px solid #ffffff55;
    border-radius: 50%;
    font-size: 25px;
    cursor: pointer;
}

#makiCoverZoom .maki-zoom-stage {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
}

#makiCoverZoom .maki-zoom-media {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center;
    will-change: transform;
}

#makiCoverZoom .maki-zoom-media>img {
    display: block;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 70px);
    width: auto;
    height: auto;
    object-fit: contain;
}

#makiCoverZoom .maki-zoom-media>.maki-book-cover {
    width: min(72vw, 380px);
    height: auto;
    aspect-ratio: 3/4;
    max-height: calc(100dvh - 80px);
}




/* 文章・ネップリブロックの表示順に応じたアクセントカラー */

/* 1、3、5番目：水色 */
.managed-section.accent-blue>.free-text {
    border-left: 3px solid #B8D4E8;
}

/* 2、4、6番目：緑色 */
.managed-section.accent-green>.free-text {
    border-left: 3px solid #A9D7BC;
}

/* book-manager-unified-v1: 本の管理画面専用。机や他ブロックには適用しない。 */
.book-manager-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 16px;
}

.book-manager-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e5dcd5;
    border-radius: 12px;
    background: #fff;
    min-width: 0;
}

.book-manager-thumb {
    width: 68px;
    height: 92px;
    overflow: hidden;
    border-radius: 5px;
    background: #f2e7ea;
    grid-row: span 2;
}

.book-manager-thumb>img,
.book-manager-thumb>.maki-book-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.book-manager-thumb .maki-cover-title {
    font-size: 9px;
}

.book-manager-thumb .maki-cover-subtitle,
.book-manager-thumb .maki-cover-author {
    font-size: 6px;
}

.book-manager-info {
    min-width: 0;
    align-self: end;
}

.book-manager-info strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.book-manager-info small {
    display: block;
    color: #777;
    margin-top: 4px;
}

.book-manager-edit {
    align-self: end;
}

.book-manager-actions {
    grid-column: 2 / 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: start;
}

.book-manager-actions .btn {
    padding: 6px 9px;
    min-height: 32px;
    font-size: 12px;
}

.book-manager-delete {
    margin-left: auto;
    color: #ad4653;
    border-color: #e5b5bb;
}

@media (max-width: 480px) {
    .book-manager-row {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px;
    }

    .book-manager-thumb {
        width: 56px;
        height: 78px;
    }

    .book-manager-actions {
        grid-column: 1 / -1;
    }

    .book-manager-edit {
        padding: 7px 9px;
    }
}

/* マキマキリンク：控えめなロゴ風タイトル */
.brand h1 {
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .brand h1 {
        font-size: 19px;
    }
}

/* スマートフォン */
@media (max-width: 600px) {
    .brand h1 {
        font-size: 21px;
    }
}



/* 公開ページと編集画面でリンクの改行・文字数表示を統一 */
.link-card .link-description {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.field-counter {
    display: block;
    margin-top: 5px;
    text-align: right;
    font-size: 11px;
    color: #7b838b;
}

.field-counter.near-limit {
    color: #9a6041;
    font-weight: 700;
}


/* 未ログイン時は編集専用UIを表示しない */
body:not(.authenticated) .editor-actionbar,
body:not(.authenticated) #dataTools,
body:not(.authenticated) .toolbar,
body:not(.authenticated) #editInstructions {
    display: none;
}