/* --- 기본 CSS --- */
 @import url("font.css");
        * { margin: 0; padding: 0; box-sizing: border-box; }
        .on-pc {display:block;}
        .on-mo {display:none;}
        body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f0f0f0; }
        .popup-overlay { display: flex; justify-content: center; align-items: center; z-index: 1000; }
        
        /* --- 팝업 컨테이너 공통 스타일 --- */
        .popup-container {
            margin: 40px;
            width: 60%;
            max-width: 1000px;
            background-color: #ffffff;
            color: #333;
            border-radius: 16px;
            position: relative;
            height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        
        /* --- 1단계 (차량번호 입력) 뷰 --- */
        .popup-container.step1-view {
            width: 100%;
            height: auto;
            background: linear-gradient(to bottom, #8A693D 5%, #000000 20%);
            color: #FFFFFF;
            padding: 40px;
            justify-content: space-between;
        }

        /* --- 2단계 (조회 결과) 뷰 --- */
        .popup-container.step2-view {
            width: 100%;
            height: auto;
        }

        /* 닫기 버튼 */
        .close-btn { 
            position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; 
            cursor: pointer; 
            border:0; background: transparent;
            display: flex; justify-content: center; align-items: center; z-index: 10; }
        .step1-view .close-btn { color: #1E1E1E; }

        /* --- 1단계 내부 스타일 --- */
        #popup-step1 { 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
            flex: 1;
            min-height: 0;
            width: 100%;
            height: auto;
            background: linear-gradient(to bottom, #8A693D 5%, #000000 20%);
            padding: 40px;
        }
        #popup-step1 .popup-content { display: flex; flex-direction: column; align-items: center; justify-content:center; height: 100%;}
        #popup-step1 .popup-content .logo { margin-top:0; }
        #popup-step1 .popup-content .logo-subtitle { 
		font-family: 'Pretendard_m'; font-size: 18px; color: #e0e0e0; margin-top: 8px; letter-spacing: 2px; display: inline-block; position: relative;}
		#popup-step1 .popup-content .logo-subtitle::after {
		content: '';
         width:5px;
	     height:5px;
	     border-radius: 50%;
	     background:#e51e46;
         position: absolute;
          right: -8px; 
		   bottom: 2px;

         }
        #popup-step1 .prompt-message { font-size: 26px; font-weight: 600; margin: 60px 0; text-align:center; color:#ffffff;}
        #popup-step1 .prompt-message2 { width:100%; font-size: 14px;  margin: 10px 0; text-align:left; color:#d4d4d4; line-height:140%;}
        #popup-step1 .vehicle-input { width: 100%; background-color: transparent; border: none; border-bottom: 1px solid #555; color: #FFFFFF; font-size: 24px; padding: 12px 0; text-align: left; outline: none; }
        #popup-step1 .vehicle-input::placeholder { font-family: 'Pretendard_m'; color: #888; }
        #popup-step1 .vehicle-input:focus { border-bottom-color: #e51e46; }
        #popup-step1 .submit-btn {  margin:20px 0;
            font-family: 'Pretendard_m'; width: 100%; padding: 20px; background-color: #e51e46; color: #FFFFFF; border: none; border-radius: 8px; font-size: 20px; font-weight: bold; cursor: pointer; margin-top: auto;
            transition: background-color 0.3s ease; }
        #popup-step1 .submit-btn:hover {    
        background-color: #98102A;
              }    
        
        /* --- 2단계 내부 스타일 --- */
        #popup-step2 { 
            display: none; 
            text-align: left; 
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .popup-scroll-wrapper {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 30px 35px;
        }

        .back-to-step1-btn {
            background: none;
            border: 1px solid #ddd;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-size: 20px;
            font-weight: bold;
            color: #555;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            flex-shrink: 0;
        }

        .popup-header {position: relative;}
   
        .popup-header .title-wrapper {
            display: flex; align-items: center; flex-wrap: wrap; align-content:flex-start;
            padding-right: 32px; 
        }
        /* .popup-header .logo-text { font-family: sans-serif; font-size: 28px; font-weight: 900; color: #000; letter-spacing: -1px; } */
        .popup-header .title-wrapper .logo-text {padding-top:3px; margin-right:15px;}
        .popup-header .title-wrapper .logo-text > img {width:85px;}
        .popup-header .title-wrapper .logo-text2 { background:#eb2323; color:#fff; font-size:14px; padding:3px 6px; border-radius: 3px;}

        .popup-header .title-wrapper  .title { font-size: 28px; font-weight: 600; display: inline-block; margin-right:10px;}
        .vehicle-info { border-bottom: 1px solid #eee;      margin-top: 30px;}
        .info-row { display: flex; font-size: 16px; padding: 15px 5px; }
        .info-row:not(:last-child) { border-bottom: 1px solid #eee; }
        .info-label { color: #888; width: 100px; flex-shrink: 0; }
        .info-value { color: #333; font-weight: 500; }
        .recommend-section { margin-top: 30px; }
        .recommend-header {
            display: flex;
            justify-content: space-between; 
            align-items: center;
            padding-bottom: 15px; 
            border-bottom: 2px solid #e51e46; 
        }
        .recommend-header .recommend-title { font-size: 20px; font-weight: 600; position: relative; }
        .recommend-header .recommend-capacity {
            font-size: 16px;
            font-weight: 500;
            color: #555;
            white-space: nowrap; 
        }
        .product-list { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; }
        .product-item { display: flex; align-items: center; gap: 20px; padding: 10px 0; border-bottom: 1px solid #eee; }
        .product-item:last-child { border-bottom: none; }
        .product-item img { width: 80px; height: auto; }
        .product-details { flex-grow: 1; }
        .product-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .product-title strong { font-size: 18px; font-weight: 600; }
        .tag { font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; color: #fff; }
        .tag-flagship { background-color: #d92d48; }
        .tag-premium { background-color: #ff8a00; }
        .tag-standard { background-color: #007aff; }
        .product-description { font-size: 14px; color: #888; }
        .purchase-link {
             border: 1px solid #ddd; border-radius: 30px; padding: 10px 15px; text-decoration: none; color: #333; font-weight: 500; 
             font-size: 14px; display: inline-flex; align-items: center; white-space: nowrap;
            transition: background-color 0.6s ease; }
        .purchase-link:hover {background-color: #f0f0f0;}
        .purchase-link::after { 
            background-image: url(../images/ico_next.png);
            width: 5px;
            height: 10px;
            content: ''; display: inline-block; margin-left: 8px;  }
        .footer-note { font-size: 14px; color: #999; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }

        .footer-note2 {  margin-top: 30px; padding-top: 20px; border-top: 2px solid #e51e46;}
        .footer-note2 h3 {font-size: 14px; color: #464545; margin-bottom:5px;}
        .footer-note2 p {font-size: 14px; color: #999;line-height:140%;}

        /* ✨ 1. 하단 버튼 영역 스타일 추가 */
        .popup-footer {
            text-align: center;
            padding: 15px 35px;
            border-top: 1px solid #eee;
        }

           




        .back-to-step1-footer-btn {
		    font-family: 'Pretendard_m';
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 500;
            background-color: #f0f0f0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.6s ease;
        }
        .back-to-step1-footer-btn:hover {
            background-color: #e51e46;
            color:#ffffff;
        }





        /* --- 반응형 CSS --- */
        @media (max-width: 768px) {

           .on-pc {display:none;}
           .on-mo {display:block;}
		   .popup-container { 		  
            height: 80vh; 
			width:100%;
			margin:20px;
           
        }
            .popup-container.step1-view, .popup-container.step2-view {
                width: 340px;
                height: auto; 
            }
            .popup-container.step1-view { 
                height: 520px;
                padding: 30px 20px;
            }

            .popup-scroll-wrapper { padding: 20px; }
            #popup-step1 .popup-content {}
            #popup-step1 .logo { font-size: 50px; }
            #popup-step1 .logo-subtitle { font-size: 14px; }
            #popup-step1 .prompt-message { font-size: 18px; margin: 20px 0; }
            #popup-step1 .prompt-message2 { width:100%; font-size: 0.7rem; }
            #popup-step1 .vehicle-input, #popup-step1 .submit-btn { font-size: 16px; }
            .close-btn { top: 15px; right: 22px; width: 28px; height: 28px; font-size: 14px; }
            .popup-header .title-wrapper { padding-right: 28px; }
            .popup-header .logo-text, .popup-header .title { font-size: 28px; }
            .info-row { flex-direction: column; gap: 4px; padding: 12px 0; }
            .info-label { width: auto; }
            .product-item { flex-direction: column; align-items: flex-start; gap: 10px; }
            .purchase-link { margin-top: 10px; }
            .popup-footer { padding: 15px 20px; }
            .back-to-step1-footer-btn { width: 100%; }
            .product-item img {width: 150px; margin:0 auto;}

            .popup-header .title-wrapper .logo-text2 {margin:10px 0; max-width:50%;  background:#eb2323; color:#fff; 
                font-size:13px; padding:3px 6px; border-radius: 3px;}

        }