/*
 * 「保存」ボタン（.km-card__save。あとで行く。docs/save-later-design.md）の見た目の正本。
 * 一覧カード・記事末のおすすめ・TOP の新着・特集の店舗カード・AIブタチェの結果カードで同じ部品を使う。
 * 置き場所（どこに・どう並べるか）は、それぞれのページの CSS が持つ。状態は save-later.js が is-saved を付ける。
 * 配信: cards.css を読むページと AIブタチェ（AssetOptimizer）。以前は cards.css と recommendation-results.css に
 * 同じ指定を2回書いていて、AIブタチェだけ hover の色が無いなど、ずれ始めていた（2026-10-14 にここへまとめた）
 */
.km-card__save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid rgba(var(--km-ink-rgb), 0.3);
    border-radius: 999px;
    background: var(--km-white);
    color: var(--km-text);
    font-family: inherit;
    font-size: var(--km-font-label);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.km-card__save svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.km-card__save:hover {
    border-color: var(--km-accent);
}

.km-card__save.is-saved {
    background: var(--km-accent);
    border-color: var(--km-accent);
    color: var(--km-white);
}

.km-card__save.is-saved svg {
    fill: currentColor;
}

.km-card__save[hidden] {
    display: none;
}