/* ════════════════════════════════════════════════════════════════
   Payment v3 — 통합 페이지 (index / checkout / done)
   pyx- 토큰 시스템 (라이트 테마, Indigo 액센트)
   ════════════════════════════════════════════════════════════════ */

.pyx-wrap {
    --pyx-primary:    #4f46e5;
    --pyx-primary-dk: #4338ca;
    --pyx-primary-soft: #eef2ff;
    --pyx-prep:       #f59e0b;
    --pyx-prep-dk:    #d97706;
    --pyx-success:    #10b981;
    --pyx-success-soft: #d1fae5;
    --pyx-danger:     #ef4444;
    --pyx-danger-soft:#fee2e2;
    --pyx-warn:       #f59e0b;
    --pyx-warn-soft:  #fef3c7;
    --pyx-text:       #1e293b;
    --pyx-text-mute:  #64748b;
    --pyx-text-faint: #94a3b8;
    --pyx-bg:         #f8fafc;
    --pyx-surface:    #ffffff;
    --pyx-surface-2:  #f1f5f9;
    --pyx-border:     #e2e8f0;
    --pyx-border-dk:  #cbd5e1;
    --pyx-radius:     14px;
    --pyx-radius-sm:  10px;
    --pyx-shadow:     0 4px 20px rgba(15, 23, 42, 0.06);
    --pyx-shadow-lg:  0 10px 40px rgba(15, 23, 42, 0.10);

    width: 100%;
    margin: 0;
    padding: 24px 32px 80px;
    color: var(--pyx-text);
    font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--pyx-bg);
    min-height: 100vh;
}
.pyx-wrap, .pyx-wrap *, .pyx-wrap *::before, .pyx-wrap *::after,
.pyx-modal, .pyx-modal *, .pyx-modal *::before, .pyx-modal *::after { box-sizing: border-box; }

.pyx-text-faint { color: var(--pyx-text-faint); }
.pyx-text-mute  { color: var(--pyx-text-mute); }

/* ─── 헤더 (nhis-link/.nl-header 와 동일) ─── */
.pyx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.pyx-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pyx-header__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2d3359, #434b7c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.pyx-header h1 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.pyx-header p { margin: 0; color: var(--pyx-text-mute); font-size: 13px; }
@media (max-width: 768px) {
    .pyx-header { flex-direction: column; align-items: flex-start; padding: 16px; }
    .pyx-header h1 { font-size: 17px; }
    .pyx-header p  { font-size: 12px; }
}

.pyx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.pyx-badge--ok      { background: var(--pyx-success-soft); color: #047857; }
.pyx-badge--pending { background: var(--pyx-warn-soft);    color: #b45309; }
.pyx-badge--err     { background: var(--pyx-danger-soft);  color: #b91c1c; }
.pyx-badge--test    { background: #ede9fe; color: #6d28d9; }

/* ─── 알림 배너 ─── */
.pyx-alert {
    padding: 12px 16px;
    border-radius: var(--pyx-radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pyx-alert--err  { background: var(--pyx-danger-soft);  color: #991b1b; border: 1px solid #fca5a5; }
.pyx-alert--ok   { background: var(--pyx-success-soft); color: #065f46; border: 1px solid #6ee7b7; }
.pyx-alert--warn { background: var(--pyx-warn-soft);    color: #92400e; border: 1px solid #fcd34d; }
.pyx-alert--info { background: var(--pyx-primary-soft); color: var(--pyx-primary-dk); border: 1px solid #c7d2fe; align-items: flex-start; }
.pyx-alert--info > i { margin-top: 2px; }

/* ─── 상품 변경 모달 — 비교 카드 그리드 ─── */
.pyx-cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.pyx-cp-card {
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pyx-cp-card.is-current {
    border-color: var(--pyx-primary);
    background: var(--pyx-primary-soft);
}
.pyx-cp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.pyx-cp-card__head strong {
    font-size: 14px;
    font-weight: 700;
}
.pyx-cp-badge {
    background: var(--pyx-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
}
.pyx-cp-sub { font-size: 11px; color: var(--pyx-text-mute); }
.pyx-cp-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pyx-cp-base {
    font-size: 18px;
    font-weight: 700;
    color: var(--pyx-text);
}
.pyx-cp-base small { font-size: 11px; font-weight: 500; color: var(--pyx-text-mute); }
.pyx-cp-per {
    font-size: 11px;
    color: var(--pyx-primary);
    background: rgba(79, 70, 229, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}
.pyx-cp-org {
    font-size: 12px;
    color: var(--pyx-text-mute);
    background: var(--pyx-surface-2);
    padding: 6px 8px;
    border-radius: 4px;
}
.pyx-cp-org strong { color: var(--pyx-text); }
.pyx-cp-actions {
    margin-top: auto;
    padding-top: 8px;
}
.pyx-cp-actions .pyx-btn { width: 100%; justify-content: center; }

/* ─── 미수 즉시 재결제 버튼 (테이블 셀) ─── */
.pyx-history-table .pyx-btn--retry {
    background: var(--pyx-warn);
    color: #fff;
    border: 0;
    font-size: 11px;
    padding: 4px 8px;
}
.pyx-history-table .pyx-btn--retry:hover { background: var(--pyx-prep-dk); }

/* ─── 현재 구독 카드 ─── */
.pyx-current {
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius);
    box-shadow: var(--pyx-shadow);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.pyx-current::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pyx-primary), var(--pyx-primary-dk));
}
.pyx-current__top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.pyx-current__icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--pyx-primary-soft);
    color: var(--pyx-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.pyx-current__info { flex: 1; min-width: 0; }
.pyx-current__info strong { font-size: 17px; font-weight: 700; display: block; }
.pyx-current__sub { font-size: 12.5px; color: var(--pyx-text-mute); margin-top: 2px; }

.pyx-current__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--pyx-border);
    margin-top: 4px;
}
.pyx-current__cell label {
    display: block;
    font-size: 11.5px;
    color: var(--pyx-text-mute);
    margin-bottom: 4px;
}
.pyx-current__cell .v {
    font-size: 14px;
    font-weight: 600;
    color: var(--pyx-text);
    font-variant-numeric: tabular-nums;
}

.pyx-current__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pyx-border);
}

/* ─── 미가입 배너 ─── */
.pyx-empty {
    background: var(--pyx-surface);
    border: 2px dashed var(--pyx-border-dk);
    border-radius: var(--pyx-radius);
    padding: 36px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}
.pyx-empty i { font-size: 36px; color: var(--pyx-text-faint); margin-bottom: 8px; }
.pyx-empty .t { font-size: 16px; font-weight: 600; }
.pyx-empty .d { font-size: 13px; color: var(--pyx-text-mute); }

/* ─── 버튼 ─── */
.pyx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--pyx-border);
    background: var(--pyx-surface);
    color: var(--pyx-text);
    border-radius: var(--pyx-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    font-family: inherit;
}
/* 기본 hover — primary/danger 같이 자체 배경을 가진 변형은 제외 (white-on-gradient 가시성 보호) */
.pyx-btn:not(.pyx-btn--primary):not(.pyx-btn--danger):hover {
    background: var(--pyx-surface-2);
    border-color: var(--pyx-border-dk);
}
.pyx-btn:active { transform: translateY(1px); }
.pyx-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.pyx-btn--primary {
    background: linear-gradient(180deg, var(--pyx-primary), var(--pyx-primary-dk));
    color: #fff;
    border-color: var(--pyx-primary-dk);
}
.pyx-btn--primary:hover {
    filter: brightness(1.08);
    color: #fff;   /* gradient 위 흰 글씨 유지 */
}

.pyx-btn--ghost   { background: transparent; }
.pyx-btn--text    { background: transparent; border-color: transparent; color: var(--pyx-text-mute); }
.pyx-btn--text:hover { background: var(--pyx-surface-2); color: var(--pyx-text); }

.pyx-btn--danger  { background: var(--pyx-danger); color: #fff; border-color: var(--pyx-danger); }
.pyx-btn--danger:hover { filter: brightness(0.95); }

.pyx-btn--sm { padding: 6px 12px; font-size: 12px; }
.pyx-btn--lg { padding: 12px 22px; font-size: 14px; }

/* ─── 섹션 카드 ─── */
.pyx-section {
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius);
    box-shadow: var(--pyx-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.pyx-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pyx-border);
}
.pyx-section__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pyx-section__head h2 i { color: var(--pyx-primary); font-size: 14px; }
.pyx-section__body { padding: 18px; }
.pyx-section__body--flush { padding: 0; }

/* ─── 상품 비교표 ─── */
.pyx-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.pyx-product {
    position: relative;
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius);
    background: var(--pyx-surface);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pyx-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
    border-color: var(--pyx-border-dk);
}

/* 카드 상단 그라디언트 액센트 — 상품 type 별 색상 분기 */
.pyx-product__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pyx-primary), var(--pyx-primary-dk));
    border-radius: var(--pyx-radius) var(--pyx-radius) 0 0;
    opacity: 0.55;
    transition: opacity .18s, height .18s;
    pointer-events: none;
}
.pyx-product:hover .pyx-product__accent { opacity: 1; height: 4px; }
.pyx-product[data-product-type="prepaid_nicepay"] .pyx-product__accent {
    background: linear-gradient(90deg, var(--pyx-prep), var(--pyx-prep-dk));
}
.pyx-product[data-product-type="prepaid_cms"] .pyx-product__accent {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
}

/* 현재 가입중 — 진하게 강조 */
.pyx-product--current {
    border-color: var(--pyx-primary);
    border-width: 2px;
    padding: 21px 21px 19px;
    box-shadow: 0 10px 28px -10px rgba(79, 70, 229, 0.30);
    overflow: visible;  /* "현재 가입중" 핀 배지가 카드 위로 떠올라야 함 */
}
/* 가입중 카드는 이미 2px 풀 보더로 강조되므로 액센트 바는 숨김 (라운딩 충돌 방지) */
.pyx-product--current .pyx-product__accent { display: none; }
.pyx-product--current::before {
    content: '✓ 현재 가입중';
    position: absolute;
    top: -12px; left: 18px;
    background: linear-gradient(135deg, var(--pyx-primary), var(--pyx-primary-dk));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
    white-space: nowrap;
    z-index: 2;
}

/* badge_text 리본 (top-right) */
.pyx-product__ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.30);
    letter-spacing: 0.02em;
    z-index: 1;
}
.pyx-product__ribbon i { font-size: 9px; }

.pyx-product--discontinued { opacity: 0.65; }
.pyx-product--discontinued::after {
    content: '단종';
    position: absolute;
    top: 16px; right: 16px;
    background: var(--pyx-text-faint);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ─── 헤더 영역 ─── */
.pyx-product__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}
.pyx-product__head h3 {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0f172a;
}
.pyx-product__sub {
    font-size: 12.5px;
    color: var(--pyx-text-mute);
    line-height: 1.45;
}

.pyx-product__type {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--pyx-surface-2);
    color: var(--pyx-text-mute);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.pyx-product__type i { font-size: 10px; }
.pyx-product__type--postpaid { background: var(--pyx-primary-soft); color: var(--pyx-primary-dk); }
.pyx-product__type--prepaid  { background: #fef3c7; color: #92400e; }
.pyx-product[data-product-type="prepaid_cms"] .pyx-product__type {
    background: #dbeafe; color: #1d4ed8;
}

/* ─── 가격 영역 ─── */
.pyx-product__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-top: 1px dashed var(--pyx-border);
    border-bottom: 1px dashed var(--pyx-border);
}
.pyx-product__base {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pyx-product__amount {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.pyx-product__currency {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-right: 2px;
}
.pyx-product__base small {
    font-size: 12px;
    font-weight: 500;
    color: var(--pyx-text-mute);
    margin-left: 6px;
    line-height: 1.4;
}
.pyx-product__org {
    margin-top: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 12.5px;
    color: #065f46;
    font-weight: 600;
}
.pyx-product__org strong { font-size: 14px; color: #064e3b; }

.pyx-product__org--prepaid {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pyx-product__org-n-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pyx-product__org-n {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #1e3a8a;
    -moz-appearance: textfield;
}
.pyx-product__org-n::-webkit-outer-spin-button,
.pyx-product__org-n::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pyx-product__org-n:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.pyx-product__org-sep {
    color: #94a3b8;
    font-weight: 400;
}

/* ─── 금액 안내 (breakdown) ─── */
.pyx-breakdown {
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    padding: 4px 0 0;
    font-variant-numeric: tabular-nums;
}
.pyx-breakdown__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pyx-text-mute);
    letter-spacing: 0.02em;
    border-bottom: 1px dashed var(--pyx-border);
}
.pyx-breakdown__head i { color: var(--pyx-primary); font-size: 12px; }

.pyx-breakdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--pyx-border);
}
.pyx-breakdown__row:last-child { border-bottom: 0; }

.pyx-breakdown__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--pyx-text);
    font-weight: 600;
    line-height: 1.3;
}
.pyx-breakdown__rec-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pyx-breakdown__note {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--pyx-text-mute);
}
.pyx-breakdown__note strong { color: var(--pyx-primary); font-weight: 800; }

.pyx-breakdown__value {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--pyx-text);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.pyx-breakdown__value strong {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-right: 1px;
}

/* 합계 행 — 강조 */
.pyx-breakdown__row--total {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-top: 1.5px solid var(--pyx-primary);
}
.pyx-breakdown__row--total .pyx-breakdown__label {
    color: var(--pyx-primary-dk);
    font-weight: 800;
    font-size: 13.5px;
}
.pyx-breakdown__value--total strong {
    font-size: 20px;
    color: var(--pyx-primary-dk);
}

/* 수급자 입력 행 — 약한 배경 */
.pyx-breakdown__row--recipients {
    background: #f8fafc;
}
.pyx-breakdown__row--recipients .pyx-product__org-n {
    margin: 0 2px;
}

.pyx-product__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
}
.pyx-product__methods span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--pyx-surface);
    color: var(--pyx-text);
    border: 1px solid var(--pyx-border);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pyx-product__methods span i { color: var(--pyx-text-faint); font-size: 10px; }

.pyx-product__notes {
    font-size: 12px;
    color: var(--pyx-text-mute);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pyx-product__notes > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pyx-product__notes i { color: var(--pyx-text-faint); width: 12px; text-align: center; }

.pyx-product__actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}
.pyx-product__actions .pyx-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
}
.pyx-product__actions .pyx-btn--ghost {
    color: var(--pyx-text-mute);
}
.pyx-product__actions .pyx-btn--ghost:hover { color: var(--pyx-primary-dk); }

/* ─── 결제 이력 ─── */
.pyx-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pyx-history-table thead th {
    padding: 10px 14px;
    background: var(--pyx-surface-2);
    color: var(--pyx-text-mute);
    font-weight: 600;
    font-size: 12px;
    text-align: left;
    border-bottom: 1px solid var(--pyx-border);
}
.pyx-history-table thead th.r { text-align: right; }
.pyx-history-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pyx-border);
}
.pyx-history-table tbody td.r {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.pyx-history-table tbody tr:last-child td { border-bottom: none; }

.pyx-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.pyx-status--completed { background: var(--pyx-success-soft); color: #047857; }
.pyx-status--pending   { background: var(--pyx-warn-soft);    color: #b45309; }
.pyx-status--failed    { background: var(--pyx-danger-soft);  color: #b91c1c; }
.pyx-status--canceled  { background: var(--pyx-surface-2);    color: #64748b; }

/* ─── 모달 ─── */
.pyx-modal {
    /* .pyx-wrap 바깥(body 직속)에 마운트되므로 토큰을 모달 스코프에도 다시 정의 */
    --pyx-primary:    #4f46e5;
    --pyx-primary-dk: #4338ca;
    --pyx-primary-soft: #eef2ff;
    --pyx-success:    #10b981;
    --pyx-danger:     #ef4444;
    --pyx-text:       #1e293b;
    --pyx-text-mute:  #64748b;
    --pyx-text-faint: #94a3b8;
    --pyx-bg:         #f8fafc;
    --pyx-surface:    #ffffff;
    --pyx-surface-2:  #f1f5f9;
    --pyx-border:     #e2e8f0;
    --pyx-border-dk:  #cbd5e1;
    --pyx-radius:     14px;
    --pyx-radius-sm:  10px;
    --pyx-shadow:     0 4px 20px rgba(15, 23, 42, 0.06);
    --pyx-shadow-lg:  0 10px 40px rgba(15, 23, 42, 0.10);
    color: var(--pyx-text);
    font-family: 'Pretendard','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size: 14px;
    line-height: 1.5;

    position: fixed; inset: 0;
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.pyx-modal[hidden] { display: none; }
.pyx-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pyx-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    background: var(--pyx-surface, #fff);
    border-radius: var(--pyx-radius, 14px);
    box-shadow: var(--pyx-shadow-lg, 0 10px 40px rgba(15,23,42,0.18));
    overflow: hidden;
    animation: pyxZoom .18s ease;
}
@keyframes pyxZoom { from { opacity:0; transform: scale(.96) translateY(8px) } to { opacity:1; transform: none } }

.pyx-modal--lg .pyx-modal__panel { max-width: 880px; }
.pyx-modal--xl .pyx-modal__panel { max-width: 1100px; }

/* ─── 견적서 미리보기 모달 ─── */
.pyx-quote-preview {
	display: flex;
	flex-direction: column;
	min-height: 540px;
}
.pyx-quote-preview__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 540px;
	color: var(--pyx-text-mute);
	font-size: 14px;
}
.pyx-quote-spinner {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--pyx-border);
	border-top-color: var(--pyx-primary);
	animation: pyxQuoteSpin 0.8s linear infinite;
}
@keyframes pyxQuoteSpin { to { transform: rotate(360deg); } }
.pyx-quote-preview__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--pyx-primary-soft);
	border-radius: var(--pyx-radius-sm);
	margin-bottom: 12px;
	font-size: 13px;
}
.pyx-quote-preview__meta i { color: var(--pyx-primary); font-size: 16px; }
.pyx-quote-preview__meta strong { color: var(--pyx-text); font-weight: 800; }
.pyx-quote-preview__filename {
	margin-left: auto;
	font-family: 'JetBrains Mono','Consolas',monospace;
	font-size: 11.5px;
	color: var(--pyx-text-mute);
}
.pyx-quote-preview__frame {
	width: 100%;
	flex: 1;
	min-height: 520px;
	border: 1px solid var(--pyx-border);
	border-radius: var(--pyx-radius-sm);
	background: #f8fafc;
}
.pyx-quote-preview__note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--pyx-text-mute);
	display: flex;
	align-items: center;
	gap: 6px;
}
.pyx-quote-preview__note i { color: var(--pyx-primary); }
.pyx-quote-preview__error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 380px;
	color: var(--pyx-danger);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
.pyx-quote-preview__error i { font-size: 30px; }
.pyx-quote-preview__error small {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	color: var(--pyx-text-mute);
}

@media (max-width: 720px) {
	.pyx-quote-preview,
	.pyx-quote-preview__loading,
	.pyx-quote-preview__frame { min-height: 420px; }
	.pyx-quote-preview__filename { display: none; }
}

.pyx-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pyx-border);
}
.pyx-modal__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pyx-modal__close {
    width: 32px; height: 32px;
    border: none; background: transparent;
    border-radius: 50%; cursor: pointer;
    color: var(--pyx-text-mute);
}
.pyx-modal__close:hover { background: var(--pyx-surface-2); color: var(--pyx-text); }
.pyx-modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.pyx-modal__foot {
    padding: 12px 20px;
    background: var(--pyx-surface-2);
    border-top: 1px solid var(--pyx-border);
    display: flex; justify-content: flex-end; gap: 8px;
}
.pyx-modal__foot:empty { display: none; }

/* ─── 폼 ─── */
.pyx-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.pyx-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pyx-text-mute);
}
.pyx-field input, .pyx-field select, .pyx-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    font-size: 13px;
    background: var(--pyx-surface);
    transition: border-color .15s;
    font-family: inherit;
}
.pyx-field input:focus, .pyx-field select:focus, .pyx-field textarea:focus {
    outline: none;
    border-color: var(--pyx-primary);
}
.pyx-field-hint { font-size: 11.5px; color: var(--pyx-text-faint); }

/* 2열 그리드 — 짧은 입력 필드 묶기. 좁아지면 1열로 자동 전환 */
.pyx-fields-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}
.pyx-fields-2col > .pyx-field { margin-bottom: 12px; }
.pyx-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .pyx-fields-2col { grid-template-columns: 1fr; }
}

/* 체크아웃 7:3 그리드 — 좌(70%): 결제자/추가옵션/약관 / 우(30%): 결제수단/주문요약/Submit */
/* align-items 기본값(stretch)로 두 컬럼 높이 맞춤 → 우측 Submit 이 margin-top:auto 로 col 하단에 고정 */
.pyx-checkout-grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 18px;
    margin-bottom: 4px;
}
.pyx-checkout-grid__col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.pyx-checkout-grid .pyx-section { margin-bottom: 0; }
@media (max-width: 900px) {
    .pyx-checkout-grid { grid-template-columns: 1fr; }
}

/* ════════ 체크아웃 v2 — 좌: PDF (sticky, 4) / 우: 폼 입력 (6) ════════ */
.pyc-checkout-v2 {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 18px;
    margin-bottom: 4px;
    align-items: start;
}
.pyc-checkout-v2__pdf {
    position: sticky;
    top: 16px;
    align-self: start;
    min-width: 0;
}
.pyc-checkout-v2__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pyc-checkout-v2 .pyx-section { margin-bottom: 0; }

.pyc-pdf-iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 80px);
    min-height: 600px;
    border: 0;
    background: transparent;
}

/* 서명 블록 — 서명 버튼 + 상태 */
.pyc-sign-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--pyx-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pyc-sign-block__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pyx-text);
    margin: 0;
}
.pyc-sign-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
}
.pyc-sign-status {
    font-size: 12px;
    line-height: 1.55;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid var(--pyx-primary);
    color: var(--pyx-text-mute);
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1100px) {
    .pyc-checkout-v2 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
@media (max-width: 900px) {
    .pyc-checkout-v2 { grid-template-columns: 1fr; }
    .pyc-checkout-v2__pdf {
        position: static;
    }
    .pyc-pdf-iframe { height: 480px; min-height: 420px; }
}

/* 주문 요약 (우측 col) */
.pyx-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}
.pyx-summary__product {
    font-size: 14px;
    font-weight: 700;
    color: var(--pyx-text);
    line-height: 1.35;
}
.pyx-summary__sub {
    font-size: 12px;
    color: var(--pyx-text-mute);
    margin-top: -4px;
    margin-bottom: 4px;
}
.pyx-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--pyx-text-mute);
    gap: 8px;
}
.pyx-summary__row > span:last-child {
    color: var(--pyx-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.pyx-summary__divider {
    border-top: 1px dashed var(--pyx-border);
    margin: 4px 0;
}
.pyx-summary__row--total > span:first-child {
    color: var(--pyx-text);
    font-weight: 700;
    font-size: 14px;
}
.pyx-summary__row--total > span:last-child {
    color: var(--pyx-primary);
    font-size: 18px;
    font-weight: 800;
}
.pyx-summary__row--total small {
    font-size: 11px;
    color: var(--pyx-text-mute);
    font-weight: 500;
}

/* 우측 col — 결제수단 + 주문요약을 한 카드로 묶을 때 두 번째 head 위에 구분선 */
.pyx-side-card .pyx-section__head:not(:first-child) {
    border-top: 1px solid var(--pyx-border);
}

/* Submit 영역 — 우측 col 하단 (mt:auto 로 col 끝까지 밀려남) */
.pyx-checkout-submit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}
.pyx-checkout-submit .pyx-btn {
    width: 100%;
    justify-content: center;
}

/* 결제수단 카드 (라디오 숨기고 선택 카드 강조) */
.pyx-method-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.pyx-method-card {
    position: relative;
    cursor: pointer;
    display: block;
}
.pyx-method-card input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pyx-method-card__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    border: 2px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    background: var(--pyx-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--pyx-text);
    transition: border-color .15s, background .15s, color .15s;
    text-align: center;
    min-height: 56px;
}
.pyx-method-card__inner i { font-size: 20px; color: var(--pyx-text-mute); transition: color .15s; }
.pyx-method-card:hover .pyx-method-card__inner {
    border-color: var(--pyx-border-dk);
    background: var(--pyx-surface-2);
}
.pyx-method-card input:checked ~ .pyx-method-card__inner {
    border-color: var(--pyx-primary);
    background: var(--pyx-primary-soft);
    color: var(--pyx-primary-dk);
}
.pyx-method-card input:checked ~ .pyx-method-card__inner i {
    color: var(--pyx-primary);
}
.pyx-method-card input:focus-visible ~ .pyx-method-card__inner {
    outline: 2px solid var(--pyx-primary);
    outline-offset: 2px;
}

.pyx-radio-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pyx-radio-group label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    background: var(--pyx-surface);
}
.pyx-radio-group label:hover { background: var(--pyx-surface-2); }
.pyx-radio-group label:has(input:checked) {
    background: var(--pyx-primary-soft);
    border-color: var(--pyx-primary);
    color: var(--pyx-primary-dk);
    font-weight: 600;
}

/* ─── 토스트 ─── */
.pyx-toast {
    position: fixed;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
    padding: 12px 20px;
    background: #1e293b;
    color: #fff;
    border-radius: var(--pyx-radius-sm);
    font-size: 13px;
    box-shadow: var(--pyx-shadow-lg);
    animation: pyxToast .2s ease;
}
.pyx-toast--ok   { background: var(--pyx-success); }
.pyx-toast--err  { background: var(--pyx-danger); }
.pyx-toast--warn { background: #f59e0b; color: #422006; }
@keyframes pyxToast { from { opacity:0; transform: translate(-50%,8px) } to { opacity:1; transform: translate(-50%,0) } }
@keyframes pyxShake { 0%,100% {transform:translateX(0)} 25% {transform:translateX(-6px)} 75% {transform:translateX(6px)} }

/* ─── 반응형 ─── */
@media (max-width: 700px) {
    .pyx-wrap { padding: 16px; }
    .pyx-products { grid-template-columns: 1fr; }
    .pyx-current__top { flex-direction: column; }
}

/* ─── 체크박스 동의 ─── */
.pyx-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--pyx-surface-2);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius-sm);
    margin: 12px 0;
}
.pyx-consent input { margin-top: 2px; accent-color: var(--pyx-primary); }
.pyx-consent label { font-size: 12.5px; color: var(--pyx-text); cursor: pointer; flex: 1; }
.pyx-consent a { color: var(--pyx-primary); text-decoration: underline; }

/* ─── 간단 노트 ─── */
.pyx-note {
    padding: 10px 14px 10px 40px;
    background: var(--pyx-surface-2);
    border-radius: var(--pyx-radius-sm);
    font-size: 12.5px;
    color: var(--pyx-text-mute);
    margin: 12px 0;
    position: relative;
}
.pyx-note i {
    position: absolute;
    left: 14px; top: 12px;
    color: var(--pyx-primary);
    font-size: 14px;
}
.pyx-note strong { color: var(--pyx-text); }


/* =====================================================
   payment/index.php — 플랜 업그레이드 (신규 디자인)
   .up- 프리픽스, ChatGPT 스타일 4-card grid
   ===================================================== */
.up-wrap {
	min-height: 100vh;
	background: #fff;
	padding: 64px 28px 80px;
	width: 100%;
	box-sizing: border-box;
}
.up-title {
	text-align: center;
	font-size: 32px;
	font-weight: 800;
	color: #0d0d0d;
	letter-spacing: -0.02em;
	margin: 0 0 56px;
}
.up-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
	align-items: stretch;
}
.up-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.up-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 18px;
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.up-card:hover { border-color: #d4d4d4; }
.up-card.is-current {
	border-color: #c4b5fd;
	background: #fafaff;
}
.up-card.is-deprecated { opacity: 0.55; }
.up-badge {
	position: absolute;
	top: 20px;
	right: 22px;
	background: #ddd6fe;
	color: #5b21b6;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.up-card__head { margin-bottom: 4px; }
.up-name {
	font-size: 27px;
	font-weight: 700;
	color: #0d0d0d;
	margin: 0;
	letter-spacing: -0.015em;
}
.up-tagline {
	font-size: 14px;
	color: #525252;
	margin: 4px 0 0;
	line-height: 1.4;
}
.up-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin: 4px 0 8px;
}
.up-cur { font-size: 15.5px; font-weight: 600; color: #0d0d0d; }
.up-amount {
	font-size: 42px;
	font-weight: 700;
	color: #0d0d0d;
	letter-spacing: -0.02em;
	line-height: 1;
}
.up-period {
	font-size: 15.5px;
	color: #737373;
	font-weight: 600;
	margin-left: 4px;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.up-period__sub { color: #a3a3a3; font-weight: 500; font-size: 12px; }
.up-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, opacity 0.15s;
	box-sizing: border-box;
	margin-top: 4px;
}
.up-cta--primary { background: #0d1530; color: #fff; }
.up-cta--primary:hover { background: #1a2347; }
.up-cta--popular { background: #7c3aed; color: #fff; }
.up-cta--popular:hover { background: #6d28d9; }
.up-cta--current,
.up-cta--disabled {
	background: #f5f5f5;
	color: #a3a3a3;
	cursor: not-allowed;
	pointer-events: none;
}
.up-features {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.up-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #404040;
	line-height: 1.5;
}
.up-features li i {
	color: #525252;
	font-size: 14px;
	width: 16px;
	text-align: center;
	margin-top: 2px;
	flex-shrink: 0;
}
.up-terms {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	color: #737373;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.up-terms:hover { color: #404040; }
.up-footnote {
	max-width: 1280px;
	margin: 32px auto 0;
	text-align: center;
	font-size: 13px;
	color: #737373;
}
.up-footnote a { color: #7c3aed; text-decoration: underline; }
.up-toast {
	max-width: 720px;
	margin: 16px auto 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.up-toast--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.up-toast--ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

@media (max-width: 1100px) {
	.up-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.up-wrap { padding: 40px 16px 56px; }
	.up-title { font-size: 26px; margin-bottom: 32px; }
	.up-grid,
	.up-grid--2col,
	.up-grid--3col,
	.up-grid--4col { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
   Payment v4 — 결제 예정 금액 계산 카드 (단일 카드)
   pyx- 토큰 활용, py-calc-* prefix
   ════════════════════════════════════════════════════════════════ */

.pyx-wrap .py-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pyx-text);
    margin: 0 0 4px 0;
}
.pyx-wrap .py-page-sub {
    font-size: 13px;
    color: var(--pyx-text-mute);
    margin: 0 0 24px 0;
}

.py-calc-card {
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: var(--pyx-radius);
    box-shadow: var(--pyx-shadow);
    overflow: hidden;
    max-width: 720px;
}

.py-calc-head {
    padding: 24px 26px;
    border-bottom: 1px solid var(--pyx-border);
    font-size: 22px;
    font-weight: 700;
    color: var(--pyx-text);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pyx-surface-2);
    letter-spacing: -0.01em;
}
.py-calc-head i {
    color: var(--pyx-primary);
    font-size: 20px;
}
.py-calc-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.py-calc-body { padding: 8px 0; }

.py-calc-loading {
    padding: 48px 20px;
    text-align: center;
    color: var(--pyx-text-mute);
    font-size: 14px;
}
.py-calc-loading i { margin-right: 6px; color: var(--pyx-primary); }

.py-calc-error {
    padding: 24px 22px;
    color: var(--pyx-danger);
    font-size: 14px;
    background: var(--pyx-danger-soft);
}

.py-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 22px;
    gap: 16px;
}
.py-calc-row small {
    color: var(--pyx-text-faint);
    font-size: 11px;
    margin-left: 4px;
    font-weight: 400;
}
.py-calc-key {
    color: var(--pyx-text);
    font-size: 14px;
    font-weight: 500;
}
.py-calc-val {
    color: var(--pyx-text);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
}

.py-calc-row--sub {
    padding-top: 2px;
    padding-bottom: 10px;
}
.py-calc-row--sub .py-calc-key,
.py-calc-row--sub .py-calc-val {
    color: var(--pyx-text-mute);
    font-size: 13px;
    font-weight: 500;
}

/* 할인 줄 — 기본 요금에 적용된 할인 차감액 */
.py-calc-row--discount .py-calc-val {
    color: #10b981;
    font-weight: 600;
}

/* 일할 정산 줄 — 지난 달 mid-cycle 변동 보정 */
.py-calc-row--proration {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0.02));
    border-left: 3px solid #f97316;
}
.py-calc-row--proration .py-calc-key {
    color: #c2410c;
}
.py-calc-row--proration .py-calc-key i {
    margin-right: 4px;
    color: #f97316;
}
.py-calc-row--proration .py-calc-val {
    color: #c2410c;
    font-weight: 700;
}

.py-calc-divider {
    height: 1px;
    background: var(--pyx-border);
    margin: 4px 0;
}

.py-calc-row--total {
    padding: 18px 22px;
    background: var(--pyx-primary-soft);
}
.py-calc-row--total .py-calc-key {
    font-size: 15px;
    font-weight: 700;
}
.py-calc-row--total .py-calc-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--pyx-primary);
}

/* 마스터 모드 배너 — 첫 admin 회원 자동 선택 시 표시 */
.py-calc-master-banner {
    margin: 8px 22px 12px;
    padding: 10px 14px;
    background: var(--pyx-warn-soft);
    border: 1px solid var(--pyx-warn);
    border-radius: var(--pyx-radius-sm);
    color: var(--pyx-prep-dk);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.py-calc-master-banner i { color: var(--pyx-warn); }
.py-calc-master-banner strong {
    color: var(--pyx-prep-dk);
    margin-right: 4px;
}
.py-calc-master-target {
    color: var(--pyx-text-mute);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.py-calc-master-target code {
    background: rgba(0,0,0,0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.py-calc-error-debug {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    font-size: 12px;
    color: var(--pyx-text-mute);
    font-weight: 400;
}
.py-calc-error-debug code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════
   결제 히어로 구독 카드 — 그라데이션 (py-hero-* prefix)
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   통합 결제 카드 (.py-card)
   ── 좌(features) + 우(가격 sticky) 한 박스 — SaaS 가격 페이지 패턴.
   ── 풀와이드 — 메인 콘텐츠 영역 전체를 채움.
   ════════════════════════════════════════════════════════════════ */
.py-card {
    width: 100%;
    margin: 0 0 36px;
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10),
                0 4px 12px rgba(15, 23, 42, 0.04);
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    /* overflow: hidden 은 의도적으로 제거 — 자식 sticky 가 깨지지 않도록.
       대신 좌·우 자식이 카드 모서리를 따라가도록 각자 border-radius 부여. */
    position: relative;
}
@media (max-width: 960px) {
    .py-card { grid-template-columns: 1fr; }
}

/* ── 좌측: 기능 영역 ──────────────────────────────────────── */
.py-card__features {
    padding: 38px 36px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border-radius: 24px 0 0 24px;
    min-width: 0;
}
@media (max-width: 960px) {
    .py-card__features { border-radius: 24px 24px 0 0; }
}
@media (max-width: 600px) {
    .py-card__features { padding: 26px 20px 24px; }
}
.py-card__title {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}
@media (max-width: 600px) {
    .py-card__title { font-size: 24px; }
}
.py-card__title-accent {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.py-card__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    max-width: 540px;
}

/* 좌측 내부의 기능 그리드/혜택 — 외곽 박스 제거 (카드에 흡수) */
.py-card .py-inc {
    max-width: none;
    margin: 0;
    padding: 0;
}
.py-card .py-inc__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
@media (max-width: 520px) {
    .py-card .py-inc__grid { grid-template-columns: 1fr; }
}

/* 우측 카드 — CTA + 액션 + 힌트 */
.py-calc-action-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid #bbf7d0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    color: #047857;
    margin-bottom: 14px;
}
.py-calc-action-cta i {
    font-size: 15px;
    color: #10b981;
    flex-shrink: 0;
}
.py-calc-action-hint {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}
.py-calc-action-hint strong {
    color: #6366f1;
    font-weight: 700;
}
@media (max-width: 960px) {
    /* 모바일 — 좌측이 위로 가니 "좌측 안내" 힌트가 어색 → 숨김 */
    .py-calc-action-hint { display: none; }
}

/* ── 우측: 가격 sticky 카드 ───────────────────────────────── */
.py-card__pricing {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    border-left: 1px solid var(--pyx-border);
    border-radius: 0 24px 24px 0;
    padding: 28px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
}
@media (max-width: 960px) {
    /* 모바일 — features 가 위, 가격 카드가 아래 (1열 스택). features 는 icon+title 만이라 모바일에서도 컴팩트. */
    .py-card__pricing {
        border-left: none;
        border-top: 1px solid var(--pyx-border);
        border-radius: 0 0 24px 24px;
        padding: 20px;
    }
}
@media (max-width: 768px) {
    /* ── 모바일 — 우측 "결제 카드(가격)"만 노출. 좌측 기능/안내 영역은 숨김. ──
       PC 우측 패널과 동일한 둥근 카드 형태로 정돈 (가장자리 풀폭 띠 제거). */
    /* 좌우 여백 거의 제거 — 카드가 화면 폭을 거의 다 쓰도록 (좌우 2px) */
    .pyx-wrap { padding-left: 2px; padding-right: 2px; }
    .py-card__features { display: none; }
    .py-card {
        display: block;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .py-card__pricing {
        padding: 0;
        background: transparent;
        border: none;
        border-top: none;
        border-radius: 0;
    }
    .py-card__pricing-card {
        position: static;
        top: auto;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        box-shadow: 0 14px 32px rgba(99, 102, 241, 0.10),
                    0 0 0 1px rgba(99, 102, 241, 0.04);
        overflow: hidden;
    }
    /* 산정 내역 — 라벨/금액은 한 줄, 보조설명(small)은 라벨 아래로 떨어뜨려 정돈 */
    .py-card__pricing-card .py-calc-row { align-items: flex-start; }
    .py-card__pricing-card .py-calc-row small {
        display: block;
        margin-left: 0;
        margin-top: 3px;
        line-height: 1.45;
    }
    .py-card__pricing-card .py-calc-key { line-height: 1.4; }

    /* "결제금액 산정 내역" 제목 숨김 */
    .py-card__pricing-card .py-hero-section-title { display: none; }
    /* 좌우 이중 패딩(본문 22px + 행 22px) 제거 — 내용은 좌측 끝, 금액은 우측 끝으로 */
    .py-card__pricing-card .py-hero-body { padding-left: 2px; padding-right: 2px; }
    .py-card__pricing-card .py-calc-row { padding-left: 10px; padding-right: 10px; }
    .py-card__pricing-card .py-calc-row--total { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) {
    /* 초소형 화면 — 카드 내부 여백·금액 폰트 축소 */
    .py-card__pricing-card .py-hero-amount-value { font-size: 32px; }
    .py-card__pricing-card .py-hero-head { padding: 20px 18px 22px; }
    .py-card__pricing-card .py-hero-body { padding: 6px 18px 8px; }
    .py-card__pricing-card .py-hero-side { padding: 18px 18px 20px; }
}
.py-card__pricing-card {
    position: sticky;
    top: 24px;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(99, 102, 241, 0.10),
                0 0 0 1px rgba(99, 102, 241, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 한글이 음절 중간에서 끊기지 않도록 — 공백/어절 단위로만 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 우측 가격 카드 내부 — hero 컴포넌트 재배치 */
.py-card__pricing-card .py-hero-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.py-card__pricing-card .py-hero-side {
    background: transparent;
    border-left: none;
    border-top: 1px solid var(--pyx-border);
    padding: 22px 22px 24px;
}
.py-card__pricing-card .py-hero-head {
    padding: 22px 22px 24px;
}
.py-card__pricing-card .py-hero-amount-value {
    font-size: 36px;
}
.py-card__pricing-card .py-hero-body {
    padding: 6px 22px 8px;
}
.py-card__pricing-card .py-hero-section-title {
    padding: 6px 0 4px;
}

/* 좌측 features 위에 padding 정리 — 좌상단 헤더와 시각적 균형 */
@media (max-width: 960px) {
    .py-card__pricing-card { position: static; top: auto; }
    .py-card__pricing { padding: 20px; }
}

/* 결제 hero — 좌(산정내역) 1 / 우(액션) 1 비율 5:5 2컬럼 카드 */
.py-hero {
    max-width: 1400px;
    background: var(--pyx-surface);
    border: 1px solid var(--pyx-border);
    border-radius: 20px;
    box-shadow: var(--pyx-shadow-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
    .py-hero { grid-template-columns: 1fr; }
}
.py-hero-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.py-hero-side {
    min-width: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-left: 1px solid var(--pyx-border);
    padding: 28px 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 900px) {
    .py-hero-side {
        border-left: none;
        border-top: 1px solid var(--pyx-border);
    }
}
.py-hero-side__loading {
    text-align: center;
    color: var(--pyx-text-faint);
    font-size: 13px;
    padding: 28px 0;
}
.py-hero-side__loading i { margin-right: 6px; }

/* 사이드 패널 내부의 액션 영역 — 박스 배경 제거 + 세로 흐름 + 버튼 풀폭 */
.py-hero-side .py-hero-section--action { padding: 0; border: none; }
.py-hero-side .py-calc-action {
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    gap: 16px;
}
.py-hero-side .py-calc-action-msg {
    font-size: 14px;
    line-height: 1.65;
    color: var(--pyx-text);
    align-items: flex-start;
}
.py-hero-side .py-calc-action-msg i {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.py-hero-side .py-calc-action-sub {
    font-size: 12.5px;
    color: var(--pyx-text-mute);
    padding: 10px 12px;
    background: var(--pyx-surface-2);
    border-radius: 8px;
}
.py-hero-side .py-calc-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}
.py-hero-side .py-calc-btn {
    align-self: stretch;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
}

/* 사이드에서는 상태별 인디케이터(아이콘 색)는 유지하되 박스는 제거된 상태 */
.py-hero-side .py-calc-action--start .py-calc-action-msg i    { color: var(--pyx-primary); }
.py-hero-side .py-calc-action--pending .py-calc-action-msg i  { color: var(--pyx-prep-dk); }
.py-hero-side .py-calc-action--active .py-calc-action-msg i   { color: var(--pyx-success); }
.py-hero-side .py-calc-action--failed .py-calc-action-msg i   { color: var(--pyx-danger); }
.py-hero-side .py-calc-action--paused .py-calc-action-msg i,
.py-hero-side .py-calc-action--cancelled .py-calc-action-msg i { color: var(--pyx-text-mute); }

/* ── 사이드 패널 고도화 (미가입 상태 — 신뢰 포인트 카드 + CTA) ── */
.py-side-head { margin-bottom: 4px; }
.py-side-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: #6366f1;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.py-side-eyebrow i { font-size: 11px; }
.py-side-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.py-side-lead {
    margin: 0;
    font-size: 13px;
    color: var(--pyx-text-mute);
    line-height: 1.6;
}
.py-side-lead b { color: #4f46e5; font-weight: 700; }

.py-side-trust {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 1100px) {
    .py-side-trust { grid-template-columns: 1fr; }
}
.py-side-trust li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--pyx-border);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.py-side-trust li:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}
.py-side-trust__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}
.py-side-trust__icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.py-side-trust__icon--green  { background: linear-gradient(135deg, #10b981, #059669); }
.py-side-trust__icon--violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.py-side-trust__icon--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.py-side-trust__icon--rose   { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.py-side-trust__icon--cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.py-side-trust__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.45;
}
.py-side-trust__body b {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
.py-side-trust__body span {
    font-size: 12px;
    color: var(--pyx-text-mute);
}

/* ── 그라데이션 헤더 ── */
.py-hero-head {
    position: relative;
    padding: 26px 28px 30px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 52%, #7c3aed 100%);
    color: #fff;
    overflow: hidden;
}
.py-hero-head::after {
    content: '';
    position: absolute;
    top: -45%;
    right: -8%;
    width: 230px;
    height: 230px;
    background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 70%);
    pointer-events: none;
}
.py-hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 7px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.py-hero-badge-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.py-hero-logo {
    width: 15px;
    height: 15px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.py-hero-amount {
    position: relative;
    margin-top: 18px;
    min-height: 52px;
}
.py-hero-amount-label {
    font-size: 12.5px;
    opacity: 0.82;
    margin-bottom: 5px;
}
.py-hero-amount-value {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.py-hero-amount-note {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.92;
}
.py-hero-amount-note i {
    font-size: 11px;
}
.py-hero-amount-unit {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.78;
}
.py-hero-loading {
    font-size: 14px;
    opacity: 0.9;
    padding: 12px 0;
}
.py-hero-loading i { margin-right: 6px; }
.py-hero-error {
    font-size: 13.5px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 11px 13px;
}

/* ── 본문 섹션 ── */
.py-hero-body { padding: 4px 0 0; }
.py-hero-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--pyx-border);
}
.py-hero-section:last-child { border-bottom: none; }
.py-hero-section--action {
    padding: 0;
    border-bottom: none;
}
.py-hero-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pyx-text-faint);
    letter-spacing: 0.03em;
    padding: 0 22px 4px;
}
.py-hero-section .py-calc-row--total { margin-top: 6px; }

/* ── 기능 그리드 (구버전 — 호환용, 현재 미사용) ── */
.py-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
    padding: 8px 22px 2px;
}
.py-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pyx-text);
}
.py-feat i {
    color: var(--pyx-success);
    font-size: 14px;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .py-hero-amount-value { font-size: 32px; }
    .py-feat-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   포함 서비스 (Wide) — 1400px max-width
   py-inc__* prefix
   ════════════════════════════════════════════════════════════════ */
.py-inc {
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
}
.py-inc__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 980px) {
    .py-inc__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .py-inc__grid { grid-template-columns: 1fr; }
}

/* 카드 — icon + title 만 (단순화) */
.py-fcard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
    min-height: 72px;
}
.py-fcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border-color: #c7d2fe;
}

/* accent — 신규/AI 카드 강조 */
.py-fcard.is-accent {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border-color: #c7d2fe;
}
.py-fcard.is-accent:hover {
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.15);
}

.py-fcard__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.py-fcard.is-accent .py-fcard__icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.py-fcard__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.py-fcard__title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.py-fcard__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* 풋 — 보장 4종 */
.py-inc__foot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
@media (max-width: 800px) {
    .py-inc__foot { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .py-inc__foot { grid-template-columns: 1fr; }
}
.py-inc__foot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.py-inc__foot-item i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef2ff;
    color: #6366f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.py-inc__foot-item b {
    color: #0f172a;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   카드 하단 액션 영역 — 가입 상태별 분기
   ════════════════════════════════════════════════════════════════ */

.py-calc-action {
    margin: 8px 22px 18px;
    padding: 16px 18px;
    border-radius: var(--pyx-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.py-calc-action-msg {
    font-size: 13px;
    color: var(--pyx-text);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.6;
}
.py-calc-action-msg i { font-size: 14px; }
.py-calc-action-msg strong { font-weight: 700; }
.py-calc-action-msg code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.py-calc-action-sub {
    font-size: 12px;
    color: var(--pyx-text-mute);
}
.py-calc-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 상태별 색상 */
.py-calc-action--start {
    background: var(--pyx-primary-soft);
    border: 1px solid rgba(79, 70, 229, 0.25);
}
.py-calc-action--start .py-calc-action-msg i { color: var(--pyx-primary); }

.py-calc-action--pending {
    background: var(--pyx-warn-soft);
    border: 1px solid var(--pyx-warn);
}
.py-calc-action--pending .py-calc-action-msg i { color: var(--pyx-prep-dk); }
.py-calc-action--pending .py-calc-action-msg strong { color: var(--pyx-prep-dk); }

.py-calc-action--active {
    background: var(--pyx-success-soft);
    border: 1px solid var(--pyx-success);
}
.py-calc-action--active .py-calc-action-msg i { color: var(--pyx-success); }
.py-calc-action--active .py-calc-action-msg strong { color: #047857; }

.py-calc-action--failed {
    background: var(--pyx-danger-soft);
    border: 1px solid var(--pyx-danger);
}
.py-calc-action--failed .py-calc-action-msg i { color: var(--pyx-danger); }
.py-calc-action--failed .py-calc-action-msg strong { color: #b91c1c; }

.py-calc-action--paused {
    background: var(--pyx-surface-2);
    border: 1px solid var(--pyx-border-dk);
}
.py-calc-action--paused .py-calc-action-msg i { color: var(--pyx-text-mute); }

.py-calc-action--cancelled {
    background: var(--pyx-surface-2);
    border: 1px solid var(--pyx-border-dk);
}
.py-calc-action--cancelled .py-calc-action-msg i { color: var(--pyx-text-mute); }

/* 버튼 */
.py-calc-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--pyx-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    font-family: inherit;
}
.py-calc-btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 52%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30);
}
.py-calc-btn--primary:hover {
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.42);
    transform: translateY(-1px);
}
.py-calc-btn--ghost {
    background:
        linear-gradient(var(--pyx-surface), var(--pyx-surface)) padding-box,
        linear-gradient(135deg, #6366f1, #7c3aed) border-box;
    border: 1.5px solid transparent;
    color: var(--pyx-primary);
}
.py-calc-btn--ghost:hover {
    background:
        linear-gradient(var(--pyx-primary-soft), var(--pyx-primary-soft)) padding-box,
        linear-gradient(135deg, #6366f1, #7c3aed) border-box;
    color: var(--pyx-primary-dk);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
 *  pyq-  : 견적서 모달 (Quotation Document)
 * ───────────────────────────────────────────────────────────── */
.pyq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    backdrop-filter: blur(2px);
}
.pyq-overlay[hidden] { display: none; }

.pyq-modal {
    background: transparent;
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pyq-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.pyq-bar-btn {
    appearance: none;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: filter .15s ease;
}
.pyq-bar-btn:hover { filter: brightness(0.95); }
.pyq-bar-btn--primary { background: #4f46e5; color: #fff; }
.pyq-bar-btn--ghost   { background: #fff; color: #334155; border: 1px solid #e2e8f0; }

/* 문서 본체 — A4 느낌 */
.pyq-doc {
    background: #fff;
    color: #0f172a;
    padding: 40px 48px 36px;
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 20px 60px rgba(15, 23, 42, 0.25);
    font-family: 'Pretendard', sans-serif;
    line-height: 1.55;
    position: relative;
}

/* 상단 헤더 */
.pyq-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 22px;
    border-bottom: 3px double #0f172a;
}
.pyq-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    color: #1e293b;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.pyq-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.pyq-brand-name {
    font-weight: 800;
    color: #0f172a;
}
.pyq-doc-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    margin: 0;
    color: #0f172a;
}
.pyq-doc-subtitle {
    font-size: 12px;
    letter-spacing: 0.4em;
    color: #94a3b8;
    font-weight: 500;
}

/* 정보 그리드 — HTML table 기반 (border-collapse 로 인쇄에서도 일관된 라인) */
.pyq-info-grid {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #0f172a;
    margin-bottom: 18px;
    table-layout: fixed;
    font-size: 12px;
}
.pyq-info-grid th,
.pyq-info-grid td {
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    vertical-align: middle;
    text-align: left;
}
.pyq-info-grid th.pyq-info-k {
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 700;
    width: 100px;
    white-space: nowrap;
}
.pyq-info-grid td.pyq-info-v {
    color: #0f172a;
    background: #fff;
}
.pyq-info-v small { color: #64748b; margin-left: 4px; font-weight: 500; }
.pyq-info-v--accent {
    color: #4f46e5 !important;
    font-weight: 700;
    font-size: 13px;
}

/* 인사문 */
.pyq-greet {
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 10px;
    padding: 0 2px;
}
.pyq-greet strong { color: #0f172a; }

/* 항목 테이블 */
.pyq-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 12px;
}
.pyq-table th,
.pyq-table td {
    border: 1px solid #cbd5e1;
    padding: 7px 10px;
    text-align: center;
    vertical-align: middle;
}
.pyq-table thead th {
    background: #1e293b;
    color: #fff;
    font-weight: 700;
    border-color: #1e293b;
    letter-spacing: 0.02em;
}
.pyq-td-desc {
    text-align: left !important;
    color: #0f172a;
}
.pyq-td-desc small { color: #64748b; font-weight: 500; }
.pyq-td-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
.pyq-tr-subtotal td {
    background: #f8fafc;
    font-weight: 600;
}
.pyq-tr-total td {
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 800;
    font-size: 13px;
    border-color: #4f46e5;
}

/* 안내 문구 */
.pyq-notes {
    margin: 14px 0 18px;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 3px solid #4f46e5;
    border-radius: 0 6px 6px 0;
    font-size: 11.5px;
    color: #475569;
}
.pyq-notes p { margin: 0; line-height: 1.6; }
.pyq-notes p + p { margin-top: 3px; }

/* 하단 공급자 + 직인 */
.pyq-doc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.pyq-vendor-block {
    flex: 1;
    font-size: 11.5px;
    color: #475569;
    line-height: 1.55;
}
.pyq-vendor-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.pyq-vendor-row { color: #475569; }
.pyq-vendor-row strong { color: #1e293b; }

/* 직인 이미지 */
.pyq-stamp {
    flex-shrink: 0;
}
.pyq-stamp-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
}

/* legacy CSS 직인 — 호환용 (다른 곳에서 .pyq-stamp-circle 사용 시) */
.pyq-stamp-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid #dc2626;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: #dc2626;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.05em;
    transform: rotate(-8deg);
    background: rgba(220, 38, 38, 0.04);
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.3);
}
.pyq-stamp-circle span:first-child { font-size: 9px; }

/* 모바일 */
@media (max-width: 720px) {
    .pyq-doc { padding: 32px 22px 28px; }
    .pyq-doc-title { font-size: 30px; letter-spacing: 0.3em; }
    .pyq-info-grid { grid-template-columns: 1fr; }
    .pyq-info-cell:nth-child(odd) { border-right: none; }
    .pyq-info-cell { grid-template-columns: 96px 1fr; }
    .pyq-doc-foot { flex-direction: column; align-items: flex-start; }
    .pyq-stamp { align-self: flex-end; }
}

/* 인쇄 — A4 한 장에 미리보기와 동일하게 출력.
   · 본문은 display:none 으로 공간까지 제거 (빈 페이지 방지)
   · grid·색상 강제 유지 (Chromium 인쇄 엔진에서 reflow/색상 손실 방지)
   · 표/그리드 단위 page-break 방지 */
@media print {
    @page { size: A4; margin: 8mm 10mm; }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        height: auto !important;
        overflow: visible !important;
    }
    body > *:not(.pyq-overlay) { display: none !important; }

    /* 색상·배경 인쇄 강제 (Chromium / WebKit) */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .pyq-overlay {
        position: static !important;
        display: block !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        backdrop-filter: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    .pyq-overlay[hidden] { display: none !important; }
    .pyq-modal {
        position: static !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
    }
    .pyq-actions-bar { display: none !important; }
    .pyq-doc {
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 정보 표 — table 의 border-collapse 가 인쇄에서 가장 일관되게 동작 */
    .pyq-info-grid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    .pyq-info-grid th,
    .pyq-info-grid td {
        border: 1px solid #94a3b8 !important;
    }

    /* 표·인사·푸터 단위 잘림 방지 */
    .pyq-table, .pyq-greet, .pyq-notes, .pyq-doc-foot {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    .pyq-doc-foot .pyq-stamp, .pyq-doc-foot .pyq-vendor-block {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .pyq-table thead { display: table-header-group; }
}

/* ──────────────────────────────────────────────────────────────
 * 월 요금 계산 방식 안내 (.py-pricing-info)
 *   .py-card__features 좌측 컬럼 내부에 통합 — 기능 그리드 아래 이어짐.
 *   1) 헤더 (eyebrow + title + sub)
 *   2) 가격 공식: 직원 5000원 + 실수급자 500원
 *   3) 자동 후불 청구 안내 박스
 * ────────────────────────────────────────────────────────────── */
.py-pricing-info {
    width: 100%;
    padding: 0 0 32px;
    margin-top: 0;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--pyx-border);
    border-radius: 0;
    box-shadow: none;
}
.py-pricing-info__head {
    text-align: center;
    margin-bottom: 28px;
}
.py-pricing-info__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--pyx-primary-soft);
    color: var(--pyx-primary);
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.py-pricing-info__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.py-pricing-info__title strong {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.py-pricing-info__sub {
    margin: 0;
    font-size: 14.5px;
    color: var(--pyx-text-mute);
}

/* 가격 공식 — 2 카드 + 가운데 + */
.py-pricing-info__formula {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
    margin: 0 0 24px;
}
.py-pricing-info__card {
    padding: 28px 28px 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 2px solid #e0e7ff;
    border-radius: 16px;
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.py-pricing-info__card:hover {
    transform: translateY(-2px);
    border-color: #a5b4fc;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.12);
}
.py-pricing-info__card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.30);
}
.py-pricing-info__card-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    color: #0f172a;
}
.py-pricing-info__card-num {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.0;
}
.py-pricing-info__card-unit {
    font-size: 20px;
    font-weight: 700;
    color: #475569;
}
.py-pricing-info__card-label {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
.py-pricing-info__card-label strong {
    color: var(--pyx-primary);
    font-weight: 800;
}
.py-pricing-info__card-note {
    font-size: 12.5px;
    color: var(--pyx-text-faint);
}
.py-pricing-info__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    color: #c7d2fe;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* 자동 후불 청구 안내 */
.py-pricing-info__billing {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    margin: 0;
}
.py-pricing-info__billing-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.30);
}
.py-pricing-info__billing-body h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.py-pricing-info__billing-body p {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.55;
}
.py-pricing-info__billing-body strong {
    color: var(--pyx-primary);
    font-weight: 800;
}

@media (max-width: 720px) {
    .py-pricing-info { padding-top: 24px; margin-top: 20px; }
    .py-pricing-info__title { font-size: 22px; }
    .py-pricing-info__formula {
        grid-template-columns: 1fr;
    }
    .py-pricing-info__card-num { font-size: 40px; }
    .py-pricing-info__billing { flex-direction: column; text-align: center; gap: 14px; padding: 20px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   솔루션 비교 도표 (.py-compare / .cm-*) — 라이트 테마 (고도화)
   www/index 의 다크 비교 매트릭스를 결제 페이지(흰 배경)에 맞게 재설계.
   · 상태 = 원형 배지 / 기능 = 브랜드 타일 / 케어하자 = 추천 컬럼 강조
   ══════════════════════════════════════════════════════════════ */
.py-compare {
    width: 100%;
    margin-top: 40px;
}
.py-compare__head {
    text-align: center;
    margin-bottom: 26px;
}
.py-compare__title {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}
.py-compare__title em {
    font-style: normal;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.py-compare__sub {
    margin: 0;
    font-size: 14.5px;
    color: var(--pyx-text-mute);
}

/* ── 매트릭스 컨테이너 ── */
.py-compare .cm-matrix {
    position: relative;
    background: #fff;
    border: 1px solid #e8ebf2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 48px -16px rgba(79, 70, 229, 0.16),
                0 4px 14px rgba(15, 23, 42, 0.05);
    margin-bottom: 18px;
}
/* 상단 그라데이션 액센트 바 */
.py-compare .cm-matrix::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    z-index: 4;
}
.py-compare .cm-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid #f1f3f8;
    transition: background .18s ease;
}
.py-compare .cm-row:last-child { border-bottom: none; }
.py-compare .cm-row:not(.cm-row--head):hover { background: #fbfbff; }
.py-compare .cm-row--head {
    background: linear-gradient(180deg, #fafbff 0%, #f4f5fb 100%);
    border-bottom: 1px solid #e8ebf2;
}

.py-compare .cm-cell {
    padding: 17px 16px;
    color: #475569;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    border-left: 1px solid #f1f3f8;
}
.py-compare .cm-cell:first-child { border-left: none; }
.py-compare .cm-row--head .cm-cell {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 18px 16px;
}

/* ── 기능 컬럼 — 브랜드 타일 아이콘 ── */
.py-compare .cm-cell--feat {
    text-align: left;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    position: relative;
    padding: 17px 16px 17px 70px;
}
.py-compare .cm-feat-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #eef2ff, #f3eeff);
    color: #6366f1;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.10);
}
.py-compare .cm-cell--feat strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}
.py-compare .cm-cell--feat span {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── 상태 텍스트 ── */
.py-compare .cm-cell em {
    font-style: normal;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

/* ── 상태 아이콘 = 원형 배지 ── */
.py-compare .cm-c,
.py-compare .cm-w,
.py-compare .cm-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    transition: transform .25s cubic-bezier(0.22,1,0.36,1);
}
.py-compare .cm-c { color: #059669; background: #d1fae5; }
.py-compare .cm-w { color: #d97706; background: #fef3c7; }
.py-compare .cm-x { color: #b6c0cf; background: #f1f4f9; }

/* 미제공 셀 톤다운 — 케어하자가 상대적으로 더 빛나게 */
.py-compare .cm-cell:not(.cm-cell--us):has(.cm-x) { opacity: 0.7; }
.py-compare .cm-cell:not(.cm-cell--us):has(.cm-x) em { color: #b6c0cf; }

/* ══ 케어하자 = 추천 컬럼 (플로팅 카드 느낌) ══ */
.py-compare .cm-cell--us {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.08), transparent 72%),
        linear-gradient(180deg, rgba(99,102,241,0.075) 0%, rgba(124,58,237,0.045) 100%);
    border-left: 1.5px solid rgba(99,102,241,0.30);
    border-right: 1.5px solid rgba(99,102,241,0.30);
    box-shadow: inset 1px 0 0 rgba(139,92,246,0.12),
                inset -1px 0 0 rgba(139,92,246,0.12);
}
.py-compare .cm-row--head .cm-cell--us {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(124,58,237,0.20), transparent 72%),
        linear-gradient(180deg, rgba(99,102,241,0.16), rgba(124,58,237,0.09));
    border-top: 2.5px solid #7c3aed;
    box-shadow: inset 1px 0 0 rgba(139,92,246,0.2),
                inset -1px 0 0 rgba(139,92,246,0.2),
                0 -6px 22px -6px rgba(124,58,237,0.30);
}
.py-compare .cm-row:not(.cm-row--head):last-child .cm-cell--us {
    border-bottom: 1.5px solid rgba(99,102,241,0.30);
    box-shadow: inset 1px 0 0 rgba(139,92,246,0.12),
                inset -1px 0 0 rgba(139,92,246,0.12),
                0 14px 26px -12px rgba(124,58,237,0.32);
}
.py-compare .cm-cell--us em { color: #4338ca; font-weight: 700; }
/* 케어하자 ✓ — 채운 그라데이션 배지 + 글로우 */
.py-compare .cm-cell--us .cm-c {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 14px -2px rgba(16,185,129,0.5);
}
.py-compare .cm-cell--us .cm-w {
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 14px -2px rgba(245,158,11,0.45);
}

/* 행 호버 — 케어하자 배지 펄스 */
.py-compare .cm-row:not(.cm-row--head):hover .cm-cell--us .cm-c { animation: pyCmPulse .65s cubic-bezier(0.22,1,0.36,1); }
@keyframes pyCmPulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* 케어하자 칩 — 왕관 + 그라데이션 */
.py-compare .cm-us-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px -3px rgba(99,102,241,0.45);
}
.py-compare .cm-us-chip::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f521'; /* crown */
    font-size: 0.72rem;
    color: #fde68a;
}

/* ── 범례 ── */
.py-compare .cm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 0;
    color: #64748b;
    font-size: 0.85rem;
}
.py-compare .cm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.py-compare .cm-legend i {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
}
.py-compare .cm-legend .cm-c { color: #059669; background: #d1fae5; }
.py-compare .cm-legend .cm-w { color: #d97706; background: #fef3c7; }
.py-compare .cm-legend .cm-x { color: #b6c0cf; background: #f1f4f9; }
.py-compare .cm-legend-note {
    flex-basis: 100%;
    text-align: center;
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 6px;
}

/* ── 반응형 — 좁은 화면 2열 카드형 (데이터 라벨) ── */
@media (max-width: 900px) {
    .py-compare .cm-matrix { border-radius: 16px; }
    .py-compare .cm-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 18px 16px;
        border-bottom: 1px solid #f1f3f8;
    }
    .py-compare .cm-row--head { display: none; }
    .py-compare .cm-cell {
        padding: 12px 10px;
        border-left: none;
        border-radius: 12px;
        background: #f8fafc;
        box-shadow: inset 0 0 0 1px #eef0f5;
    }
    .py-compare .cm-cell--feat {
        grid-column: 1 / -1;
        text-align: left;
        background: transparent;
        box-shadow: none;
        padding: 0 0 8px 52px;
    }
    .py-compare .cm-cell--feat strong { font-size: 1.05rem; }
    .py-compare .cm-feat-icon { left: 0; width: 38px; height: 38px; }
    .py-compare .cm-cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #94a3b8;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
    }
    .py-compare .cm-cell--us {
        box-shadow: inset 0 0 0 1.5px rgba(99,102,241,0.28);
        border-left: none; border-right: none;
    }
    .py-compare .cm-cell--us[data-label]::before { color: #6d28d9; }
}