/* ==============================
   assets/css/common.css
   フロントと管理画面の両方で使う部品。tokens.css のあとに読む
   フロントだけのものは front.css、管理画面だけのものは admin.css へ
   部品を足すときは、先に ds/PROJECT.md に決定事項を書いてから、ここに移す
   ============================== */

/* ---- 強調ボタン（金属の削り出し） ----
   いちばん強いボタン。フロントでは、いちばん押してほしいボタンだけに使う
   管理画面では「サイトを開く」だけに使う（2026-10-21）
   決まるまでの流れは ds/PROJECT.md「部品：強調ボタン」 */
.button-metal {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 180px; min-height: 56px; padding: 0 36px;
    border: 0; border-radius: 999px;
    color: var(--color-ink);
    font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .04em;
    text-decoration: none;   /* リンク（<a>）で作っても下線を出さない */
    cursor: pointer;
    /* 薄グレー → 白 → 薄グレー → 濃いグレー。いちばん明るい光は左から30% */
    background: linear-gradient(90deg, #A9AAAC 0%, #E1E1E2 30%, #AEAFB1 56%, #BBBCBE 70%, #87888B 100%);
    /* 右下に濃いめの影、左上に白い光。白い部分のふくらみを、ボタン全体の存在感で受け止める */
    box-shadow:
        6px 6px 14px rgba(100, 90, 75, .55),
        -5px -5px 12px rgba(255, 255, 255, .7),
        inset 1px 1px 0 rgba(255, 255, 255, .8),
        inset -1px -1px 0 rgba(26, 34, 54, .08);
    transition: box-shadow .15s, filter .15s;
}
.button-metal:hover { filter: brightness(1.03); }

/* 押した状態：光を左右反転し、内側に沈める */
.button-metal:active {
    background: linear-gradient(90deg, #87888B 0%, #BBBCBE 30%, #AEAFB1 44%, #D6D6D7 70%, #A9AAAC 100%);
    box-shadow:
        inset 4px 4px 9px rgba(120, 110, 95, .35),
        inset -4px -4px 9px rgba(255, 255, 255, .65);
}

.button-metal:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }

/* 小さい版：特例。管理画面のヘッダーの「サイトを開く」だけに使う（2026-10-21）
   大きさに合わせて、影も小さくする */
.button-metal.is-small {
    min-width: 0; min-height: 40px; padding: 0 22px;
    font-size: 13px;
    box-shadow:
        4px 4px 9px rgba(100, 90, 75, .5),
        -3px -3px 8px rgba(255, 255, 255, .6),
        inset 1px 1px 0 rgba(255, 255, 255, .8),
        inset -1px -1px 0 rgba(26, 34, 54, .08);
}
.button-metal.is-small:active {
    box-shadow:
        inset 3px 3px 6px rgba(120, 110, 95, .35),
        inset -3px -3px 6px rgba(255, 255, 255, .6);
}