/* =========================================
   CSSアニメーション ジェネレーター（[mori_anim_generator]）
   記事本文の中に置くので、本文のスタイル（a・pre・code など）を受けないよう .mag の中で指定し直す
   ========================================= */

.mag {
    --mag-ink: var(--journey-ink, #11110f);
    --mag-cream: var(--journey-cream, #f2eddf);
    --mag-paper: #fffdf7;
    --mag-blue: var(--journey-blue, #2456d6);
    --mag-yellow: var(--journey-yellow, #f4c430);
    --mag-muted: #5c584f;
    position: relative;
    margin-block: 2em;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 2px solid var(--mag-ink);
    background: var(--mag-paper);
    box-shadow: 6px 6px 0 var(--mag-ink);
    color: var(--mag-ink);
    font-size: .92rem;
    line-height: 1.7;
    letter-spacing: .02em;
}
.mag *,
.mag *::before,
.mag *::after { box-sizing: border-box; }
.mag [hidden] { display: none !important; }
.mag p { margin: 0; }
.mag-sr { position: fixed; top: 0; left: -9999px; opacity: 0; }

.mag-fallback { color: var(--mag-muted); }

/* ---- 見出し行 ---- */
.mag-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1rem; }
.mag-title { font-size: 1.05rem; font-weight: 900; }
.mag-count { padding: .1rem .7rem; border: 2px solid var(--mag-ink); border-radius: 999px; background: var(--mag-yellow); font-size: .78rem; font-weight: 900; }

/* ---- ボタン類（サイト共通の button 指定を打ち消す） ---- */
.mag button,
.mag input,
.mag select { font: inherit; color: inherit; letter-spacing: inherit; }
.mag button { margin: 0; cursor: pointer; }
.mag button:focus-visible,
.mag input:focus-visible,
.mag select:focus-visible,
.mag .mag-bz-handle:focus-visible,
.mag-code:focus-visible { outline: 3px solid var(--mag-blue); outline-offset: 2px; }

.mag-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.5rem; padding: .35rem .9rem; border: 2px solid var(--mag-ink); border-radius: 8px; background: var(--mag-paper); font-size: .84rem; font-weight: 700; line-height: 1.3; transition: transform .15s ease, box-shadow .15s ease; }
.mag-btn:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--mag-ink); }
.mag .mag-btn--play,
.mag .mag-btn--copy { background: var(--mag-ink); color: var(--mag-cream); }
.mag-btn--play:hover,
.mag-btn--copy:hover { box-shadow: 2px 2px 0 var(--mag-yellow); }

/* ---- カテゴリ ---- */
.mag-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.mag-cat { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .9rem; border: 2px solid var(--mag-ink); border-radius: 999px; background: var(--mag-paper); font-weight: 900; font-size: .86rem; }
.mag-cat span { min-width: 1.6em; padding: 0 .35em; border-radius: 999px; background: rgba(17, 17, 15, .1); font-size: .72rem; text-align: center; }
.mag-cat[aria-pressed="true"] { background: var(--mag-ink); color: var(--mag-cream); }
.mag-cat[aria-pressed="true"] span { background: var(--mag-yellow); color: var(--mag-ink); }
.mag-note { margin-top: .7rem !important; color: var(--mag-muted); font-size: .82rem; }

/* ---- プリセット ---- */
.mag-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; max-height: 9.5rem; overflow-y: auto; padding: .15rem; }
.mag-preset { min-height: 2.25rem; padding: .25rem .7rem; border: 1.5px solid rgba(17, 17, 15, .45); border-radius: 6px; background: #fff; font-size: .8rem; font-weight: 700; line-height: 1.3; }
.mag-preset:hover { border-color: var(--mag-ink); background: var(--mag-cream); }
.mag-preset[aria-pressed="true"] { border-color: var(--mag-ink); background: var(--mag-yellow); box-shadow: 2px 2px 0 var(--mag-ink); }

/* ---- プレビュー ---- */
.mag-stage-wrap { margin-top: 1rem; }
.mag-stage {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 2rem 1rem;
    overflow: hidden;
    border: 2px solid var(--mag-ink);
    border-radius: 10px 10px 0 0;
    background-color: var(--mag-cream);
    background-image: radial-gradient(rgba(17, 17, 15, .12) 1px, transparent 1px);
    background-size: 16px 16px;
}
.mag-stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .6rem .75rem; border: 2px solid var(--mag-ink); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; }
.mag-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.mag-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--mag-blue); }

/* プレビューの見本の要素 */
.mag-demo--box { width: 96px; height: 96px; border: 2px solid var(--mag-ink); border-radius: 14px; background: var(--mag-yellow); box-shadow: 4px 4px 0 var(--mag-ink); }
.mag-demo--button,
.mag-stage .mag-demo--button { display: inline-flex; align-items: center; padding: .85rem 1.8rem; border: 2px solid var(--mag-ink); border-radius: 999px; background: var(--mag-paper); color: var(--mag-ink); font-weight: 900; cursor: pointer; }
.mag-stage[data-cat="entrance"] .mag-demo--button,
.mag-stage[data-cat="loop"] .mag-demo--button { background: var(--mag-blue); color: #fff; }
.mag-demo--heading { font-family: "Archivo Black", "Noto Sans JP", sans-serif; font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: .04em; }
.mag-demo--card { display: grid; width: 180px; overflow: hidden; border: 2px solid var(--mag-ink); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 var(--mag-ink); }
.mag-demo-card-img { display: block; height: 96px; background: linear-gradient(135deg, var(--mag-blue), #6b8ff0); }
.mag-demo-card-text { padding: .6rem .8rem; font-size: .82rem; font-weight: 700; }
.mag-demo--link { color: var(--mag-ink); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.mag-demo--text { max-width: 100%; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.mag-demo--text > span { display: inline-block; }

/* ---- 設定 ---- */
.mag-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1.2rem; margin-top: 1.1rem; }
.mag-field { display: grid; gap: .25rem; min-width: 0; }
.mag-label { font-size: .78rem; font-weight: 900; }
.mag-range { display: grid; grid-template-columns: 1fr 4.2rem auto; align-items: center; gap: .5rem; }
.mag-range input[type="range"] { width: 100%; margin: 0; accent-color: var(--mag-blue); }
.mag input[type="number"],
.mag input[type="text"],
.mag select { width: 100%; min-height: 2.4rem; padding: .3rem .5rem; border: 1.5px solid var(--mag-ink); border-radius: 6px; background: #fff; font-size: .86rem; }
.mag input[type="color"] { width: 100%; height: 2.4rem; padding: .15rem; border: 1.5px solid var(--mag-ink); border-radius: 6px; background: #fff; cursor: pointer; }
.mag-unit { color: var(--mag-muted); font-size: .78rem; font-weight: 700; }

/* ---- イージング ---- */
.mag-ease { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1.5px dashed rgba(17, 17, 15, .3); }
.mag-field--ease { max-width: 360px; }
.mag-bezier { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 1rem 1.25rem; align-items: start; margin-top: .8rem; }
.mag-bezier-svg { width: 100%; height: auto; overflow: visible; touch-action: none; }
.mag-bz-area { fill: var(--mag-cream); stroke: rgba(17, 17, 15, .35); stroke-width: 1; }
.mag-bz-diag { stroke: rgba(17, 17, 15, .25); stroke-dasharray: 4 4; }
.mag-bz-arm { stroke: var(--mag-blue); stroke-width: 1.5; }
.mag-bz-curve { fill: none; stroke: var(--mag-ink); stroke-width: 3; stroke-linecap: round; }
.mag-bz-handle { fill: var(--mag-yellow); stroke: var(--mag-ink); stroke-width: 2; cursor: grab; }
.mag-bz-handle:active { cursor: grabbing; }
.mag-bz-text { fill: var(--mag-muted); font-size: 10px; font-weight: 700; }
.mag-bz-side { display: grid; gap: .8rem; align-content: start; }
.mag-bz-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.mag-bz-num { display: grid; gap: .15rem; font-size: .74rem; font-weight: 900; }
.mag-bz-race { display: grid; gap: .45rem; }
.mag-bz-lane { position: relative; height: 26px; border-radius: 999px; background: var(--mag-cream); }
.mag-bz-lane em { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); color: var(--mag-muted); font-size: .7rem; font-style: normal; font-weight: 700; }
.mag-bz-dot { position: absolute; top: 6px; left: 0; width: 14px; height: 14px; border: 2px solid var(--mag-ink); border-radius: 50%; background: #fff; }
.mag-bz-dot.is-ease { background: var(--mag-yellow); }
.mag-bz-side .mag-btn { justify-self: start; }

/* ---- 出力 ---- */
.mag-out { margin-top: 1.25rem; }
.mag-out-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.mag-out-tab { min-height: 2.25rem; padding: .3rem .8rem; border: 2px solid var(--mag-ink); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--mag-cream); font-size: .78rem; font-weight: 900; }
.mag-out-tab[aria-pressed="true"] { background: var(--mag-ink); color: var(--mag-cream); }
.mag pre.mag-code { max-height: 340px; margin: 0; overflow: auto; padding: 1rem 1.1rem; border: 2px solid var(--mag-ink); border-radius: 0 8px 8px 8px; background: var(--mag-ink); color: var(--mag-cream); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.7; letter-spacing: 0; white-space: pre; tab-size: 2; }
.mag-out-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.mag-copy-msg { color: var(--mag-blue); font-size: .8rem; font-weight: 900; }
.mag-out-bar .mag-check { margin-left: auto; }

@media (max-width: 560px) {
    .mag { margin-inline: calc(var(--journey-pad, 1.25rem) * -0.5); box-shadow: 4px 4px 0 var(--mag-ink); }
    .mag-bezier { grid-template-columns: 1fr; }
    .mag-bezier-svg { max-width: 200px; justify-self: center; }
    .mag-out-bar .mag-check { margin-left: 0; }
}