/* CVキャッチャー: スマホ（幅768px以下）のみ画面下に固定表示 */
.cvc-container { display: none; }

@media (max-width: 768px) {
    .cvc-container {
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        transition: opacity .5s, transform .5s;
    }
    .cvc-hidden { opacity: 0; pointer-events: none; transform: translateY(100%); }
    .cvc-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

    .cvc-link {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }

    .cvc-timer-bar {
        background: #333;
        color: #fff;
        text-align: center;
        padding: 6px 0;
        font-size: 13px;
        font-weight: bold;
        width: 100%;
    }
    .cvc-time-display { color: #ffeb3b; font-family: monospace; font-size: 1.1em; }

    .cvc-image {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: contain;
        vertical-align: bottom;
        display: block;
    }

    .cvc-close-btn {
        position: absolute;
        top: -24px;
        right: 0;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        border-radius: 50% 50% 0 0;
        text-align: center;
        line-height: 22px;
        font-size: 16px;
        font-family: sans-serif;
        cursor: pointer;
        z-index: 10;
        border: 1px solid rgba(255, 255, 255, .5);
        border-bottom: none;
        pointer-events: auto;
    }

    /* アニメーション */
    @keyframes cvc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
    .cvc-effect-pulse .cvc-link { animation: cvc-pulse 2s infinite; }

    @keyframes cvc-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
    .cvc-effect-shine .cvc-link::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
        transform: skewX(-25deg);
        animation: cvc-shine 4s infinite;
    }

    @keyframes cvc-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
    .cvc-effect-bounce .cvc-link { animation: cvc-bounce 3s infinite; }

    @keyframes cvc-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
    .cvc-effect-shake .cvc-link { animation: cvc-shake 2.5s infinite; }

    @keyframes cvc-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(2deg); } 40% { transform: rotate(-2deg); } 60% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } }
    .cvc-effect-swing .cvc-link { animation: cvc-swing 3s infinite; }

    /* CSSボタンモード */
    .cvc-css-btn-wrap {
        padding: 10px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }
    .cvc-css-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 60px;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 50px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s;
    }
    .cvc-css-btn:active { transform: scale(0.98); }
}