/**
 * 피부클리닉 — 모바일·태블릿 하단 고정 예약·상담 바 (전 페이지, head.php에서 로드)
 * palette: #F8F5EF #E8DED2 #D8C7B1 #222222 #555555
 */

body.skin-clinic-body .skin-clinic-mcta {
    display: none !important;
}

.skin-clinic-mcta {
    display: none;
}

@media screen and (max-width: 1024px) {
    body.skin-clinic-body .skin-clinic-mcta {
        display: none !important;
    }

    /**
     * (미사용) 하단 mcta — tail sticky CTA(3버튼)로 통일
     */
    .skin-clinic-mcta {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 100002;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        background: rgba(248, 245, 239, 0.97);
        border-top: 1px solid #e8ded2;
        box-shadow: 0 -8px 28px rgba(34, 34, 34, 0.08);
        backdrop-filter: blur(10px);
    }

    .skin-clinic-mcta-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
    }

    .skin-clinic-mcta-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 48px;
        padding: 8px 6px;
        box-sizing: border-box;
        border-radius: 12px;
        border: 1px solid #e8ded2;
        background: #fefdfb;
        color: #222222;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.2;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 2px 10px rgba(34, 34, 34, 0.05);
        transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.3s ease;
    }

    .skin-clinic-mcta-item--reserve {
        background: #222222;
        border-color: #222222;
        color: #f8f5ef;
        box-shadow: 0 4px 14px rgba(34, 34, 34, 0.2);
    }

    .skin-clinic-mcta-ic {
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .skin-clinic-mcta-item--reserve .skin-clinic-mcta-ic {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='15' rx='2' stroke='%23F8F5EF' stroke-width='1.5'/%3E%3Cpath stroke='%23F8F5EF' stroke-width='1.5' stroke-linecap='round' d='M8 3v4M16 3v4M4 11h16'/%3E%3C/svg%3E");
    }

    .skin-clinic-mcta-item:not(.skin-clinic-mcta-item--reserve) .skin-clinic-mcta-ic--tel {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M8.5 3h7l1.5 4.5-3 2c2 4 5 7 9 9l2-3L21 15h-7.5A9.5 9.5 0 018.5 3z'/%3E%3C/svg%3E");
    }

    .skin-clinic-mcta-item:not(.skin-clinic-mcta-item--reserve) .skin-clinic-mcta-ic--kakao {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M12 5c-3.5 0-6.5 2.2-6.5 5.2 0 2 1.2 3.7 3 4.7L7 19l3.5-1.7c.5.1 1 .2 1.5.2 3.5 0 6.5-2.2 6.5-5.2S15.5 5 12 5z'/%3E%3C/svg%3E");
    }

    .skin-clinic-mcta-label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    @media (hover: hover) and (pointer: fine) {
        .skin-clinic-mcta-item:not(.skin-clinic-mcta-item--reserve):hover {
            border-color: #d8c7b1;
            background: #f8f5ef;
            box-shadow: 0 4px 14px rgba(34, 34, 34, 0.08);
        }

        .skin-clinic-mcta-item--reserve:hover {
            background: #1a1a1a;
            border-color: #1a1a1a;
            box-shadow: 0 6px 18px rgba(34, 34, 34, 0.24);
        }
    }

    .skin-clinic-mcta-item:active {
        transform: translateY(1px);
    }

    .skin-clinic-mcta-item:focus {
        outline: none;
    }

    .skin-clinic-mcta-item:focus-visible {
        outline: 3px solid #222222;
        outline-offset: 2px;
    }

    .skin-clinic-mcta-item--reserve:focus-visible {
        outline: 3px solid #f8f5ef;
        outline-offset: 2px;
        box-shadow: 0 0 0 1px #222222;
    }

    /* 본문 하단 여백: css/sticky-cta.css(고정 예약 바 + 본 바)에서 통합 처리 */
}

@media screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 460px) {
    .skin-clinic-mcta-inner {
        gap: 6px;
    }

    .skin-clinic-mcta-item {
        flex-direction: row;
        gap: 8px;
        min-height: 44px;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .skin-clinic-mcta-label {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skin-clinic-mcta-item {
        transition: none;
    }

    .skin-clinic-mcta-item:active {
        transform: none;
    }
}