@charset "UTF-8";
/* CSS Document */
  /* Reset */
        * { margin:0; padding:0; box-sizing:border-box; }

        /* 컬러 변수 */
        :root {
          --gradient-start: #B71C1C;  /* 상단 레드 */
          --gradient-mid:   #2E0249;  /* 중간 퍼플 */
          --gradient-end:   #0B0033;  /* 하단 네이비 */
          --accent-red:     #D30F1D;  /* CTA 버튼 레드 */
          --text-light:     #FFFFFF;
          --text-fade:      rgba(255,255,255,0.7);
        }

        /* 홈페이지 기본 스타일 */
        body {
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 홈페이지 데모 컨테이너 */
        .homepage-demo {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px;
            text-align: center;
        }

        .homepage-demo h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .homepage-demo p {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 40px;
        }

        /* 티켓 예약 버튼 */
        .ticket-booking-btn {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid));
            color: white;
            border: none;
            padding: 20px 40px;
            font-size: 1.2rem;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(183, 28, 28, 0.3);
        }

        .ticket-booking-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(183, 28, 28, 0.4);
        }

        /* 팝업 오버레이 */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .popup-overlay.show {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 팝업 컨테이너 */
        .popup-container {
            background: white;
            border-radius: 24px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            overflow: hidden;
            width: 100%;
            max-width: 1200px;
            max-height: 90vh;
            overflow-y: auto;
            animation: slideIn 0.5s ease-out;
            position: relative;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(50px) scale(0.9); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* 팝업 닫기 버튼 */
        .popup-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .popup-close:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }

        /* 기존 티켓 시스템 스타일들 */
        .ticket-system {
            background: linear-gradient(135deg,
                        var(--gradient-start) 0%,
                        var(--gradient-mid)   50%,
                        var(--gradient-end)   100%);
            color: var(--text-light);
            min-height: 100vh;
            font-size: 14px;
        }

       
        .header_area {
            background: linear-gradient(135deg,
                        var(--gradient-mid) 0%,
                        var(--gradient-end) 100%);
            color: var(--text-light);
            padding: 30px;
            text-align: center;
        }
        .header_area h1 {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        .header_area p {
            font-size: 16px;
            opacity: 0.9;
        } 

        /* Countdown */
        .countdown {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 20px;
            margin-top: 20px;
            text-align: center;
        }

        .countdown-title {
            font-size: 14px;
            margin-bottom: 10px;
            color: var(--text-light);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .countdown-timer {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .countdown-item {
            text-align: center;
        }

        .countdown {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(12px);
            border: 2px solid rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            padding: 20px;
            margin-top: 20px;
            text-align: center;
        }

        .countdown-number {
            padding: 6px 12px;
            border-radius: 8px;
            display: inline-block;
            font-size: 32px;
            font-weight: 700;
        }

        .countdown-label {
            font-size: 14px;
            color: var(--text-light);
            opacity: 0.9;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Step Indicator */
        .step-indicator {
            display: flex;
            justify-content: center;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 20px;
            gap: 20px;
        }
        .step {
            padding: 12px 20px;
            background: #cbd5e1;
            color: #475569;
            border-radius: 25px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .step.active {
            background: linear-gradient(135deg,
                        var(--gradient-mid) 0%,
                        var(--gradient-end) 100%);
            color: white;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
      /*    .ticket-header {
            border-radius: 16px;
            margin-bottom: 30px;
            text-align: center;
         background-image: url("https://naverbooking-phinf.pstatic.net/20250630_214/1751268717993KnMhF_PNG/BUK2025_%C0%CE%BD%BA%C5%B8%C7%C1%B7%CE%C7%CA2.png?type=a1000_60_sharpen");
            background-size: 100% auto;   
            background-repeat: no-repeat; 
            background-position: center;  
           height: 600px;
        } */
        
        .ticket-header {
          background: linear-gradient(135deg,
                var(--gradient-start) 0%,
                var(--gradient-mid)   100%);
            padding: 30px; 
            border-radius: 16px; 
            margin-bottom: 30px; 
            text-align: center; 
         }
        
        .content { padding: 40px; }

        /* 이하 기존 스타일 그대로 유지 */
       
        .section-title { 
            font-size: 30px; 
            font-weight: 700; 
            color: var(--text-light); 
            margin-bottom: 10px; 
        }
        .section-subtitle { 
            font-size: 16px; 
            color: var(--text-fade); 
        }

        .ticket-grid { margin-bottom: 30px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

        .ticket-row { display: flex; justify-content: space-between; align-items: center; padding: 30px; border-bottom: 1px solid #f1f5f9; transition: all 0.3s ease; }
        .ticket-row:hover { background: #f8fafc; }
        .ticket-row:last-child { border-bottom: none; }

        .ticket-info { flex: 1; }
        .ticket-name { font-weight: 700; font-size: 18px; color: #1e293b; margin-bottom: 6px; }
        .ticket-price { font-weight: 600; font-size: 16px; color: #190466; margin-bottom: 8px; }
        .ticket-description { font-size: 14px; color: #64748b; }

        .ticket-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; min-width: 150px; }
        .quantity-control { display: flex; align-items: center; gap: 15px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 8px; transition: all 0.3s ease; }
        .quantity-control:hover { border-color: #190466; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
        .quantity-btn { background: #190466; color: white; border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
        .quantity-btn:hover { background: #4338ca; transform: scale(1.05); }
        .quantity-btn:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }
        .quantity-display { background: transparent; color: #1e293b; font-weight: 600; font-size: 18px; min-width: 30px; text-align: center; }

        .ticket-total { font-size: 18px; font-weight: 700; color: #1e293b; text-align: right; }

        .promo-section { background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); border: 2px solid #f59e0b; border-radius: 16px; padding: 30px; margin: 30px 0; box-shadow: 0 4px 20px rgba(245,158,11,0.2); }
        .promo-title { font-weight: 700; margin-bottom: 20px; color: #92400e; font-size: 18px; }
        .promo-input-group { display: flex; gap: 16px; align-items: center; max-width: 800px; flex-wrap: wrap; }
        .promo-input { flex: 1; min-width: 200px; padding: 16px 20px; border: 2px solid #f59e0b; border-radius: 12px; font-size: 16px; color: #92400e; background: white; transition: all 0.3s ease; }
        .promo-input:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
        .promo-button { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none; padding: 16px 32px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 16px; transition: all 0.3s ease; white-space: nowrap; min-width: 120px; }
        .promo-button:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(245,158,11,0.4); }
        .promo-button:disabled { background: #cbd5e1; color: #6b7280; cursor: not-allowed; transform: none; }

        .purchase-section { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid #0ea5e9; border-radius: 16px; padding: 30px; margin: 30px 0; box-shadow: 0 4px 20px rgba(14,165,233,0.2); }
        .purchase-title { font-weight: 700; margin-bottom: 20px; color: #0c4a6e; font-size: 18px; border-bottom: 2px solid #0ea5e9; padding-bottom: 10px; }
        .purchase-item { padding: 20px 0; border-bottom: 1px solid #bae6fd; display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #0c4a6e; transition: all 0.3s ease; }
        .purchase-item:hover { background: rgba(14,165,233,0.1); padding-left: 10px; border-radius: 8px; }
        .purchase-item:last-child { border-bottom: none; }
        .purchase-item-name { color: #0369a1; font-weight: 600; }
        .purchase-item-price { color: #0c4a6e; font-weight: 700; }

        .empty-purchase { text-align: center; color: #64748b; padding: 40px 20px; font-size: 16px; background: white; border-radius: 12px; margin: 10px 0; }

        /* 총 합계 영역 스타일 */
        .total-summary {
            border-top: 2px solid #0ea5e9;
            margin-top: 20px;
            padding-top: 0;
        }

        .total-summary-content {
            background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
            color: white;
            padding: 16px 20px;
            border-radius: 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            font-size: 18px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
        }

        .total-summary-label {
            color: white;
        }

        .total-summary-price {
            color: #fde047;
            font-size: 20px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        .checkout-section { background: linear-gradient(135deg, #190466 0%, #7c3aed 100%); border-radius: 16px; padding: 30px; margin: 30px 0; text-align: center; color: white; }
        .checkout-button { background: white; color: #190466; border: none; padding: 16px 40px; border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
        .checkout-button:hover { background: #f8fafc; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,255,255,0.3); }
        .checkout-button:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; transform: none; }

        .savings-indicator { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #166534; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-top: 10px; display: none; }
        .savings-indicator.show { display: block; animation: slideDown 0.3s ease-out; }
        @keyframes slideDown { from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} }

        .info-panel { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 30px; border-radius: 16px; margin: 30px 0; font-size: 14px; line-height: 1.6; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .info-panel h3 { margin-bottom: 20px; color: #60a5fa; font-size: 18px; font-weight: 700; }
        .info-panel p { margin-bottom: 15px; }
        .info-panel strong { color: #fbbf24; }

        .notification { position: fixed; top: 20px; right: 20px; padding: 16px 24px; border-radius: 12px; color: white; font-weight: 600; z-index: 20000; transform: translateX(100%); transition: transform 0.3s ease; }
        .notification.show { transform: translateX(0); }
        .notification.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
        .notification.error   { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

        /* 약관 모달 스타일 */
        .terms-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 15000;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .terms-modal.show {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }

        .terms-modal-content {
            background: white;
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 700px;
            max-height: 80vh;
            overflow: hidden;
            animation: slideIn 0.5s ease-out;
        }

        .terms-modal-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
            color: white;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .terms-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
        }

        .terms-modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .terms-modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }

        .terms-modal-body {
            padding: 25px;
            overflow-y: auto;
            max-height: calc(80vh - 80px);
            line-height: 1.6;
            color: #374151;
        }

        .terms-modal-body h4 {
            color: #1e40af;
            font-size: 16px;
            font-weight: 700;
            margin: 20px 0 10px 0;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 5px;
        }

        .terms-modal-body h4:first-child {
            margin-top: 0;
        }

        .terms-modal-body p {
            margin-bottom: 15px;
            font-size: 14px;
        }

        .terms-modal-body strong {
            color: #1f2937;
            font-weight: 600;
        }

        .terms-date {
            text-align: right;
            color: #6b7280;
            font-style: italic;
            margin-top: 30px;
            border-top: 1px solid #e5e7eb;
            padding-top: 15px;
        }

        /* 새로 추가된 참가자 정보 입력 스타일 */
        .participant-form {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 16px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .participant-form h3 {
            color: #1e293b;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            border-bottom: 2px solid #0ea5e9;
            padding-bottom: 10px;
        }

        .form-section {
            margin-bottom: 30px;
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .form-section h4 {
            color: #1e293b;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .required-note {
            color: #ef4444;
            font-size: 12px;
            font-weight: 500;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr 2fr;
            gap: 16px;
            margin-bottom: 20px;
            align-items: end;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-label {
            color: #374151;
            font-size: 14px;
            font-weight: 600;
        }

        .form-label .required {
            color: #ef4444;
            margin-left: 2px;
        }

        .form-input {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            color: #1f2937;
            background: white;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-input.error {
            border-color: #ef4444;
            background: #fef2f2;
        }

        /* 체크박스 동의 섹션 */
        .agreement-section {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
        }

        .agreement-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .agreement-item:last-child {
            border-bottom: none;
        }

        .custom-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #cbd5e1;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            background: white;
        }

        .custom-checkbox.checked {
            background: #3b82f6;
            border-color: #3b82f6;
            color: white;
        }

        .agreement-text {
            color: #374151;
            font-size: 14px;
            flex: 1;
        }

        .agreement-text .required-text {
            color: #ef4444;
            font-weight: 600;
        }

        .view-button {
            background: #6b7280;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-button:hover {
            background: #4b5563;
        }

        /* 결제 방식 선택 */
        .payment-section {
            background: white;
            border-radius: 12px;
            padding: 25px;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .payment-section h4 {
            color: #1e293b;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .payment-options {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .payment-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .payment-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #cbd5e1;
            border-radius: 50%;
            position: relative;
            transition: all 0.3s ease;
        }

        .payment-radio.checked {
            border-color: #3b82f6;
        }

        .payment-radio.checked::after {
            content: '';
            width: 8px;
            height: 8px;
            background: #3b82f6;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .payment-label {
            color: #374151;
            font-size: 16px;
            font-weight: 600;
        }

        /* 무통장입금 관련 스타일 */
        .bank-transfer-section {
            margin-top: 20px;
            padding: 20px;
            background: #f8fafc;
            border: 2px solid #3b82f6;
            border-radius: 12px;
            display: none;
        }

        .bank-transfer-section.show {
            display: block;
            animation: slideDown 0.3s ease-out;
        }

        .bank-info {
            background: #e0f2fe;
            border: 1px solid #0ea5e9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .bank-info h5 {
            color: #0c4a6e;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .bank-account {
            color: #0369a1;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .bank-notice {
            color: #0c4a6e;
            font-size: 14px;
            line-height: 1.5;
        }

        .bank-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .receipt-section {
            margin-top: 20px;
            padding: 15px;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 8px;
        }

        .receipt-title {
            color: #92400e;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .receipt-options {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
        }

        .receipt-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .receipt-radio {
            width: 16px;
            height: 16px;
            border: 2px solid #f59e0b;
            border-radius: 50%;
            position: relative;
            transition: all 0.3s ease;
        }

        .receipt-radio.checked {
            border-color: #d97706;
        }

        .receipt-radio.checked::after {
            content: '';
            width: 6px;
            height: 6px;
            background: #d97706;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .receipt-label {
            color: #92400e;
            font-size: 14px;
            font-weight: 600;
        }

        .receipt-input-section {
            display: none;
        }

        .receipt-input-section.show {
            display: block;
        }

        /* 버튼 스타일 */
        .form-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }

        .form-button {
            padding: 16px 40px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 120px;
        }

        .form-button.secondary {
            background: #6b7280;
            color: white;
        }

        .form-button.secondary:hover {
            background: #4b5563;
            transform: translateY(-2px);
        }

        .form-button.primary {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .form-button.primary:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        }

        .form-button.primary:disabled {
            background: #cbd5e1;
            color: #6b7280;
            cursor: not-allowed;
            transform: none;
        }

        /* 페이지 전환 효과 */
        .page {
            display: none;
        }

        .page.active {
            display: block;
            animation: fadeInPage 0.5s ease-out;
        }

        @keyframes fadeInPage {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 카운트다운 스타일 */
        .ticket-header .countdown-title {
            color: var(--text-light);
            margin: 20px 0 10px;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .ticket-header .countdown-timer .countdown-item {
            display: inline-block;
            margin: 0 8px;
        }
        .ticket-header .countdown-number {
            background: var(--gradient-end);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 28px;
            font-weight: 700;
            color: var(--text-light);
            text-shadow: 0 2px 4px rgba(0,0,0,0.7);
        }
        .ticket-header .countdown-label {
            display: block;
            margin-top: 2px;
            font-size: 12px;
            color: var(--text-light);
            opacity: 0.9;
        }

     @media (max-width: 768px) {
         
        .ticket-header{
           
          height:auto;   
        }
         
          .ticket-header .countdown-number {
            padding: 4px 10px;
            font-size: 16px;
            
        }
         
         
         .popup-overlay {

            padding: 0px;
        }
         
         
            .popup-container {
                margin: 5px;
                max-height: 98vh;
            }
            
        .header_area { 
                padding: 10px; 
            }
            .header_area h1 { 
                font-size: 18px; 
                margin-bottom: 3px;
            }
            .header_area p {
                font-size: 14px;
            } 
            .content { 
                padding: 10px; 
            }
            
            .ticket-header {
                padding: 15px;
                margin-bottom: 15px;
            }
            
            .section-title {
                font-size: 18px;
                margin-bottom: 3px;
            }
            
            .section-subtitle {
                font-size: 13px;
            }
            
            /* 카운트다운 모바일 최적화 */
            .countdown {
                padding: 12px;
                margin-top: 15px;
            }
            
            .countdown-title {
                font-size: 12px;
                margin-bottom: 8px;
            }
            
            .countdown-timer {
                gap: 6px;
                justify-content: center;
            }
            
            .countdown-number {
                font-size: 18px;
                padding: 3px 6px;
            }
            
            .countdown-label {
                font-size: 9px;
                margin-top: 1px;
            }
            
            .ticket-row { 
                padding: 12px; 
                flex-direction: column; 
                align-items: flex-start; 
                gap: 8px; 
            }
            
            .ticket-name {
                font-size: 16px;
                margin-bottom: 4px;
            }
            
            .ticket-price {
                font-size: 14px;
                margin-bottom: 6px;
            }
            
            .ticket-description {
                font-size: 12px;
            }
            
            .ticket-controls { 
                flex-direction: row; 
                justify-content: space-between; 
                align-items: center; 
                width: 100%; 
            }
            
            .quantity-control {
                padding: 6px;
                gap: 12px;
            }
            
            .quantity-btn {
                width: 30px;
                height: 30px;
                font-size: 16px;
            }
            
            .quantity-display {
                font-size: 16px;
                min-width: 25px;
            }
            
            .ticket-total {
                font-size: 16px;
            }
            
            .promo-section,
            .purchase-section,
            .info-panel {
                padding: 15px;
                margin: 15px 0;
            }
            
            .promo-title,
            .purchase-title {
                font-size: 15px;
                margin-bottom: 12px;
            }
            
            .promo-input-group { 
                flex-direction: column; 
                gap: 8px; 
                max-width: 100%;
            }
            .promo-input, .promo-button { 
                width: 100%; 
                padding: 10px 14px;
                font-size: 13px;
                min-width: auto;
            }
            
            .participant-form {
                padding: 15px;
                margin: 15px 0;
            }
            
            .participant-form h3 {
                font-size: 18px;
                margin-bottom: 15px;
            }
            
            .form-section {
                padding: 12px;
                margin-bottom: 15px;
            }
            
            .form-section h4 {
                font-size: 14px;
                margin-bottom: 10px;
            }
            
            .required-note {
                font-size: 11px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
                gap: 8px;
                margin-bottom: 15px;
            }

            .bank-form-row {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            .form-label {
                font-size: 13px;
            }
            
            .form-input {
                padding: 10px 12px;
                font-size: 13px;
                border-radius: 6px;
            }
            
            .payment-section {
                padding: 12px;
            }
            
            .payment-section h4 {
                font-size: 16px;
                margin-bottom: 15px;
            }
            
            .payment-options {
                flex-direction: column;
                gap: 8px;
                margin-bottom: 15px;
            }
            
            .payment-label {
                font-size: 14px;
            }

            .receipt-options {
                flex-direction: column;
                gap: 8px;
                margin-bottom: 12px;
            }
            
            .receipt-label {
                font-size: 13px;
            }
            
            .agreement-section {
                padding: 12px;
                margin: 12px 0;
            }
            
            .agreement-item {
                padding: 6px 0;
            }
            
            .agreement-text {
                font-size: 13px;
            }
            
            .custom-checkbox {
                width: 18px;
                height: 18px;
            }
            
            .view-button {
                padding: 4px 8px;
                font-size: 11px;
            }
            
            .bank-transfer-section {
                padding: 12px;
                margin-top: 15px;
            }
            
            .bank-info {
                padding: 10px;
                margin-bottom: 12px;
            }
            
            .bank-info h5 {
                font-size: 14px;
                margin-bottom: 8px;
            }
            
            .bank-account {
                font-size: 16px;
                margin-bottom: 6px;
            }
            
            .bank-notice {
                font-size: 12px;
            }
            
            .receipt-section {
                padding: 10px;
                margin-top: 12px;
            }
            
            .receipt-title {
                font-size: 13px;
                margin-bottom: 10px;
            }
            
            .form-buttons {
                flex-direction: column;
                gap: 8px;
                margin-top: 15px;
            }
            
            .form-button {
                padding: 10px 25px;
                font-size: 13px;
            }
            
            .checkout-section {
                padding: 15px;
                margin: 15px 0;
            }
            
            .checkout-button {
                padding: 10px 25px;
                font-size: 14px;
            }

            .homepage-demo {
                padding: 25px 12px;
            }
            
            .homepage-demo h1 {
                font-size: 1.8rem;
                margin-bottom: 12px;
            }
            
            .homepage-demo p {
                font-size: 1rem;
                margin-bottom: 30px;
            }
            
            .ticket-booking-btn {
                padding: 12px 25px;
                font-size: 0.9rem;
            }

            .total-summary-content {
                padding: 10px 12px;
                font-size: 14px;
            }

            .total-summary-price {
                font-size: 16px;
            }
            
            .purchase-item {
                padding: 10px 0;
                font-size: 13px;
            }
            
            .purchase-item-name {
                font-size: 13px;
            }
            
            .purchase-item-price {
                font-size: 13px;
            }
            
            .empty-purchase {
                padding: 30px 15px;
                font-size: 14px;
            }
            
            .info-panel {
                font-size: 12px;
                line-height: 1.5;
            }
            
            .info-panel h3 {
                font-size: 16px;
                margin-bottom: 15px;
            }
            
            .info-panel p {
                margin-bottom: 12px;
            }
            
            /* Step indicator 모바일 최적화 */
            .step-indicator {
                padding: 15px;
                gap: 15px;
            }
            
            .step {
                       padding: 6px 10px;
            font-size: 10px;
            }
            
            /* 모달 모바일 최적화 */
            .terms-modal {
                padding: 5px;
            }
            
            .terms-modal-content {
                max-height: 95vh;
                max-width: 100%;
            }
            
            .terms-modal-header {
                padding: 12px 15px;
            }
            
            .terms-modal-header h3 {
                font-size: 15px;
            }
            
            .terms-modal-body {
                padding: 15px;
                max-height: calc(95vh - 60px);
            }
            
            .terms-modal-body h4 {
                font-size: 14px;
                margin: 12px 0 6px 0;
            }
            
            .terms-modal-body p {
                font-size: 12px;
                margin-bottom: 10px;
            }
            
            .terms-date {
                margin-top: 20px;
                padding-top: 12px;
                font-size: 11px;
            }
            
            /* 알림 토스트 모바일 최적화 */
            .notification {
                top: 10px;
                right: 10px;
                left: 10px;
                padding: 12px 16px;
                font-size: 13px;
                border-radius: 8px;
                text-align: center;
            }
            
            /* 팝업 닫기 버튼 최적화 */
            .popup-close {
                top: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
                font-size: 18px;
            }
            
            /* 할인 표시 최적화 */
            .savings-indicator {
                padding: 8px 15px;
                font-size: 12px;
                margin-top: 8px;
            }
        }