/**
 * pricing.css
 * Toss Design System Implementation for Pricing Page
 * 토스 스타일 멤버십/가격 페이지
 */

/* ===============================================
   CSS Variables - Toss Design System
   =============================================== */
.pricing-content {
    /* Colors */
    --pricing-bg: #F2F4F6;
    --pricing-card-bg: #FFFFFF;
    --pricing-text-primary: #191F28;
    --pricing-text-secondary: #4E5968;
    --pricing-text-tertiary: #8B95A1;
    --pricing-text-placeholder: #B0B8C1;

    /* Brand Colors */
    --pricing-blue: #3182F6;
    --pricing-blue-dark: #1B64DA;
    --pricing-blue-light: #E8F3FF;

    /* Status Colors */
    --pricing-success: #37D28D;
    --pricing-success-light: #E8FBF0;
    --pricing-warning: #FD9933;
    --pricing-warning-light: #FFF4E6;

    /* Borders & Lines */
    --pricing-border: #E5E8EB;
    --pricing-border-light: #F2F4F6;

    /* Shadows */
    --pricing-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
    --pricing-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --pricing-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --pricing-shadow-blue: 0 4px 16px rgba(49, 130, 246, 0.2);

    /* Border Radius */
    --pricing-radius-sm: 8px;
    --pricing-radius-md: 12px;
    --pricing-radius-lg: 16px;
    --pricing-radius-xl: 24px;

    /* Spacing */
    --pricing-space-xs: 4px;
    --pricing-space-sm: 8px;
    --pricing-space-md: 16px;
    --pricing-space-lg: 24px;
    --pricing-space-xl: 32px;
    --pricing-space-2xl: 48px;

    /* Typography */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--pricing-bg);
    color: var(--pricing-text-primary);
    min-height: calc(100vh - 80px);
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===============================================
   Container
   =============================================== */
.pricing-content .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--pricing-space-xl) var(--pricing-space-lg);
    min-height: auto;
}

/* ===============================================
   Hero Section - 토스 스타일
   =============================================== */
.hero-title {
    text-align: center;
    padding: var(--pricing-space-xl) var(--pricing-space-lg) var(--pricing-space-lg);
    max-width: 600px;
    margin: 0 auto;
}

.hero-title h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pricing-text-primary);
    margin-bottom: var(--pricing-space-md);
    letter-spacing: -0.5px;
}

/* 컬러 하이라이트 - 토스 블루로 통일 */
.hero-title .purple,
.hero-title .green {
    color: var(--pricing-blue);
}

.hero-title .black {
    color: var(--pricing-text-primary);
}

/* 서브타이틀 추가 지원 */
.hero-title p,
.hero-subtitle {
    font-size: 16px;
    color: var(--pricing-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ===============================================
   Billing Toggle - 버튼 스타일
   =============================================== */
.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto var(--pricing-space-xl);
    padding: var(--pricing-space-sm) 0;
}

.billing-btn {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--pricing-text-tertiary);
    background: var(--pricing-border-light);
    border: 1px solid var(--pricing-border);
    border-radius: var(--pricing-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.billing-btn:hover {
    color: var(--pricing-text-secondary);
    background: var(--pricing-border);
}

.billing-btn.active {
    color: var(--pricing-blue);
    background: var(--pricing-blue-light);
    border-color: var(--pricing-blue);
    font-weight: 600;
}

/* 할인 배지 - 플랜 카드 내 */
.plan-discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--pricing-blue-light);
    color: var(--pricing-blue);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    margin-left: var(--pricing-space-sm);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.plan-discount-badge.active {
    opacity: 1;
    transform: scale(1);
}

.plan-discount-badge.hidden {
    display: none;
}

/* 원래 가격 (취소선) - styles.css의 position: absolute 재정의 */
.plan-price-container .original-price {
    position: static;
    font-size: 14px;
    color: var(--pricing-text-tertiary);
    text-decoration: line-through;
    margin-top: var(--pricing-space-xs);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.original-price.active {
    opacity: 1;
}

.original-price.hidden {
    display: none;
}

/* ===============================================
   Plans Container - CSS Grid 레이아웃
   =============================================== */
.plans-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--pricing-space-md);
}

/* 슬라이드 인디케이터 - 기본적으로 숨김 (데스크톱) */
.plans-indicators {
    display: none;
}

/* ===============================================
   Plan Card - 토스 카드 스타일
   =============================================== */
.plan-card {
    background: var(--pricing-card-bg);
    border-radius: var(--pricing-radius-xl);
    padding: var(--pricing-space-xl);
    position: relative;
    box-shadow: var(--pricing-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    min-height: 480px;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pricing-shadow-md);
}

/* 추천 플랜 강조 스타일 (필요 시 .plan-card.recommended 클래스 사용) */

/* 플랜명 */
.plan-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pricing-text-primary);
    margin-bottom: var(--pricing-space-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pricing-space-sm);
}

/* 플랜 설명 */
.plan-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--pricing-text-secondary);
    margin-bottom: var(--pricing-space-lg);
    width: auto;
}

/* 가격 컨테이너 - min-height로 정가 유무와 관계없이 divider 위치 통일 */
.plan-price-container {
    display: flex;
    flex-direction: column;
    gap: var(--pricing-space-xs);
    margin-bottom: var(--pricing-space-lg);
    min-height: 72px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 2px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pricing-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* 가격 통화 표시 */
.price-currency {
    font-size: 20px;
    font-weight: 600;
    color: var(--pricing-text-primary);
    margin-left: 2px;
}

/* ===============================================
   Divider - 단순화
   =============================================== */
.divider {
    height: 1px;
    background: var(--pricing-border);
    margin: var(--pricing-space-lg) 0;
    border: none;
}

.divider svg {
    display: none;
}

/* ===============================================
   Features List
   =============================================== */
.features-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pricing-space-sm);
    margin-bottom: var(--pricing-space-lg);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--pricing-space-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pricing-text-primary);
    padding: var(--pricing-space-xs) 0;
}

.feature-item span {
    flex: 1;
}

.feature-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pricing-success);
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

/* 상속 기능 표시 (이전 플랜 기능) */
.feature-item.inherited,
.feature-item:first-child {
    color: var(--pricing-text-secondary);
}

.feature-item.inherited .feature-icon svg path,
.feature-item:first-child .feature-icon svg path[stroke="#10B981"] {
    stroke: var(--pricing-blue);
}

/* ===============================================
   Plan Button - 토스 버튼 스타일
   =============================================== */
.plan-button {
    width: 100%;
    height: 52px;
    border-radius: var(--pricing-radius-md);
    border: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pricing-space-sm);
    margin-top: auto;
}

.plan-button:active {
    transform: scale(0.96);
}

/* Secondary 버튼 (기본) */
.plan-button {
    background: var(--pricing-border-light);
    color: var(--pricing-text-secondary);
}

.plan-button:hover {
    background: var(--pricing-border);
    color: var(--pricing-text-primary);
}

/* Primary 버튼 (필요 시 .plan-button.primary 클래스 사용) */

/* 버튼 아이콘 */
.plan-button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.plan-button:hover svg {
    transform: translateX(2px);
}

/* plan-button svg 기본 스타일 */

/* 현재 플랜 버튼 스타일 */
.plan-button.current-plan {
    background: var(--pricing-blue-light) !important;
    color: var(--pricing-blue) !important;
    cursor: default !important;
    border: 1px solid var(--pricing-blue) !important;
}

.plan-button.current-plan:hover {
    transform: none !important;
}

.plan-button.current-plan svg path {
    stroke: var(--pricing-blue) !important;
}

/* 현재 플랜 카드 하이라이트 */
.plan-card:has(.current-plan) {
    border: 2px solid var(--pricing-blue);
    box-shadow: var(--pricing-shadow-blue);
}

/* ===============================================
   Responsive Design
   =============================================== */

/* Large Desktop */
@media (max-width: 1400px) {
    .plans-container {
        gap: 12px;
        padding: 0 var(--pricing-space-lg);
    }

    .plan-card {
        padding: 20px;
    }

    .plan-price {
        font-size: 28px;
    }
}

/* Desktop - 5개 플랜 좁은 화면 */
@media (max-width: 1200px) {
    .plans-container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
        gap: 16px;
    }

    .plan-card {
        padding: var(--pricing-space-lg);
    }
}

/* Tablet - 2열 Grid */
@media (max-width: 1024px) {
    .plans-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
        gap: 20px;
    }

    .hero-title h1 {
        font-size: 28px;
    }

    .plan-card {
        min-height: 420px;
    }
}

/* Small Tablet - 슬라이드 캐러셀 */
@media (max-width: 768px) {
    .pricing-content .container {
        padding: var(--pricing-space-lg) 0;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-title {
        padding: var(--pricing-space-lg) var(--pricing-space-md);
    }

    .hero-title h1 {
        font-size: 24px;
    }

    .billing-toggle {
        gap: 8px;
        padding: 0 var(--pricing-space-md);
    }

    .billing-btn {
        font-size: 14px;
        padding: 8px 20px;
    }

    /* 슬라이드 컨테이너 - CSS scroll-snap */
    .plans-container {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 16px;
        padding: 20px calc((100vw - 300px) / 2);
        max-width: none;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
    }

    .plans-container::-webkit-scrollbar {
        display: none;
    }

    .plan-card {
        flex: 0 0 300px;
        min-width: 300px;
        max-width: 300px;
        min-height: auto;
        padding: var(--pricing-space-lg);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: scale(0.95);
        opacity: 0.7;
        transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
        will-change: transform, opacity;
    }

    /* 활성 카드 (중앙) 강조 */
    .plan-card.active-slide {
        transform: scale(1);
        opacity: 1;
        box-shadow: var(--pricing-shadow-md);
    }

    .plan-card.recommended.active-slide {
        box-shadow: 0 8px 32px rgba(49, 130, 246, 0.25);
    }

    .plan-price {
        font-size: 32px;
    }

    /* 슬라이드 인디케이터 */
    .plans-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 24px 16px 8px;
    }

    .plans-indicators .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pricing-border);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    }

    .plans-indicators .indicator:hover {
        background: var(--pricing-text-tertiary);
    }

    .plans-indicators .indicator.active {
        width: 24px;
        border-radius: 4px;
        background: var(--pricing-blue);
    }

    /* Pro 플랜 인디케이터 활성 시 강조 */
    .plans-indicators .indicator[data-index="2"].active {
        background: var(--pricing-blue);
        box-shadow: 0 2px 8px rgba(49, 130, 246, 0.4);
    }
}

/* Mobile - 슬라이드 최적화 */
@media (max-width: 480px) {
    .pricing-content .container {
        padding: var(--pricing-space-md) 0;
    }

    .hero-title {
        padding: var(--pricing-space-md);
    }

    .hero-title h1 {
        font-size: 22px;
    }

    /* 더 작은 화면에서 카드 크기 조정 */
    .plans-container {
        padding: 16px calc((100vw - 280px) / 2);
        gap: 12px;
    }

    .plan-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
        padding: var(--pricing-space-lg) var(--pricing-space-md);
    }

    .plan-name {
        font-size: 18px;
    }

    .plan-price {
        font-size: 28px;
    }

    .feature-item {
        font-size: 13px;
    }

    .plan-button {
        height: 48px;
        font-size: 14px;
    }

    .plans-indicators {
        padding: 20px 16px 8px;
    }
}

/* ===============================================
   Dark Mode Support (Optional)
   =============================================== */
@media (prefers-color-scheme: dark) {
    /* 다크모드 필요시 여기에 추가 */
}

/* ===============================================
   Animation Keyframes
   =============================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.plan-card {
    animation: fadeIn 0.3s ease-out;
}

.plan-card:nth-child(1) { animation-delay: 0ms; }
.plan-card:nth-child(2) { animation-delay: 50ms; }
.plan-card:nth-child(3) { animation-delay: 100ms; }
.plan-card:nth-child(4) { animation-delay: 150ms; }
.plan-card:nth-child(5) { animation-delay: 200ms; }

/* ===============================================
   Legacy Support - 기존 사이드바 스타일 유지
   =============================================== */
.sidebar-brand h1,
.sidebar-brand h1 a,
.sidebar-header h1,
.sidebar-header h1 a {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.new-chat-btn span,
.nav-section-header,
.profile-header,
.logout-btn span {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.nav-section-header,
.profile-section .profile-header {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}