:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:#fff;color:#000}#root{width:100%;height:100vh}.checkout-page{min-height:100vh;background:#f3f4f6;padding:24px}.checkout-container{max-width:1100px;margin:0 auto}.checkout-header{display:flex;align-items:center;gap:24px;margin-bottom:32px}.back-button{padding:8px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#6b7280;font-size:14px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#f9fafb;border-color:#d1d5db}.checkout-header h1{font-size:32px;font-weight:700;color:#1f2937}.checkout-content{display:grid;grid-template-columns:1fr 1.5fr;gap:32px}.order-summary{position:sticky;top:24px;height:fit-content}.order-summary h2{font-size:20px;font-weight:600;color:#1f2937;margin-bottom:16px}.summary-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 12px #0000000d}.plan-info{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #e5e7eb;margin-bottom:16px}.plan-name{display:flex;flex-direction:column;gap:4px}.plan-name .badge{display:inline-block;width:fit-content;padding:4px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:6px;font-size:14px;font-weight:600}.plan-name .cycle{font-size:14px;color:#6b7280}.plan-price{font-size:28px;font-weight:700;color:#667eea}.plan-features{margin-bottom:16px}.plan-features h3{font-size:14px;font-weight:600;color:#374151;margin-bottom:12px}.plan-features ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.plan-features li{font-size:14px;color:#6b7280}.savings-notice{display:flex;gap:12px;padding:16px;background:linear-gradient(135deg,#10b9811a,#0596691a);border-radius:8px;border-left:4px solid #10b981;margin-bottom:16px}.savings-notice .icon{font-size:24px}.savings-notice strong{display:block;color:#059669;font-size:14px;margin-bottom:4px}.savings-notice p{font-size:12px;color:#6b7280;margin:0}.total{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:2px solid #e5e7eb;font-size:18px;font-weight:600;color:#1f2937}.total-amount{color:#667eea;font-size:24px}.payment-section{background:#fff;border-radius:12px;padding:32px;box-shadow:0 4px 12px #0000000d}.payment-section h2{font-size:20px;font-weight:600;color:#1f2937;margin-bottom:24px}.portone-payment-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.payment-method-card{display:flex;align-items:center;gap:16px;padding:20px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;transition:all .2s ease}.payment-method-card:hover{border-color:#667eea;background:#f3f4f6}.payment-icon{font-size:36px;line-height:1}.payment-details h3{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:4px}.payment-details p{font-size:13px;color:#6b7280;margin:0}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px}.spinner{width:48px;height:48px;border:4px solid #e5e7eb;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:#6b7280;font-size:14px}.payment-widget,.agreement-widget{margin-bottom:24px}.pay-button{width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.pay-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.pay-button:active{transform:translateY(0)}.pay-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.payment-info{margin-top:24px;padding:20px;background:#f9fafb;border-radius:8px;display:flex;flex-direction:column;gap:8px}.payment-info p{font-size:13px;color:#6b7280;margin:0;display:flex;align-items:center;gap:8px}@media (max-width: 968px){.checkout-content{grid-template-columns:1fr}.order-summary{position:static}}@media (max-width: 640px){.checkout-page{padding:16px}.checkout-header h1{font-size:24px}.payment-section,.summary-card{padding:20px}}