/* ===========================================================================
   pareido — cocoon-blocks compatibility (minimal, post-edit version)
   旧記事の tab-box-1 + bb-check のみ対応 (sticky/caption/label/icon/hint/tips/point は
   2026-05-16 の整理で全廃済み)。詳細: docs/cocoon_migration.md §9
   --------------------------------------------------------------------------- */

/* ---- 基本枠 ---- */
.blank-box {
    border: 1px solid var(--rule);
    padding: 1.2em 1.4em;
    margin: 1.6em 0;
    background-color: transparent;
    color: var(--ink);
    border-radius: 4px;
}
.blank-box > :first-child { margin-top: 0; }
.blank-box > :last-child  { margin-bottom: 0; }

/* ---- tab-box-1: 上端に浮かぶラベル付きの枠 ---- */
.blank-box.bb-tab {
    position: relative;
    margin-top: 2.6em;
    border-top-left-radius: 0;
}
.blank-box.bb-tab .bb-label {
    position: absolute;
    top: -1.6em;
    left: -1px;
    height: 1.6em;
    padding: 0 0.8em;
    background-color: var(--rule);
    color: var(--ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 4px 4px 0 0;
    display: inline-flex;
    align-items: center;
}
.blank-box.bb-tab .bb-label .fa {
    margin-right: 6px;
    font-style: normal;
}

/* ---- アイコン + ラベル文字 (Font Awesome の代替: Unicode 文字直書き) ---- */
.blank-box.bb-check .bb-label .fa::before { content: "\2713"; }     /* ✓ */
.blank-box.bb-check .bb-label::after      { content: "CHECK"; }

/* ---- bb-check 配色 ---- */
.blank-box.bb-check                { border-color: var(--amber); }
.blank-box.bb-check .bb-label      { background-color: var(--amber); color: var(--void); }

/* ---- mobile (480px 以下) ---- */
@media screen and (max-width: 480px) {
    .blank-box {
        padding: 1em;
    }
}