/* ===== CLIN基本スタイル ===== */
.is-style-clin-simple,
.is-style-clin-info,
.is-style-clin-point,
.is-style-clin-success,
.is-style-clin-warning,
.is-style-clin-api,
.is-style-clin-ai,
[class*="is-style-clin-"] {
    position: relative;
    box-sizing: border-box;
    margin: 32px 0;
    padding: 28px 32px;
    border-radius: 18px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.is-style-clin-simple {
    color: #222;
    background: #f6f6f7;
    border: 1px solid #ececee;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}

.is-style-clin-info,
.is-style-clin-point,
.is-style-clin-success,
.is-style-clin-warning,
.is-style-clin-api,
.is-style-clin-ai {
    padding-left: 82px;
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.is-style-clin-info::before,
.is-style-clin-point::before,
.is-style-clin-success::before,
.is-style-clin-warning::before,
.is-style-clin-api::before,
.is-style-clin-ai::before {
    position: absolute;
    top: 25px;
    left: 24px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
}

.is-style-clin-info { color:#102a56; background:linear-gradient(180deg,#f4f9ff,#edf6ff); border-color:#cfe3ff; }
.is-style-clin-info::before { content:"i"; color:#fff; background:#1677ff; }

.is-style-clin-point { color:#102a56; background:linear-gradient(180deg,#fff,#f6f9ff); border-color:#bed4ff; }
.is-style-clin-point::before { content:"★"; color:#fff; background:#0d5bd7; }

.is-style-clin-success { color:#14532d; background:linear-gradient(180deg,#f1fff6,#e8f9ee); border-color:#b9ebc9; }
.is-style-clin-success::before { content:"✓"; color:#fff; background:#22a559; }

.is-style-clin-warning { color:#7c3d00; background:linear-gradient(180deg,#fffaf0,#fff3dd); border-color:#ffd295; }
.is-style-clin-warning::before { content:"!"; color:#fff; background:#f59e0b; }

.is-style-clin-api { color:#e6f0ff; background:linear-gradient(135deg,#071b46,#0b3a86); border-color:#2455a5; }
.is-style-clin-api::before { content:"API"; width:46px; border-radius:12px; color:#fff; background:#1677ff; font-size:12px; }

.is-style-clin-ai { color:#44258a; background:linear-gradient(180deg,#faf7ff,#f1eaff); border-color:#d9c7ff; }
.is-style-clin-ai::before { content:"AI"; color:#fff; background:linear-gradient(135deg,#6d35d8,#9b5cf6); font-size:13px; }

/* ===== 追加装飾スタイル ===== */
.is-style-clin-thin-bg {
    background:#fafafa;
    border:1px solid #edf0f2;
}

.is-style-clin-stripe {
    background:repeating-linear-gradient(135deg,#fbfcfd 0 8px,#eef2f5 8px 12px);
    border:1px solid #e4e8ec;
}

.is-style-clin-grid {
    background-color:#fff;
    background-image:
        linear-gradient(#edf0f2 1px,transparent 1px),
        linear-gradient(90deg,#edf0f2 1px,transparent 1px);
    background-size:24px 24px;
    border:1px solid #e5e9ed;
}

.is-style-clin-check {
    background:
        linear-gradient(45deg,rgba(20,40,60,.035) 25%,transparent 25%) 0 0/18px 18px,
        linear-gradient(-45deg,rgba(20,40,60,.035) 25%,transparent 25%) 0 9px/18px 18px,
        linear-gradient(45deg,transparent 75%,rgba(20,40,60,.035) 75%) 9px -9px/18px 18px,
        linear-gradient(-45deg,transparent 75%,rgba(20,40,60,.035) 75%) -9px 0/18px 18px,
        #fff;
    border:1px solid #e5e9ed;
}

.is-style-clin-stitch {
    background:#fbfaf5;
    border:2px dashed #53636b;
    border-radius:10px;
}

.is-style-clin-corner-in,
.is-style-clin-corner-out {
    background:#fff;
    border:0;
}
.is-style-clin-corner-in::before,
.is-style-clin-corner-in::after,
.is-style-clin-corner-out::before,
.is-style-clin-corner-out::after {
    content:"";
    position:absolute;
    width:32px;
    height:32px;
    pointer-events:none;
}
.is-style-clin-corner-in::before { left:0; top:0; border-left:1px solid #54636c; border-top:1px solid #54636c; }
.is-style-clin-corner-in::after { right:0; bottom:0; border-right:1px solid #54636c; border-bottom:1px solid #54636c; }
.is-style-clin-corner-out::before { right:0; top:0; border-right:1px solid #54636c; border-top:1px solid #54636c; }
.is-style-clin-corner-out::after { left:0; bottom:0; border-left:1px solid #54636c; border-bottom:1px solid #54636c; }

.is-style-clin-cross {
    background:#fff;
    border:2px solid #52616a;
    box-shadow:
        10px 0 0 -8px #52616a,
        -10px 0 0 -8px #52616a,
        0 10px 0 -8px #52616a,
        0 -10px 0 -8px #52616a;
}

.is-style-clin-double-offset {
    background:#fff;
    border:1px solid #52616a;
    box-shadow:6px 6px 0 #fff,7px 7px 0 #52616a,12px 12px 0 #fff,13px 13px 0 #52616a;
    margin-right:14px;
    margin-bottom:46px;
}

.is-style-clin-diagonal {
    background:
        linear-gradient(135deg,#52616a 0 30px,transparent 31px) top left/60px 60px no-repeat,
        linear-gradient(315deg,#52616a 0 30px,transparent 31px) bottom right/60px 60px no-repeat,
        #fff;
    border:1px solid #e2e6e9;
}

.is-style-clin-clip {
    background:#fff;
    border:1px solid #e0e4e8;
    box-shadow:0 3px 8px rgba(15,23,42,.08);
}
.is-style-clin-clip::before {
    content:"";
    position:absolute;
    top:-14px;
    right:28px;
    width:13px;
    height:42px;
    border:4px solid #52616a;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    transform:rotate(10deg);
}

.is-style-clin-pin {
    background:#fff;
    border:1px solid #e0e4e8;
    box-shadow:0 3px 8px rgba(15,23,42,.08);
}
.is-style-clin-pin::before,
.is-style-clin-pin::after {
    content:"";
    position:absolute;
    top:8px;
    width:20px;
    height:4px;
    background:#a9afb4;
    border-radius:99px;
    filter:blur(.3px);
}
.is-style-clin-pin::before { left:32px; }
.is-style-clin-pin::after { right:32px; }

.is-style-clin-hand {
    background:#fff;
    border:7px solid #c6cbd0;
    border-radius:30% 22% 28% 25% / 28% 35% 24% 32%;
    transform:rotate(-.4deg);
}

.is-style-clin-topline {
    background:#fff;
    border:0;
    border-top:4px solid #52616a;
    border-radius:0;
    box-shadow:0 4px 8px rgba(15,23,42,.06);
}

.is-style-clin-sticky {
    background:linear-gradient(90deg,#52616a 0 6px,#fff 6px);
    border:1px solid #e3e6e8;
    border-radius:0;
    box-shadow:0 4px 8px rgba(15,23,42,.06);
}

.is-style-clin-bubble-left,
.is-style-clin-bubble-right,
.is-style-clin-bubble-up,
.is-style-clin-bubble-down {
    background:#fff;
    border:1px solid #52616a;
    border-radius:10px;
}
.is-style-clin-bubble-left::before,
.is-style-clin-bubble-right::before,
.is-style-clin-bubble-up::before,
.is-style-clin-bubble-down::before {
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    background:#fff;
    transform:rotate(45deg);
}
.is-style-clin-bubble-left::before { left:-10px; top:34px; border-left:1px solid #52616a; border-bottom:1px solid #52616a; }
.is-style-clin-bubble-right::before { right:-10px; top:34px; border-right:1px solid #52616a; border-top:1px solid #52616a; }
.is-style-clin-bubble-up::before { top:-10px; left:48%; border-left:1px solid #52616a; border-top:1px solid #52616a; }
.is-style-clin-bubble-down::before { bottom:-10px; left:48%; border-right:1px solid #52616a; border-bottom:1px solid #52616a; }

/* リスト適用 */
.editor-styles-wrapper ul[class*="is-style-clin-"],
.editor-styles-wrapper ol[class*="is-style-clin-"],
.entry-content ul[class*="is-style-clin-"],
.entry-content ol[class*="is-style-clin-"],
ul.wp-block-list[class*="is-style-clin-"],
ol.wp-block-list[class*="is-style-clin-"] {
    display:block !important;
    padding:28px 34px 28px 58px !important;
    list-style-position:outside !important;
}
.editor-styles-wrapper ul[class*="is-style-clin-"] li,
.editor-styles-wrapper ol[class*="is-style-clin-"] li,
ul.wp-block-list[class*="is-style-clin-"] li,
ol.wp-block-list[class*="is-style-clin-"] li {
    margin:9px 0 !important;
}

pre[class*="is-style-clin-"] code {
    color:inherit;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    white-space:pre-wrap;
}

@media (max-width:600px) {
    [class*="is-style-clin-"] {
        margin:24px 0;
        padding:22px 20px;
        border-radius:14px;
        font-size:15px;
    }
    .editor-styles-wrapper ul[class*="is-style-clin-"],
    .editor-styles-wrapper ol[class*="is-style-clin-"],
    ul.wp-block-list[class*="is-style-clin-"],
    ol.wp-block-list[class*="is-style-clin-"] {
        padding:22px 20px 22px 42px !important;
    }
}