/* Kakao Pixel Pricing — Frontend v1.1.0
 * Esqueleto + resets defensivos. La tipografía por elemento se inyecta
 * scoped por instancia en una etiqueta <style> generada por el renderer.
 */

.kpp-pricing {
    --kpp-bg: #000;
    --kpp-card-bg: #141414;
    --kpp-card-border: rgba(255,255,255,0.06);
    --kpp-text: #fff;
    --kpp-text-muted: rgba(255,255,255,0.65);
    --kpp-accent: #ff5a1f;
    --kpp-accent-text: #fff;
    --kpp-button-text: #fff;
    --kpp-button-border: rgba(255,255,255,0.18);
    --kpp-radius: 20px;
    --kpp-gap: 24px;
    --kpp-min-col: 280px;

    box-sizing: border-box !important;
    background: var(--kpp-bg) !important;
    color: var(--kpp-text) !important;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 32px) !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

.kpp-pricing,
.kpp-pricing *,
.kpp-pricing *::before,
.kpp-pricing *::after { box-sizing: border-box; }

.kpp-pricing ul,
.kpp-pricing ol,
.kpp-pricing li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.kpp-pricing li::before,
.kpp-pricing li::marker { content: none !important; display: none !important; }

.kpp-pricing p,
.kpp-pricing h1, .kpp-pricing h2, .kpp-pricing h3,
.kpp-pricing h4, .kpp-pricing h5, .kpp-pricing h6 {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    text-shadow: none !important;
}

.kpp-pricing a { text-decoration: none !important; background: none; border: 0; box-shadow: none; }
.kpp-pricing svg { display: inline-block; vertical-align: middle; fill: none; }

/* Grid */
.kpp-pricing .kpp-pricing__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--kpp-min-col), 1fr));
    gap: var(--kpp-gap);
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Card */
.kpp-pricing .kpp-card {
    position: relative;
    background: var(--kpp-card-bg) !important;
    border: 1px solid var(--kpp-card-border) !important;
    border-radius: var(--kpp-radius) !important;
    padding: clamp(28px, 3vw, 40px) clamp(22px, 2.5vw, 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    transition: transform .2s ease, box-shadow .2s ease;
    color: var(--kpp-text) !important;
    margin: 0 !important;
}
.kpp-pricing .kpp-card:hover { transform: translateY(-2px); }

.kpp-pricing .kpp-card.is-recommended {
    border-color: var(--kpp-accent) !important;
    box-shadow: 0 0 0 1px var(--kpp-accent), 0 20px 60px -20px rgba(255,90,31,0.35) !important;
}

/* Ribbon */
.kpp-pricing .kpp-card__ribbon {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--kpp-accent) !important;
    color: var(--kpp-accent-text) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 6px 18px !important;
    border-radius: 999px !important;
    text-transform: uppercase;
    white-space: nowrap !important;
    line-height: 1.4;
    display: inline-block !important;
    z-index: 2;
}

/* Header */
.kpp-pricing .kpp-card__head { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.kpp-pricing .kpp-card__eyebrow {
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--kpp-text-muted) !important;
    font-weight: 500;
    line-height: 1.4;
}
.kpp-pricing .kpp-card.is-recommended .kpp-card__eyebrow { color: var(--kpp-accent) !important; }
.kpp-pricing .kpp-card__title { font-size: 28px; line-height: 1.15; color: var(--kpp-text) !important; font-weight: 700; }
.kpp-pricing .kpp-card__desc { font-size: 14px; color: var(--kpp-text-muted) !important; line-height: 1.5; }

/* Price */
.kpp-pricing .kpp-card__price { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important; }
.kpp-pricing .kpp-card__price-prefix { font-size: 12px; color: var(--kpp-text-muted) !important; letter-spacing: .15em; text-transform: uppercase; }
.kpp-pricing .kpp-card__price-amount { font-size: 56px; font-weight: 800; color: var(--kpp-text) !important; line-height: 1; letter-spacing: -0.02em; }
.kpp-pricing .kpp-card__price-suffix { font-size: 16px; color: var(--kpp-text-muted) !important; }

/* Features */
.kpp-pricing .kpp-card__features { display: flex !important; flex-direction: column !important; gap: 12px !important; flex: 1; }
.kpp-pricing .kpp-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 15px;
    line-height: 1.45;
    color: var(--kpp-text) !important;
}
.kpp-pricing .kpp-feature.is-bold .kpp-feature__text { font-weight: 700; }
.kpp-pricing .kpp-feature.is-excluded { color: var(--kpp-text-muted) !important; }
.kpp-pricing .kpp-feature.is-excluded .kpp-feature__text { opacity: .65; }

.kpp-pricing .kpp-feature__icon {
    width: 22px !important; height: 22px !important;
    border-radius: 999px !important;
    background: var(--kpp-accent) !important;
    color: var(--kpp-accent-text) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; margin-top: 1px !important;
}
.kpp-pricing .kpp-feature.is-excluded .kpp-feature__icon {
    background: rgba(255,255,255,0.08) !important;
    color: var(--kpp-text-muted) !important;
}
.kpp-pricing .kpp-feature__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.kpp-pricing .kpp-feature__dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: .7; display: block; }
.kpp-pricing .kpp-feature__text { flex: 1; color: inherit !important; }
.kpp-pricing .kpp-feature__text strong { font-weight: 700; color: inherit; }

/* Buttons */
.kpp-pricing .kpp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 22px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .15s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    cursor: pointer;
    margin-top: auto !important;
    box-shadow: none !important;
    border: 0;
}
.kpp-pricing .kpp-btn:hover { transform: translateY(-1px); }
.kpp-pricing .kpp-btn:focus-visible { outline: 2px solid var(--kpp-accent); outline-offset: 2px; }
.kpp-pricing .kpp-btn--primary { background: var(--kpp-accent) !important; color: var(--kpp-accent-text) !important; border: 0 !important; }
.kpp-pricing .kpp-btn--primary:hover { filter: brightness(1.08); background: var(--kpp-accent) !important; color: var(--kpp-accent-text) !important; }
.kpp-pricing .kpp-btn--ghost { background: transparent !important; color: var(--kpp-button-text) !important; border: 1px solid var(--kpp-button-border) !important; }
.kpp-pricing .kpp-btn--ghost:hover { border-color: var(--kpp-text) !important; background: transparent !important; color: var(--kpp-button-text) !important; }
.kpp-pricing .kpp-btn__arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.kpp-pricing .kpp-btn__arrow svg { stroke: currentColor; fill: none; }

@media (max-width: 600px) {
    .kpp-pricing { padding: 24px 12px !important; }
    .kpp-pricing .kpp-card { padding: 28px 22px !important; }
}