@charset "utf-8"; /* 배송 상세 정보 스타일 */ .dafl_instl_photo_wrap { margin-bottom: 1rem; } .dafl_instl_img_wrap { margin-bottom: 0.5rem; border: 1px solid #dee2e6; border-radius: 0.25rem; overflow: hidden; } .dafl_instl_img_wrap img { display: block; width: 100%; height: auto; max-width: 100%; } .dafl_instl_photo_wrap ul.d-table { display: flex !important; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .dafl_instl_photo_wrap ul.d-table li { flex: 1; } .dafl_instl_photo_wrap ul.d-table li:last-child { margin-right: 0; } /* 배송 진행 상태 스타일 */ .delivery-progress-container { position: relative; padding: 2rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .delivery-progress-tabs { display: flex; justify-content: space-between; align-items: flex-start; position: relative; max-width: 800px; margin: 0 auto; } .delivery-progress-tabs::before { content: ''; position: absolute; top: 30px; left: 20%; right: 20%; height: 3px; background: #e9ecef; z-index: 1; } .progress-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; position: relative; z-index: 2; } .progress-step.completed:not(:last-child)::after { background: linear-gradient(90deg, #28a745, #20c997); } .progress-step.completed ~ .progress-step.completed::before, .progress-step.completed::before { background: linear-gradient(90deg, #28a745, #20c997); } .step-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; position: relative; z-index: 3; transition: all 0.3s ease; } .progress-step.disabled .step-icon { background: #f8f9fa; color: #adb5bd; border: 3px solid #e9ecef; } .progress-step.completed .step-icon { background: linear-gradient(135deg, #28a745, #20c997); color: white; border: 3px solid #28a745; box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); } .progress-step.active .step-icon { background: linear-gradient(135deg, #007bff, #0056b3); color: white; border: 3px solid #007bff; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); animation: pulse 2s infinite; } .step-label { font-weight: 600; font-size: 14px; color: #495057; margin-bottom: 4px; } .progress-step.active .step-label { color: #007bff; } .progress-step.completed .step-label { color: #28a745; } .step-time { font-size: 12px; color: #6c757d; font-weight: 500; } @keyframes pulse { 0% { box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } 50% { box-shadow: 0 4px 25px rgba(0, 123, 255, 0.5); } 100% { box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } } /* 정보 행 스타일 */ .info-row { display: flex; padding: 1rem 0; border-bottom: 1px solid #f1f3f4; align-items: flex-start; } .info-row:last-child { border-bottom: none; } .info-label { min-width: 120px; font-weight: 600; color: #495057; font-size: 14px; padding-right: 1rem; flex-shrink: 0; } .info-value { flex: 1; color: #212529; font-size: 15px; line-height: 1.5; } .product-name em { font-style: normal; color: #6c757d; font-weight: 500; } .place-name { color: #495057; } .payment-info { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* 호버 효과 */ .modern-card.hover-lift-sm:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } /* 아이콘 래퍼 스타일 */ .icon-wrapper-32 { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; } .icon-wrapper-40 { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; } /* 이미지 레이아웃 스타일 */ .img_layout_wrap { max-width: 90vw; max-height: 90vh; overflow: auto; } .img_layout_wrap img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* 제품 이미지 스타일 */ .product-image-container { transition: transform 0.3s ease; } .product-image-container:hover { transform: translateY(-5px); } .no-image-placeholder { padding: 3rem 1rem; background: #f8f9fa; border-radius: 8px; } /* 만족도 조사 스타일 */ .satisfaction-stars .satisfaction-star { margin: 0 3px; transition: all 0.2s ease; } .satisfaction-stars .satisfaction-star:hover { transform: scale(1.2); } #satisfactionFeedback { resize: vertical; border-radius: 8px; } #satisfactionFeedback:focus { border-color: #ffc107; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } .satisfaction-star-display { font-size: 1.8em; } .satisfaction-star-interactive { font-size: 2em; cursor: pointer; } .satisfaction-form-hidden { display: none; } /* 공통 NEW 뱃지 */ .cmn-new-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; background: linear-gradient(135deg, #ff6b6b, #ee5a6f); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 50%; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(238, 90, 111, 0.4); animation: cmn-pulse-glow 2s ease-in-out infinite; z-index: 1; } @keyframes cmn-pulse-glow { 0%, 100% { box-shadow: 0 2px 4px rgba(238, 90, 111, 0.3); } 50% { box-shadow: 0 2px 8px rgba(238, 90, 111, 0.6); } } @media (min-width: 768px) { #body-top-menu-body ul li { position: relative; } #body-top-menu-body ul li a { position: relative; display: inline-block; } #body-top-menu-body ul li a .cmn-new-badge { position: absolute; top: 0.25rem; right: -1.25rem; width: 24px; height: 24px; font-size: 0.75rem; } .scroll-down #body-top-menu-body ul li a .cmn-new-badge { font-size: 0.65rem; width: 1.25rem; height: 1.25rem; top: 0.375rem; right: -1rem; transition: all 0.3s ease; } } @media (max-width: 767px) { .cmn-new-badge { position: relative; } }