.option-card { position: relative; display: block; min-height: 78px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }.option-card:hover { border-color: var(--primary); box-shadow: 0 12px 24px rgba(0, 0, 0, .2); transform: translateY(-2px); }.option-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary), 0 14px 27px rgba(93, 52, 202, .22); transform: scale(1.02); z-index: 1; }.option-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }.option-title { display: block; padding-right: 24px; color: var(--text); font-size: 15px; font-weight: 600; }.option-price { display: block; margin-top: 5px; color: var(--primary); font-size: 14px; font-weight: 600; }.option-check { position: absolute; top: 15px; right: 15px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: transparent; font-size: 10px; }.option-card.selected .option-check { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }.option-payment { display: flex; align-items: center; gap: 15px; min-height: 88px; }.option-payment .option-price { font-size: 13px; }.option-payment .payment-card-content { min-width: 0; }.package-grid, .payment-grid { gap: 16px; }.package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.selection-section-heading .section-number { position: relative; display: grid; flex: 0 0 34px; place-items: center; overflow: visible; color: transparent; font-size: 0; line-height: 1; }.selection-section-heading .section-number::after { position: absolute; top: 50%; left: 50%; display: block; color: #e6ddff; font-size: 12px; font-weight: 900; line-height: 1; transform: translate(-50%, -50%) rotate(-45deg); }.detail-panel:nth-of-type(1) .section-number::after { content: "01"; }.detail-panel:nth-of-type(2) .section-number::after { content: "02"; }.detail-panel:nth-of-type(3) .section-number::after { content: "03"; } @media (max-width: 767.98px) { .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.payment-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .package-grid { grid-template-columns: 1fr; }.option-card { padding: 15px; }.option-title { font-size: 14px; } }

.option-card:focus-within {
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 34%, transparent), var(--shadow-sm);
    outline: none;
}