@charset "utf-8"; /* ===== 공통 유틸리티 클래스 ===== */ /* 호버 효과 공통 클래스 */ .hover-lift-sm:hover { transform: translateY(-2px); } .hover-lift-md:hover { transform: translateY(-4px); } .hover-lift-lg:hover { transform: translateY(-6px); } /* 컨테이너 공통 클래스 */ .container-centered-sm { max-width: 500px; margin: 0 auto; } .container-centered-md { max-width: 800px; margin: 0 auto; } .container-centered-lg { max-width: 1250px; margin: 0 auto; } /* 박스 섀도우 공통 클래스 */ .shadow-light { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .shadow-medium { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .shadow-heavy { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* 커서 스타일 */ .cursor-pointer { cursor: pointer !important; } /* 추가 너비 유틸리티 클래스 (기존 customTags.css에 없는 것들) */ .w-12 { width: 12% !important; } .w-16 { width: 16% !important; } .w-32 { width: 32% !important; } /**메인 상품/설치사진*/ .main-product-section-body .product-box { background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08); } .main-product-section-body .product-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; color: #333; } .main-product-section-body .product-title:before{content: ''; display: block; width: 5px; height: 1.5rem; background-color: #002a80; display: inline-block; margin-right: 0.5rem; vertical-align: -3px;} .main-product-section-body .product-main-img { border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease; height: 200px; object-fit: cover;} .main-product-section-body .product-main-img:hover { transform: scale(1.02); } /* 경하기가 없을 때 대표이미지 높이 증가 */ .main-product-section-body .product-main-img.expanded { height: 360px; } /* 수량 상태 카드 */ .main-product-section-body .product-stats { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;} .main-product-section-body .stat-card { background: #fff; border-radius: 12px; padding: 16px 20px; flex: 1; max-width: 140px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); text-align: center; transition: all 0.2s ease-in-out; border: 1px dashed #DDD; } .main-product-section-body .stat-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .main-product-section-body .stat-label { font-size: 13px; font-weight: 500; color: #666; margin-bottom: 4px; } .main-product-section-body .stat-value { font-size: 20px; font-weight: 700; } .main-product-section-body .stat-total .stat-value { color: #002a80; } /* 전체 */ .main-product-section-body .stat-used .stat-value { color: #6c757d; } /* 사용 */ .main-product-section-body .stat-scheduled .stat-value { color: #fd7e14; } /* 예정 */ .main-product-section-body .stat-available .stat-value { color: #198754; } /* 신청가능 */ /* 설치 이미지 */ .main_top_img_lst_wrap {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; grid-template-rows: repeat(2, 1fr); margin-left: 0.75rem;;} /* 경하기가 없을 때 12개 표시용 (6열 2행) */ .main_top_img_lst_wrap.expanded {display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; grid-template-rows: repeat(2, 1fr); margin-left: 0.75rem;;} /* 경하기가 없을 때 설치이미지 크기 조정 */ .main_top_img_lst_wrap.expanded .install-img { height: 174px; } .main-product-section-body .install-img-wrap { position: relative; overflow: hidden; border-radius: 6px; display: block;} .main-product-section-body .install-img { width: 100%; height: 97px; display: block; border-radius: 6px; transition: transform 0.2s ease; object-fit: cover; } .main-product-section-body .install-img:hover { transform: scale(1.04); } .main-product-section-body .badge-location { position: absolute; top: 6px; left: 6px; background-color: #002a80; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 12px; z-index: 1; white-space: nowrap; max-width: calc(100% - 12px); text-overflow: ellipsis; overflow: hidden;} /**공지사항*/ .notice_section-body .notice_section { background-color: #fff; } .notice_section-body .notice-rolling-wrap { padding: 1.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08); border-radius: 1rem; overflow: hidden; background-color: #fff;;} .notice_section-body .notice-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; /* 여백 줄임 */ } .notice_section-body .notice-header h6 { margin: 0; font-weight: 600; font-size: 1.75rem; color: #222; } .notice_section-body .notice-header .icon-btn { background: transparent; border: none; color: #444444; font-size: 16px; transition: color 0.2s ease; } .notice_section-body .notice-header .icon-btn:hover { color: #444444; cursor: pointer; } .notice_section-body .notice-rolling { width: 100%; height: 52px; overflow: hidden; position: relative; background-color: #ffffff; padding: 8px 0;} .notice_section-body .notice-rolling ul { margin: 0; padding: 0; transition: transform 0.6s ease-in-out; } .notice_section-body .notice-rolling li { height: 36px; display: flex; align-items: center; } .notice_section-body .notice-rolling a { max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice_section-body .notice-rolling .badge { font-size: 0.75rem; padding: 0.25rem 0.75rem;} /**배송 상태*/ .delivery-section-body .delivery-box { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08); height: 100%; } .delivery-section-body .delivery-box h5 {font-size: 1.5rem; font-weight: 600; color: #222;} .delivery-section-body .delivery-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 14px; } .delivery-section-body .delivery-item:last-child { border-bottom: none; } .delivery-section-body .delivery-col { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .delivery-section-body .col-date { width: 110px; color: #555; font-weight: 500; } .delivery-section-body .col-status { width: 100px; text-align: center; } .delivery-section-body .col-product { flex: 2; font-weight: 600; color: #222; } .delivery-section-body .col-user { width: 120px; color: #555; } .delivery-section-body .col-location { flex: 2; color: #888; } .delivery-section-body .status-badge { font-size: 12px; padding: 4px 10px; border-radius: 30px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; } .delivery-section-body .status-in-progress { background: #e0f4ff; color: #002a80; } .delivery-section-body .status-pending { background: #FFFFFF; color: #6B7280; border: 1px solid #E5E7EB; } .delivery-section-body .icon-btn { background: transparent; border: none; color: #6d6d6d; font-size: 16px; transition: color 0.2s ease; } .delivery-section-body .icon-btn:hover { color: #0056b3; cursor: pointer; } /* 고객 리뷰 */ .usr_rvw_form_main_card_wrap > ul {margin-left: -0.5rem; margin-right: -0.5rem;} .usr_rvw_form_main_card_wrap > ul>li > a{ padding: 1rem; margin: 0.5rem; border-radius: 1rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08); height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .usr_rvw_form_main_card_wrap > ul>li > a:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 8px 30px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .usr_rvw_form_main_card_wrap .review_cont{color: #666; margin-top: 0.25rem; min-height: 4.5rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .usr_rvw_form_main_card_img_wrap {flex: 0 0 8rem; height: 8rem; border: 1px solid #dee2e6; border-radius: 0.5rem; background-position: center; background-size: cover; overflow: hidden;} .usr_rvw_form_main_card_img_wrap + div {flex: 1;} .usr_rvw_form_main_card_img {width: 100%; height: 100%; background-position: center; background-size: cover; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .usr_rvw_form_main_card_img:hover {transform: scale(1.25); transition: all 0.2s ease-in-out; overflow: hidden;} .review_reply_cont_wrap{ background-color: #EEE; padding: 1rem; border-radius: 1rem; margin-top: 0.5rem;} .review_reply_cont_wrap > ul > li:first-child {font-size: 1rem; font-weight: 700; color: #333;} .review_reply_cont{color: #666;} /* 공지사항 섹션 스타일 */ .notice-section-wrap { width: 100%; overflow: visible; } .notice-section-wrap .notice-content-wrap { width: 100%; overflow: visible; } .notice-section-wrap .notice-rolling-wrap { height: 303px; overflow: hidden; position: relative; width: 100%; } .notice-section-wrap .notice-rolling { position: relative; transition: margin-top 0.8s ease; width: 100%; } .notice-section-wrap .main-notice-item { width: 100%; height: 93px; overflow: visible; margin: 0 0 8px 0; padding: 0; box-sizing: border-box; } .notice-section-wrap .main-notice-item > div { height: 93px; width: 100%; max-width: none; overflow: visible; box-sizing: border-box; display: flex; align-items: start; } .notice-section-wrap .notice-content-summary { display: block; width: 100%; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .notice-section-wrap .hover-link:hover { color: #007bff !important; text-decoration: underline !important; } .notice-section-wrap .modern-badge { padding: 0.25em 0.6em; font-size: 0.75em; font-weight: 600; border-radius: 0.375rem; white-space: nowrap; } .notice-section-wrap .icon-text-xs { font-size: 0.75rem; } .notice-section-wrap .text-sm { font-size: 0.875rem; flex-wrap: wrap; } .notice-section-wrap .icon-large-muted { font-size: 3rem; } /* 더보기 버튼 스타일 */ .notice-section-wrap .btn.btn-outline-secondary { border-color: #6c757d; color: #6c757d; padding: 0.5rem 1.5rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.2s; } .notice-section-wrap .btn.btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d; color: white; } /* 반응형 처리 */ @media (max-width: 768px) { .notice-section-wrap .d-flex.justify-content-between { flex-direction: column; align-items: flex-start; } .notice-section-wrap .ml-3.text-right { margin-left: 0 !important; margin-top: 0.5rem; text-align: left !important; } .notice-section-wrap .text-sm { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .notice-section-wrap .text-sm>span { margin-right: 0 !important; } } /* 서브페이지 */ /* 공지사항 - 상세 */ .notice_info_form_wrap {margin-top: 2rem;} .notice_info_form_title {font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: #333; display: flex; align-items: center;} .notice_info_form_title > p {flex: 1;} .notice_info_form_info_lst {display: flex; gap: 2rem; margin-top: 1rem; color: #626d84; font-weight: 400; padding-bottom: 1rem;} .notice_info_form_cont {padding: 3rem 0; border-top: 1px solid #e2e4e9; border-bottom: 1px solid #e2e4e9; min-height: 300px;} /* 모던 카드 스타일 (세션 헤더용) */ .modern-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden; transition: all 0.3s ease; } .modern-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .modern-card-header { background: #F8FAFC; color: #1E293B; padding: 20px 24px; border: none; border-bottom: 1px solid #E2E8F0; } .modern-card-body { padding: 24px; } /* 자연스러운 섹션 헤더 스타일 */ .section-header { margin-bottom: 2rem; } .section-header:has(.recmd-prd-title) { display: flex; justify-content: flex-start; align-items: flex-end; gap: 1rem;} .section-header:has(.recmd-prd-title) > div:first-of-type {flex: 0 0 55%;} .section-header:has(.recmd-prd-title) > h5 {font-weight: 700;} .logo-profile { width: 60px !important; height: 60px !important; border-radius: 50%; background-image: none !important; background: #F8FAFC !important; border: 3px solid #E8F4FD; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease; flex-shrink: 0; } .logo-profile:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .logo-profile-pink { border-color: #FCE7F3; } .logo-profile-green { border-color: #D1F7D6; } .logo-profile-icon { display: flex; align-items: center; justify-content: center; background: none; } .section-title { font-size: 1.75rem; font-weight: 700; color: #1F2937; margin: 0; line-height: 1.2; } .section-description { font-size: 0.875rem; color: #6B7280; line-height: 1.5; margin: 0; } .section-logo { width: 80px; height: 80px; flex-shrink: 0; } /* 반응형 섹션 헤더 */ @media (max-width: 768px) { .logo-profile { width: 65px !important; height: 65px !important; } .section-logo { width: 65px !important; height: 65px !important; } .section-title { font-size: 1.4rem; } .section-description { font-size: 0.85rem; } .section-header .d-flex { flex-direction: column; text-align: center; } .section-logo { margin-bottom: 1rem !important; margin-right: 0 !important; } } /* 제품목록 페이지 - 제품 카드 스타일 */ .product-card { border-radius: 16px; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.08); cursor: pointer; } /* 선택된 제품 카드 스타일 */ .product-card.selected { border: 3px solid #667eea; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4); transform: translateY(-3px); } .product-card.selected .product-overlay { background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(102, 126, 234, 0.2) 50%, rgba(118, 75, 162, 0.5) 100%); } .product-card.selected .product-select-btn { background-color: #667eea; border-color: #667eea; color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .product-card.selected .product-select-btn i { color: white; } /* 제품 선택 버튼 스타일 */ .product-select-btn { transition: all 0.3s ease; border-width: 1px; font-weight: 500; } .product-select-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); } .product-select-btn.selected { background-color: #667eea; border-color: #667eea; color: white; } .product-select-btn.selected i { color: white; } /* 선택된 제품 요약 영역 */ .selected-products-summary { position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; border-top: 2px solid #667eea; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); padding: 20px 0; z-index: 1000; transform: translateY(100%); transition: transform 0.3s ease; } .selected-products-summary.show { transform: translateY(0); } .selected-info { font-size: 1.1rem; font-weight: 600; color: #1F2937; } .selected-count { color: #007bff; font-size: 1.3rem; font-weight: 700; } .selected-products-list { margin-top: 8px; font-size: 0.9rem; color: #6B7280; max-height: 40px; overflow-y: auto; } .selected-product-item { display: inline-block; background: #E6F3FF; padding: 4px 8px; margin: 2px 4px 2px 0; border-radius: 12px; font-size: 0.85rem; } /* 하단 요약 영역이 있을 때 페이지 하단 여백 */ .has-selected-products { padding-bottom: 120px; } /* 제품 정보 영역 */ .product-info { padding: 15px; } /* 제품 이미지 전용 영역 */ .product-image-area { position: relative; border: 1px solid rgba(0,0,0,0.05); overflow: hidden; height: 120px; min-height: 120px; } /* 작은 카드에서의 폰트 크기 조정 */ .col-md-4 .product-info h6 { font-size: 0.95rem; } .col-md-4 .product-info .text-muted { font-size: 0.8rem; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); border-color: rgba(102, 126, 234, 0.5); } /* .product-card:hover:not(.selected) 규칙 제거 - background-image를 덮어씌우지 않도록 */ .product-card.selected:hover { box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4); transform: translateY(-4px); } .product-card-header { margin-bottom: 16px; } .product-card-body h6 { min-height: 48px; display: flex; align-items: center; color: #1F2937; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.8); } .product-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); } /* 배지 및 텍스트 가독성 향상 - 간소화 */ .product-card .text-muted { color: #6B7280; font-weight: 500; } /* 제품목록 페이지 - 반응형 디자인 */ @media (max-width: 768px) { .modern-card-header .modern-icon-wrapper { width: 40px; height: 40px; } .modern-card-header h5 { font-size: 1.1rem; } .modern-card-header small { font-size: 0.75rem; } .product-info { padding: 16px; } .product-image-area { height: 150px !important; } .product-icon { width: 40px; height: 40px; } } /* 제품 선택 체크박스 스타일 */ .product-select .form-check { display: flex; align-items: center; } .product-select .form-check-input { width: 1.2rem; height: 1.2rem; margin-right: 0.5rem; cursor: pointer; } .product-select .form-check-label { cursor: pointer; margin-bottom: 0; font-size: 0.9rem; color: #495057; } .product-select .form-check-label:hover { color: #007bff; } .product-select .form-check-input:checked + .form-check-label { color: #007bff; font-weight: bold; } /**=== 제품 주문 페이지 스타일 (prduList.jsp) ===**/ /* 선택된 제품 카드 스타일 */ .product-card.selected { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); border: 2px solid #667eea; } .product-card { transition: all 0.3s ease; border: 2px solid transparent; } /* 하단 고정 영역이 있을 때 body 여백 */ body.has-selected-products { padding-bottom: 60px; } /* 설치중 펄스 애니메이션 */ @keyframes pulse-install { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } /* 프리미엄 하단 요약 영역 */ .premium-summary { background: rgba(255, 255, 255, 0.92); border-top: 1px solid rgba(102, 126, 234, 0.5); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); } .premium-content { padding: 8px 0; position: relative; } .premium-content::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #667eea; border-radius: 2px; } /* 선택 정보 스타일링 */ .selection-badge { display: flex; align-items: center; background: rgba(243, 244, 255, 0.8); border: 1px solid rgba(202, 210, 248, 0.5); padding: 6px 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } .premium-icon { color: #667eea; font-size: 22px; margin-right: 8px; } .selection-count { font-weight: 600; color: #667eea; font-size: 15px; letter-spacing: -0.025em; } .total-amount { color: #ffffff; font-weight: 700; } /* 프리미엄 통합 주문 버튼 */ .premium-order-btn-integrated { position: relative; background: #3b82f6; border: none; border-radius: 8px; padding: 10px 24px; color: white; font-weight: 600; font-size: 14px; box-shadow: 0 3px 15px rgba(59, 130, 246, 0.3); transition: all 0.3s ease; min-width: 200px; } .premium-order-btn-integrated:hover { transform: translateY(-2px); background: #2563eb; box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4); } .premium-order-btn-integrated:active { transform: translateY(-1px); } .btn-content-integrated { display: flex; align-items: center; justify-content: space-between; width: 100%; } .order-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .order-text { font-size: 13px; font-weight: 500; margin-bottom: 1px; opacity: 0.9; } .order-amount { font-size: 18px; font-weight: 800; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .btn-icon-right { font-size: 20px; opacity: 0.9; } /* 선택된 상품 이미지들 */ .selected-products-images { overflow-x: hidden; max-width: 600px; flex-wrap: wrap; gap: 8px; } .selected-product-thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 3px solid rgba(102, 126, 234, 0.3); margin-right: 12px; flex-shrink: 0; background: #f8fafc; transition: all 0.2s ease; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12); } .selected-product-thumb:hover { border-color: rgba(102, 126, 234, 0.6); transform: scale(1.05); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25); } /* 프리미엄 클리어 버튼 */ .premium-clear-btn { width: 36px; height: 36px; border: 1px solid rgba(107, 114, 128, 0.4); background: rgba(249, 250, 251, 0.9); border-radius: 8px; color: #374151; font-size: 14px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: 600; } .premium-clear-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #1f2937; transform: rotate(180deg) scale(1.1); box-shadow: 0 2px 8px rgba(55, 65, 81, 0.15); } /* 프리미엄 진행 버튼 */ .premium-proceed-btn { background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 12px; padding: 14px 20px; color: white; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); min-width: 200px; min-height: 48px; display: flex; align-items: center; } .premium-proceed-btn:hover { background: linear-gradient(135deg, #5568d3, #6a4292); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); color: white; } .premium-proceed-btn .btn-content { display: flex; align-items: center; justify-content: space-between; width: 100%; } .premium-proceed-btn .btn-text-left { display: flex; flex-direction: column; align-items: flex-start; } .premium-proceed-btn .btn-label { font-size: 12px; opacity: 0.9; margin-bottom: 2px; } .premium-proceed-btn .btn-amount { font-size: 18px; font-weight: 700; } .premium-proceed-btn .btn-icon-right { font-size: 18px; margin-left: 12px; } /* 상품 카드 통합 버튼 (금액 + 장바구니) */ .product-select-btn .price-value-origin {text-decoration: line-through;} .product-select-btn-integrated { background: rgb(67 66 66 / 77%) !important; border: none !important; border-radius: 14px; padding: 8px 12px; color: white !important; font-weight: 600; font-size: 15px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1); width: 100%; display: flex; align-items: center; text-decoration: none; position: relative; overflow: hidden; } .product-select-btn-integrated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .product-select-btn-integrated:hover::before { left: 100%; } .product-select-btn-integrated:hover { background: linear-gradient(135deg, rgba(85, 104, 211, 0.95) 0%, rgba(106, 66, 146, 0.95) 100%) !important; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(102, 126, 234, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15); color: white !important; text-decoration: none; } .product-select-btn-integrated.btn-success { background: linear-gradient(135deg, rgba(52, 211, 153, 0.85) 0%, rgba(16, 185, 129, 0.85) 50%, rgba(5, 150, 105, 0.85) 100%) !important; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1); } .product-select-btn-integrated.btn-success:hover { background: linear-gradient(135deg, rgba(44, 193, 133, 0.95) 0%, rgba(5, 150, 105, 0.95) 50%, rgba(4, 120, 87, 0.95) 100%) !important; box-shadow: 0 8px 28px rgba(16, 185, 129, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-3px); } .product-select-btn-integrated .btn-content { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; z-index: 1; } .product-select-btn-integrated .btn-text-left { flex: 1; text-align: left; } .product-select-btn-integrated .btn-amount { font-size: 16px; white-space: nowrap; font-weight: 700; letter-spacing: -0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .product-select-btn-integrated .btn-icon-right { font-size: 18px; margin-left: 8px; background: linear-gradient(135deg, #667eea, #764ba2); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; } .product-select-btn-integrated .btn-icon-right::after { content: '+'; position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: white; font-size: 11px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .product-select-btn-integrated.btn-success .btn-icon-right::after { content: '✓'; background: linear-gradient(135deg, #10b981, #059669); animation: checkBadgeScale 0.3s ease-out; } @keyframes checkBadgeScale { 0% { transform: scale(0) rotate(-180deg); } 50% { transform: scale(1.2) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } .product-select-btn-integrated:hover .btn-icon-right { background: rgba(255, 255, 255, 0.25); } .product-select-btn-integrated.btn-success .btn-icon-right { background: rgba(255, 255, 255, 0.2); } #selectedProductsSummary.show { display: block !important; visibility: visible !important; } /* === 제품 페이지 레이아웃 스타일 === */ /* 로고 프로필 */ .logo-profile-section { width: 80px !important; height: 80px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #E8F4FD; overflow: hidden; background: #F8FAFC; } .logo-profile-image { width: 75px; height: 75px; object-fit: contain; } /* 섹션 상품 행 */ .section-products-row { margin-top: 35px; } /* 큰 제품 카드 */ .product-card-large { height: 600px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } /* 제품 오버레이 */ .product-overlay-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; } /* 국화 이미지 컨테이너 */ .chrysanthemum-image-wrap {position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; top: 50%; left: 0.5rem; transform: translateY(-50%);} .chrysanthemum-container { width: 48px; height: 48px; background: rgba(0, 0, 0, 0.8); border-radius: 8px; padding: 8px; box-shadow: 0 3px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; } .chrysanthemum-img { width: 32px; height: 32px; object-fit: contain; opacity: 1; } /* 조의 문구 컨테이너 */ .condolence-container { position: absolute; top: 90px; left: 25px; width: 60px; height: auto; background: rgba(0, 0, 0, 0.75); padding: 12px 0; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: upright; } .condolence-text { color: #FFFFFF; font-size: 0.875rem; font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: 1px; white-space: nowrap; writing-mode: vertical-lr; width: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; padding: 0.5rem 0; border-radius: 0.5rem;} .condolence-text p {text-shadow: 1px 1px 2px rgba(0,0,0,0.8);} /* 관련 상품 컨테이너 */ .related-products-container { position: absolute; top: 25px; right: 10px; display: flex; flex-direction: column; gap: 25px; } /* 관련 상품 썸네일 */ .related-thumb { position: relative; width: 50px; height: 50px; background-size: cover; background-position: center; border-radius: 8px; border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; } /* 설치중 뱃지 */ .install-status-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #28a745; color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 10px; font-weight: bold; animation: pulse-install 2s infinite; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* 지역 뱃지 */ .location-badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; font-size: 0.55rem; padding: 1px 3px; border-radius: 6px; white-space: nowrap; } /* === 제품 하단 오버레이 === */ /* 제품 버튼 직접 배치 (오버레이 제거) */ .product-select { position: absolute; bottom: 20px; left: 12px; right: 12px; z-index: 10; } .product-card-medium .product-select { bottom: 12px; } /* === 로고 프로필 변형 === */ /* 분홍색 로고 프로필 */ .logo-profile-pink { width: 80px !important; height: 80px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #FCE7F3; overflow: hidden; background: #F8FAFC; } /* 녹색 로고 프로필 */ .logo-profile-green { width: 80px !important; height: 80px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #D1F7D6; overflow: hidden; background: #F8FAFC; } /* === 고정 하단 요약 스타일 === */ /* 선택된 제품 요약 고정 위치 */ .selected-products-summary-fixed { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; z-index: 9999 !important; display: none !important; margin: 0 !important; } /* === 제품 이름 오버레이 === */ /* 제품 이름 오버레이 컨테이너 */ .product-name-overlay-container { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(0,0,0,0.4); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-name-overlay-container.main-title .product-name-text {font-size: 1.125rem} /* 제품 이름 텍스트 */ .product-name-text { color: #FFFFFF; font-size: 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); } /* === 제품 카드 스타일 === */ /* 중간 제품 카드 */ .product-card-medium { height: 380px; position: relative; background-size: auto 75%; background-position: top 30% center; background-repeat: no-repeat; } /* === 가격 및 텍스트 스타일 === */ /* 제품 가격 텍스트 (흰색) */ .product-price-text { color: #FFFFFF; font-size: 0.9rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); } /* 제품 가격 텍스트 (특별색 - 무료) */ .product-price-text-special { color: #7FFFD4; font-size: 0.9rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); } /* === 뱃지 스타일 === */ /* 상태 뱃지 공통 */ .status-badge { font-size: 0.7rem; padding: 0.3rem 0.6rem; border-radius: 50px; background: rgba(255,255,255,0.9); color: #495057; } /* 관계 뱃지 (지원대상/개인결제) */ .relation-badge{font-size: 11px; padding: 4px 10px; border-radius: 30px; font-weight: 500; letter-spacing: -0.01em;} .relation-badge.badge-auto{background: #d4edda; color: #155724; border: 1px solid #c3e6cb;} .relation-badge.badge-personal{background: #fff3cd; color: #856404; border: 1px solid #ffeaa7;} /* 상품 상태 영역 - 15년차: 명확성과 단순함 */ .product-status .status-badge{ background: #FFFFFF; color: #1F2937; border: 1px solid #E5E7EB; font-weight: 500; letter-spacing: -0.01em; } .product-status .status-badge .icon-check-green{color: #10B981;} .product-status .status-badge .icon-check-blue{color: #6B7280;} .product-status .status-badge .mx-1{color: #D1D5DB; font-weight: 300;} /* 아이콘 작은 크기 */ .icon-small { font-size: 0.6rem; } /* 체크 아이콘 (초록색) */ .icon-check-green { color: #28a745; } /* 📝 주문신청폼 최소 CSS (HTML 룰 준수) */ .border-bottom { border-bottom: 1px solid #dee2e6 !important; } /* sticky 요약 박스 z-index 조정 */ .sticky-summary-box { z-index: 1020 !important; max-height: calc(100vh - 100px); overflow-y: auto; } /* ===== 관리자 스타일 호환성 ===== */ /* Modern Badge 시스템 */ .modern-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; } .modern-badge.badge-success, .modern-badge.badge-warning, .modern-badge.badge-info, .modern-badge.badge-danger, .modern-badge.badge-secondary, .modern-badge.badge-primary { background: #F8FAFC !important; color: #475569 !important; border: 1px solid #E2E8F0 !important; font-weight: 500; padding: 6px 12px; border-radius: 6px; font-size: 12px; } .modern-badge.badge-success { border-left: 4px solid #10B981 !important; } .modern-badge.badge-warning { border-left: 4px solid #F59E0B !important; } .modern-badge.badge-info { border-left: 4px solid #3B82F6 !important; } .modern-badge.badge-danger { border-left: 4px solid #EF4444 !important; } .modern-badge.badge-secondary { border-left: 4px solid #6B7280 !important; } .modern-badge.badge-primary { border-left: 4px solid #2563EB !important; } /* Modern Icon Wrapper */ .icon-wrapper-40 { width: 40px; height: 40px; } .icon-wrapper-32-sm { width: 32px; height: 32px; font-size: 14px; } .icon-wrapper-24-xs { width: 24px; height: 24px; font-size: 12px; } /* Modern Table 스타일 */ .modern-table { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden; } .modern-table .table { margin-bottom: 0; } .modern-table .table thead th { background: #F8FAFC; border-bottom: 1px solid #E2E8F0; font-weight: 600; color: #374151; padding: 12px 16px; } .modern-table .table tbody td { border-bottom: 1px solid #F1F5F9; vertical-align: middle; } .modern-table .table tbody tr:nth-child(even) { background: #FAFBFC; } .modern-table .table tbody tr:last-child td { border-bottom: none; } .modern-table .table tbody tr:hover { background: #EEF2F6 !important; } /* Modern 통계 카드 */ .modern-stat-item { padding: 16px 0; } .modern-stat-value { font-size: 2rem; font-weight: 900; margin-bottom: 8px; } .modern-stat-label { font-size: 0.875rem; color: #6B7280; font-weight: 500; } .font-weight-900 { font-weight: 900; } /* ===== 메인 페이지 배송 상태 스타일 ===== */ /* 배송 상태별 동적 클래스 - 기존 스타일과 동일하게 적용 */ .main-divy-apl-status-1 { background: #e0f4ff; color: #002a80; } .main-divy-apl-status-2 { background: #fff3cd; color: #856404; } .main-divy-apl-status-3 { background: #fff3cd; color: #856404; } /* 기본 상태 - 15년차: 단순하고 명확하게 */ .status-badge:not([class*="main-divy-apl-status-"]) { background: #FFFFFF; color: #374151; border: 1px solid #E5E7EB; } /* ===== 공통 배송 상태 뱃지 스타일 (PC) ===== */ /* 임시접수 */ .cmn-divy-apl-status-00 { background: #f8f9fa !important; color: #6c757d !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 접수중 */ .cmn-divy-apl-status-01 { background: #fff3cd !important; color: #856404 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 배송중 */ .cmn-divy-apl-status-02 { background: #e0f4ff !important; color: #002a80 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 배송완료 */ .cmn-divy-apl-status-03 { background: #d4edda !important; color: #155724 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 회수중 */ .cmn-divy-apl-status-04 { background: #e7d6f5 !important; color: #6f42c1 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 회수완료 */ .cmn-divy-apl-status-05 { background: #e2e8f0 !important; color: #475569 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 기타 */ .cmn-divy-apl-status-09 { background: #f8f9fa !important; color: #6c757d !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.25rem 0.75rem !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; } /* 통계 제목 스타일 */ .modern-stat-title { font-size: 1.8rem; color: #2c3e50; text-align: center; } /* ===== 공지사항 롤링 스타일 ===== */ .notice-rolling-container { height: 60px; overflow: hidden; position: relative; border: 1px solid #e9ecef; border-radius: 8px; background-color: #f8f9fa; } .notice-rolling-list { position: relative; transition: transform 0.5s ease-in-out; } .notice-rolling-item { height: 60px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid #e9ecef; } .notice-rolling-item:last-child { border-bottom: none; } .notice-rolling-item:hover { background-color: #e9ecef; } .notice-rolling-item a { color: #495057; text-decoration: none; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; } .notice-rolling-item a:hover { color: #007bff; } .notice-title { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 100px); } .notice-date { color: #6c757d; font-size: 0.875rem; margin-left: 15px; white-space: nowrap; } .notice-pin-icon { color: #ffc107; margin-right: 5px; } /* ===== ===== */ /* ===== 신청하기 액자화환 스타일 ===== */ .img_prdu_list_wrap { display: grid; grid-template-columns : repeat(4, 1fr); gap: 1.5rem 0.75rem; } .img_prdu_list_wrap > li { position: relative; overflow: hidden; } .img_prdu_list_wrap > li > h6 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .img_resize_btn { position: absolute; right: 0; top: 0; background-color: #FFF; border: 1px solid #DDD; padding: 5px 10px; border-radius: 0.25rem; } .okflag_frame_wrth_prd_btn { position: relative; width: 100%; padding-bottom: 66%; height: 0; } .okflag_frame_wrth_prd_btn > p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; width: 100%; height: 100%; background-size: cover; background-position: center center; } .dd-option-image, .dd-selected-image { vertical-align: middle; float: left; margin-right: 5px; max-width: 75px; max-height: 64px; } .frame-option-card { cursor: pointer; transition: border-color 0.3s ease; border: 2px solid #e9ecef; } .frame-option-card:hover, .frame-option-card.selected { border-color: #007bff; background-color: rgba(0, 123, 255, 0.05); } .frame-option-card.selected .text-dark { color: #007bff !important; } /* ============================= */ /* ===== 메인 페이지 No Result 및 설치내역 카드 스타일 ===== */ /* No Result 스타일 */ .main-no-result-container { display: flex; align-items: center; justify-content: center; min-height: 230px; background: #f8f9fa; border-radius: 12px; border: 2px dashed #dee2e6; margin: 1rem 0; } .main-no-result-content { text-align: center; padding: 1rem; max-width: 350px; } .main-no-result-icon { width: 50px; height: 50px; margin: 0 auto 1rem; background: linear-gradient(135deg, #ffc107, #fd7e14); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); } .main-no-result-icon i { font-size: 1.5rem; color: white; } .main-no-result-text h4 { color: #495057; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .main-no-result-text p { color: #6c757d; font-size: 0.875rem; line-height: 1.4; margin-bottom: 1rem; } .main-no-result-action .btn { border-radius: 25px; padding: 0.5rem 1.5rem; font-weight: 500; transition: all 0.3s ease; } .main-no-result-action .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* 설치내역 카드 스타일 */ .main-install-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .main-install-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; cursor: pointer; } .main-install-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .main-main-install-card-image { position: relative; height: 200px; overflow: hidden; } .main-main-install-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .main-install-card:hover .main-main-install-card-image img { transform: scale(1.05); } .main-main-install-card-badge { position: absolute; top: 12px; right: 12px; background: rgba(0, 123, 255, 0.9); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .main-main-install-card-location { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; } .main-main-install-card-location i { margin-right: 4px; } .main-main-install-card-content { padding: 1.25rem; } .main-main-install-card-date { color: #007bff; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; } .main-main-install-card-title { font-size: 1.1rem; font-weight: 600; color: #2d3748; margin-bottom: 0.75rem; line-height: 1.3; } .main-main-install-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .main-install-detail-item { display: flex; flex-direction: column; } .main-install-detail-label { font-size: 0.75rem; color: #718096; margin-bottom: 0.25rem; font-weight: 500; } .main-install-detail-value { font-size: 0.875rem; color: #2d3748; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-install-history-header { text-align: center; margin-bottom: 2rem; } .main-install-history-header h3 { color: #2d3748; font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; } .main-install-history-header p { color: #718096; font-size: 1rem; } /* 인라인 스타일 대체 클래스 */ .main-review-gap { gap: 0.5rem; } .main-review-bg-image { background-position: center; background-size: cover; } /* ===== 제품 목록 페이지 추가 스타일 ===== */ /* 선택된 제품 아이템 스타일 - 부트스트랩으로 대체 불가능한 것만 유지 */ .prdu-selected-product-image { width: 45px; height: 45px; object-fit: cover; border: 2px solid #28a745; } .prdu-selected-product-badge { position: absolute; top: -5px; right: -5px; background: #28a745; color: white; border-radius: 50%; width: 22px; height: 22px; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .prdu-selected-product-name { font-size: 10px; color: #666; line-height: 1.2; word-break: break-all; max-width: 80px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ===== 게시판 목록 페이지 스타일 ===== */ /* 전체 카운트 영역 스타일 */ .board-count-section { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* 게시판 리스트 스타일 */ .board-list-container { padding: 0; } .board-list { list-style: none; padding: 0; margin: 0; } .board-list .board-item:last-child { margin-bottom: 0; } .board-item { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 16px; transition: all 0.3s ease; border: 1px solid #e9ecef; } .board-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .board-item-pinned { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-left: 4px solid #495057; box-shadow: 0 2px 8px rgba(73, 80, 87, 0.2); } .board-item-pinned:hover { box-shadow: 0 4px 16px rgba(73, 80, 87, 0.3); } .board-link { display: block; padding: 20px; text-decoration: none; color: inherit; } .board-link:hover { text-decoration: none; color: inherit; } .board-content { width: 100%; } .board-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .board-title-section { display: flex; align-items: center;} .board-meta { display: flex; align-items: center; gap: 15px; font-size: 0.875rem; color: #6c757d; } .board-views { display: flex; align-items: center; gap: 4px; } .board-date { font-weight: 500; } .board-body { margin-top: 12px; } .board-title { font-size: 1.1rem; font-weight: 600; color: #212529; margin: 0; line-height: 1.4; flex: 1; } .board-summary { font-size: 0.9rem; color: #6c757d; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===== 게시판 상세 페이지 스타일 ===== */ /* 게시물 상세 컨테이너 */ .board-detail-container { padding: 20px 0; } /* 메타 정보 스타일 */ .board-meta-info { display: flex; justify-content: flex-end; gap: 20px; color: #6c757d; font-size: 0.9rem; } .board-meta-item { display: flex; align-items: center; gap: 5px; } .board-meta-item i { color: #868e96; } .board-content-area { min-height: 300px; padding: 20px 0; } /* 하단 버튼 영역 스타일 */ .board-actions-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; } /* 모던 버튼 스타일 */ .board-modern-btn { border-radius: 8px; font-weight: 600; padding: 12px 24px; transition: all 0.3s ease; border: none; } .board-modern-btn:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .board-modern-btn:active { transform: translateY(0); } /* 배지 스타일 강화 */ .board-badge { font-size: 0.8em; padding: 0.5em 0.8em; border-radius: 0.5rem; font-weight: 600; } /* === 파일 업로드 관련 CSS (기존 스타일과 독립적) === */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } #selectFilesBtn:hover { border-color: #20c997 !important; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2) !important; } .file-preview-item { position: relative; display: inline-block; margin: 8px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; width: 120px; height: 120px; } .file-preview-item:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .file-preview-item img { width: 100%; height: 80px; object-fit: cover; transition: all 0.3s ease; } .file-preview-item:hover img { transform: scale(1.05); } .file-preview-item .file-info { padding: 4px 6px; background: #f8f9fa; font-size: 0.7rem; text-align: center; color: #6c757d; height: 40px; display: flex; align-items: center; justify-content: center; } .file-preview-item .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .file-remove-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background-color: rgba(220, 53, 69, 0.9); color: white; border: none; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; opacity: 0.8; z-index: 10; } .file-remove-btn:hover { opacity: 1; transform: scale(1.1); background-color: #dc3545 !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4); } /* === 제품 추가정보 섹션 관련 CSS === */ .text-option { border-radius: 4px !important; margin: 2px 8px; } .text-option:hover { background: #f8f9fa !important; } .text-option.selected { background: #007bff !important; color: white !important; font-weight: bold; } /* ===== 제품 배송 신청 폼 페이지 스타일 ===== */ /* 메인 컨테이너 스타일 */ .prdu-form-main-container { padding-right: 20px; } .prdu-form-timeline-container { border-left: 3px dashed #dee2e6; padding-left: 50px; position: relative; } /* 타임라인 아이콘 공통 스타일 */ .prdu-timeline-icon-wrapper { position: absolute; z-index: 10; } .prdu-timeline-icon-wrapper.top { top: -10px; left: -21.5px; } .prdu-timeline-icon-wrapper.middle { top: 20px; left: -71.5px; } .prdu-timeline-icon-wrapper.bottom { bottom: -20px; left: -21.5px; } .prdu-timeline-icon { width: 40px; height: 40px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3); border: 3px solid #fff; } .prdu-timeline-icon i { color: white; font-size: 1rem; } .prdu-timeline-label { position: absolute; background: rgba(108, 117, 125, 0.8); color: white; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3); } .prdu-timeline-label.top { top: 50px; left: 5px; } .prdu-timeline-label.middle { bottom: 50px; left: 5px; } .prdu-timeline-arrow-up { position: absolute; top: -5px; left: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(108, 117, 125, 0.8); } .prdu-timeline-arrow-down { position: absolute; bottom: -5px; left: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(108, 117, 125, 0.8); } /* 제품 리스트 스타일 */ .prdu-product-list-container { overflow-x: auto; padding: 10px 0 20px 0; margin: -10px 0 -10px 0; } .prdu-product-image { height: 200px; object-fit: contain; width: 100%; } .prdu-product-name { font-size: 0.8rem; } .prdu-product-price { font-size: 1.1rem; } /* 폼 섹션 스타일 */ .prdu-form-section { background: #ffffff; border: 1px solid #e9ecef; position: relative; } /* 추가 정보 표시 영역 스타일 */ .step2-additional-items-display { display: none; } .step2-additional-items-container { background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.25rem; } .step2-additional-items-title { font-weight: 600; color: #495057; font-size: 0.95rem;} .step2-additional-items-title i { color: #6c757d; } .step2-additional-item { display: none; } .step2-additional-item-label { font-weight: 600; color: #6c757d; font-size: 0.9rem; margin-bottom: 0.25rem; } .step2-additional-item-value { color: #495057; font-size: 0.9rem; word-break: break-word; } .step2-additional-item-relation .step2-additional-item-value { margin-right: 0.5rem; } /* 최종 확인 섹션 스타일 */ .prdu-final-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; border-radius: 15px; box-shadow: 0 8px 25px rgba(52, 58, 64, 0.1); position: relative; overflow: hidden; } .prdu-final-section-header { height: 4px; background: linear-gradient(90deg, #495057 0%, #343a40 100%); border-radius: 15px 15px 0 0; } .prdu-final-icon { background: linear-gradient(135deg, #495057 0%, #343a40 100%); margin-bottom: 8px; width: 48px; height: 48px; } .prdu-final-icon i { font-size: 1.2rem; } .prdu-final-title { font-size: 0.95rem; } /* 동의 섹션 스타일 */ .prdu-agreement-section { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid #e9ecef; box-shadow: 0 2px 12px rgba(0,0,0,0.03); } .prdu-checkbox-wrapper { width: 40px; height: 40px; margin-right: 20px; flex-shrink: 0; } .prdu-agreement-checkbox { width: 40px; height: 40px; margin-right: 15px; flex-shrink: 0; cursor: pointer; accent-color: #28a745; } .prdu-agreement-label { line-height: 1.5; color: #2f3337; font-size: 1.05rem; cursor: pointer; margin-bottom: 0; } .prdu-agreement-label i { font-size: 1rem; } .prdu-agreement-highlight { color: #1e88e5; } .prdu-agreement-description { font-size: 0.9rem; color: #78909c !important; } .prdu-agreement-description i { color: #4caf50; } /* 제출 버튼 스타일 */ .prdu-submit-btn { min-height: 52px; font-size: 1.1rem; padding: 12px 20px; border: 2px solid #90a4ae; color: #546e7a; border-radius: 8px; font-weight: 600; background: white; } .prdu-easypay-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .prdu-easypay-wrap--fill { width: 100%; } .prdu-easypay-paybtn { display: inline-flex; align-items: center; justify-content: center; width: 110px; min-height: 52px; height: 52px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; padding: 0 !important; cursor: pointer; transition: all 0.3s; line-height: 0; text-decoration: none; box-shadow: none !important; vertical-align: middle; } .prdu-easypay-paybtn:hover, .prdu-easypay-paybtn:focus { text-decoration: none; color: inherit; outline: none; opacity: 0.92; } .prdu-easypay-paybtn--naver { background-color: #00DE5A; } .prdu-easypay-paybtn--kakao { background-color: #ffeb00; } .prdu-easypay-paybtn img { display: block; max-height: 26px; max-width: 80%; width: auto; height: auto; object-fit: contain; } .prdu-easypay-paybtn.prdu-easypay-paybtn--grow { flex: 1; width: auto; min-width: 0; min-height: 52px; height: 52px; } .prdu-easypay-paybtn.prdu-easypay-paybtn--grow img { max-height: 26px; max-width: 80%; } /* 사이드바 스타일 */ .prdu-sidebar-container { width: 330px; flex-shrink: 0; } .prdu-sidebar-sticky { top: 150px; } .prdu-sidebar-summary { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; border-radius: 15px; box-shadow: 0 8px 25px rgba(52, 58, 64, 0.1); position: relative; overflow: hidden; } .prdu-sidebar-header { height: 4px; background: linear-gradient(90deg, #495057 0%, #343a40 100%); border-radius: 15px 15px 0 0; } .prdu-sidebar-icon { background: linear-gradient(135deg, #495057 0%, #343a40 100%); width: 48px; height: 48px; } .prdu-sidebar-icon i { font-size: 1.2rem; } .prdu-product-badge { width: 18px; height: 18px; font-size: 10px; } .prdu-product-name-text { font-size: 1rem; color: #495057; text-align: left;} .prdu-total-section { background: linear-gradient(135deg, #495057 0%, #343a40 100%); box-shadow: 0 4px 15px rgba(52, 58, 64, 0.3); } .prdu-total-label { font-size: 1rem; } .prdu-total-amount { font-size: 1.3rem; } /* ===== 로그인 팝업 폼 페이지 스타일 ===== */ /* input-group 반응형 스타일 */ .login-input-group { width: 100%; display: flex; flex-wrap: nowrap; align-items: stretch; height: 42px; } .login-input-group-prepend, .login-input-group-append { display: flex; } .login-input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 0.9rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #f8f9fa; border: 1px solid #ced4da; border-radius: 0.25rem; border-right: 0; min-width: 50px; justify-content: center; } .login-input-group-prepend .login-input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .login-input-group .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; height: 42px; border: 1px solid #ced4da; font-size: 0.9rem; border-left: 0; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .login-input-group .btn { height: 42px; border-left: 0; white-space: nowrap; padding: 0 1.5rem; font-weight: 600; letter-spacing: 0.5px; border-radius: 0 0.375rem 0.375rem 0; font-size: 0.9rem; } /* 체크박스 스타일 */ .login-custom-checkbox { display: inline-flex !important; align-items: center; cursor: pointer; font-size: 0.9rem; color: #495057; margin-top: 0.5rem; visibility: visible !important; } .login-custom-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; margin-right: 0.5rem; cursor: pointer; accent-color: #007bff; } .login-js-auto-login-wrap { display: block !important; visibility: visible !important; } /* 간편인증 버튼 스타일 */ .login-social-section { padding: 1.5rem 0; border-bottom: 1px solid #e9ecef; margin-bottom: 1rem; } .login-social-buttons { gap: 1rem; justify-content: center; flex-wrap: wrap; } .login-social-btn { width: 50px; height: 50px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .login-social-btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .login-social-btn:active { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .login-social-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); } /* 간편인증 헤더 스타일 */ .login-social-header { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .login-social-title { margin: 0 1rem; font-size: 0.9rem; color: #6c757d; font-weight: 500; white-space: nowrap; } .login-social-divider { flex: 1; height: 1px; background-color: #e9ecef; max-width: 100px; } /* 카카오 버튼 */ .login-kakao-btn { background-color: #FEE500; color: #000000; } .login-kakao-btn:hover { background-color: #FFDC00; color: #000000; } /* 카카오 채팅 아이콘 */ .login-kakao-chat-icon { width: 20px; height: 16px; background-color: #000000; border-radius: 12px 12px 12px 3px; position: relative; } .login-kakao-chat-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 2px; background-color: #FEE500; border-radius: 50%; box-shadow: -4px 0 0 #FEE500, 4px 0 0 #FEE500; } /* 네이버 버튼 */ .login-naver-btn { background-color: #03C75A; color: white; } .login-naver-btn:hover { background-color: #02B351; color: white; } .login-naver-n { font-weight: bold; font-size: 1.4rem; font-family: Arial, sans-serif; } /* 구글 버튼 */ .login-google-btn { background-color: #4285F4; color: white; } .login-google-btn:hover { background-color: #3367D6; color: white; } /* 애플 버튼 */ .login-apple-btn { background-color: #000000; color: white; } .login-apple-btn:hover { background-color: #333333; color: white; } /* 컨테이너 스타일 */ /* 문의전화 스타일 */ .login-host-dl {display: flex; justify-content: center; gap: 1rem; align-items: center;} .login-host-dl dt { font-size: 1rem; font-weight: 400; color: #6c757d;} .login-host-dl dd {} .login-host-dl dd a {color: #6c757d; font-size: 1.75rem; font-weight: 500;} /* ===== 개인정보처리방침 페이지 스타일 ===== */ /* 개인정보처리방침 글씨 크기 및 너비 조정 */ .pinfo-clct-util-agr-info-lst > li > dl > dt { font-size: 1.4rem; font-weight: 600; border-bottom: 1px solid #e9ecef; } .pinfo-clct-util-agr-info-lst > li > dl > dd { font-size: 1.2rem; line-height: 1.7; } .pinfo-clct-util-agr-info-lst ul li dl dt { font-size: 1.2rem; font-weight: 500; } .pinfo-clct-util-agr-info-lst ul li dl dd { font-size: 1.1rem; line-height: 1.6; } .pinfo-table th { font-size: 1.1rem; font-weight: 600; } .pinfo-table td { font-size: 1.1rem; line-height: 1.6; } .pinfo-table td ul li { font-size: 1.1rem; } .pinfo-text { font-size: 1.2rem; } .pinfo-text-center { font-size: 1.2rem; } .pinfo-proc-meth-info-fixed-form { overflow-x: hidden; } .pinfo-proc-meth-info-fixed-form .ui-dialog-content { overflow-x: hidden; word-wrap: break-word; } /* ===== 이용약관 페이지 스타일 ===== */ .trms-cont-wrap { overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; } .trms-cont-wrap p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.5rem; } .trms-cont-wrap h3 { margin-bottom: 1rem; } /* ===== 텍스트 트런케이트 공통 스타일 ===== */ .text-truncate-480 { width: 480px; } /* ===== 게시판 상세 페이지 공통 스타일 ===== */ .content-area { min-height: 300px; padding: 20px; } /* ===== 게시판 목록 페이지 공통 스타일 ===== */ /* Readonly Toggle 스위치 스타일 */ .readonly-toggle:disabled+.custom-control-label::before, .readonly-toggle:disabled+.custom-control-label::after { opacity: 1 !important; } .readonly-toggle:disabled:checked+.custom-control-label::before { background-color: #007bff !important; border-color: #007bff !important; } .readonly-toggle:disabled:checked+.custom-control-label::after { background-color: #fff !important; transform: translateX(0.75rem) !important; } .readonly-toggle:disabled+.custom-control-label::before { background-color: #6c757d !important; border-color: #6c757d !important; } .readonly-toggle:disabled+.custom-control-label { cursor: default !important; } /* 테이블 컬럼 스타일 */ .table-column-min-width { min-width: 0; } .table-link-wrapper { display: block; width: 100%; max-width: 100%; } .table-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-summary-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== 만족도 평가 스타일 ===== */ .satisfaction-star-submitted { font-size: 1.8em; } .satisfaction-star-interactive { font-size: 2em; cursor: pointer; } .satisfaction-card-hidden { display: none; } /* 청구 버튼 스타일 */ .btn-card-payment { background-color: #e3f2fd !important; border: 1px solid #bbdefb !important; color: #1976d2 !important; } /* 알림 관리 스타일 */ .min-width-0 { min-width: 0 !important; } /* 보관상품 관리 스타일 */ .storage-product-card { transition: all 0.3s ease; border: 1px solid #e9ecef; } .storage-product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; border-color: #007bff; } .storage-product-card .card-img-top { border-radius: 0.375rem 0.375rem 0 0; } .storage-product-card .card-header { padding: 0.75rem 1rem; background: #f8f9fa; border-bottom: 1px solid #e9ecef; } .storage-product-card .card-body { padding: 1rem; } .tab-badge { width: 20px; height: 20px; font-size: 0.75rem; top: -8px; right: -8px; } .h-200px { height: 200px !important; } /* 청구서 인쇄 스타일 */ .bill-table-main { border: 3px solid #c7c7c7 !important; } .bill-content-wrapper { width: 662px !important; } /* 청구서 이미지 래퍼 스타일 */ .bill-customer-name-wrapper, .bill-customer-info-wrapper, .bill-account-wrapper { position: relative; display: block; width: 100%; height: 100%; } .bill-img { display: block; width: 100%; height: auto; } /* 청구서 텍스트 오버레이 */ .bill-customer-name { position: absolute; z-index: 2; padding-left: 18px; left: 0; top: 3px; font-weight: bold; } .bill-customer-info-1 { position: absolute; z-index: 2; padding-left: 75px; left: 0; top: 6px; line-height: 25px; font-weight: bold; text-align: left; } .bill-customer-info-2 { position: absolute; z-index: 2; padding-left: 75px; left: 0; top: 31px; line-height: 25px; font-weight: bold; text-align: left; } .bill-customer-info-3 { position: absolute; z-index: 2; padding-left: 75px; left: 0; top: 55px; line-height: 25px; font-weight: bold; text-align: left; } .bill-account-info { position: absolute; top: 11px; left: 100px; display: block; } /* 청구서 테이블 스타일 */ .bill-table-container { padding: 15px; border: 2px solid #ffcd9e; background-color: #f2f2f2; } .bill-table-container-left { padding: 15px 15px 15px 15px; border: 2px solid #ffcd9e; background-color: #f2f2f2; } .bill-detail-table { border-collapse: collapse; border: 1px solid #999999; } .bill-header-cell { padding: 2px 2px 2px 5px; border: 1px solid #999999; font-weight: bold; background-color: #ffdcc5; } .bill-data-cell { border: 1px solid #999999; } .bill-data-cell-center { border: 1px solid #999999; } .bill-data-cell-right { border: 1px solid #999999; padding-right: 10px; } .bill-total-cell { padding: 2px 2px 2px 5px; border: 1px solid #999999; background: #efefef; } .bill-total-cell-alt { padding: 2px 10px 2px 5px; border: 1px solid #999999; background: #efefef; } /* 영수증 인쇄 스타일 */ .receipt-main-table { border: 2px solid #0018ff; text-align: right; } .receipt-header-border { border: none; border-bottom: #0018ff 1px solid; } .receipt-title-border { border: 2px solid #0000ff; padding: 5px 3px 5px 3px; } .receipt-no-border { border: none; } .receipt-supplier-table { border-collapse: collapse; border: 1px solid #0000ff; } .receipt-cell-blue { border: 1px solid #0000ff; } .receipt-stamp-wrapper { position: relative; z-index: 3; text-align: left; } .receipt-stamp-img { position: absolute; width: 70px; height: 70px; right: -3px; top: -30px; z-index: 2; } .receipt-detail-table { border-collapse: collapse; border: 1px solid #0000ff; } .receipt-total-table { border: 1px solid #0000ff; } /* 인쇄 오류 페이지 스타일 */ .print-error-body { font-family: 'Malgun Gothic', sans-serif; padding: 20px; text-align: center; } .print-error-container { max-width: 500px; margin: 0 auto; padding: 40px; border: 1px solid #dc3545; border-radius: 5px; background-color: #f8d7da; color: #721c24; } .print-error-icon { font-size: 48px; margin-bottom: 20px; color: #dc3545; } .print-error-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .print-error-message { font-size: 16px; margin-bottom: 30px; line-height: 1.5; } .print-error-btn { padding: 10px 20px; margin: 0 5px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; } .print-error-btn-secondary { background-color: #6c757d; color: white; } /* 인쇄 뷰 페이지 스타일 */ @media print { .print-page { size: A4; margin: 20mm; } .print-body { margin: 0; padding: 0; } .no-print { display: none !important; } } .print-view-body { font-family: 'Malgun Gothic', sans-serif; font-size: 12px; line-height: 1.4; margin: 0; padding: 20px; } .print-controls { text-align: center; margin-bottom: 20px; padding: 20px; background-color: #f8f9fa; border-radius: 5px; } .print-btn { padding: 10px 20px; margin: 0 5px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; } .print-btn:hover { opacity: 0.9; } .print-btn-primary { background-color: #007bff; color: white; } .print-btn-secondary { background-color: #6c757d; color: white; } .print-content { background: white; padding: 20px; border: 1px solid #ddd; border-radius: 5px; } /* 제품 주문 폼 스타일 */ .product-form-container { background: #ffffff; border: 1px solid #e9ecef; position: relative; margin-top: 2rem; } .product-icon-badge { position: absolute; top: 20px; left: -71.5px; z-index: 10; } .product-icon-circle { width: 40px; height: 40px; background: #6c757d; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3); border: 3px solid #fff; } .product-icon-white { color: white; font-size: 1rem; } .product-tooltip { position: absolute; bottom: 50px; left: 5px; background: rgba(108, 117, 125, 0.8); color: white; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3); } .product-tooltip-arrow { position: absolute; bottom: -5px; left: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(108, 117, 125, 0.8); } .frame-option-card { min-height: 120px; cursor: pointer; } .upload-preview-area { min-width: 140px; min-height: 140px; background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; border-color: #dee2e6; } .upload-preview-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .upload-delete-btn { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; padding: 0; } .upload-area { border-color: #dee2e6; background: #f8f9fa; } .upload-icon { font-size: 2rem; } .upload-btn { border-radius: 8px; cursor: pointer; } .preview-icon { font-size: 1.5rem; } .preview-text { font-size: 0.7rem; text-align: center; line-height: 1.2; } /* 배송 접수 방식 폼 스타일 */ .recv-method-card { min-height: 100px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center;} .recv-method-radio { width: 40px; height: 40px; flex-shrink: 0; cursor: pointer; accent-color: #28a745; } .file-upload-btn { border: 2px dashed #6c757d; padding: 20px 30px; width: 100%; transition: all 0.3s ease; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } .file-upload-icon { font-size: 2rem; animation: pulse 2s infinite; } .file-upload-text { font-size: 1.1rem; } .file-preview-container { background-color: #f8f9fa; min-height: 140px; } .file-preview-placeholder { line-height: 120px; } .file-preview-icon { font-size: 2rem; opacity: 0.3; } .file-preview-text { font-size: 0.9rem; opacity: 0.7; } .clear-files-btn { font-size: 0.75rem; } .direct-input-section { background: #ffffff; border: 1px solid #e9ecef; display: none; position: relative; } /* 제품 신청 폼 스타일 */ .prdu-product-scroll { overflow-x: auto; padding: 10px 0 20px 0; margin: -10px 0 -10px 0; } .prdu-phone-auth-btn { background: linear-gradient(135deg, #495057 0%, #343a40 100%); border: none; } /* ===== 서비스 소개 상세 페이지 스타일 ===== */ /* 게시물 상세 컨테이너 */ .board-detail-container { padding: 20px 0; } /* 메타 정보 스타일 */ .intro-meta-info { display: flex; justify-content: flex-end; gap: 20px; color: #6c757d; font-size: 0.9rem; } .intro-meta-item { display: flex; align-items: center; gap: 5px; } .intro-meta-item i { color: #868e96; } .intro-content-area { min-height: 300px; padding: 20px 0; } /* 하단 버튼 영역 스타일 */ .intro-actions-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; } /* 모던 버튼 스타일 */ .intro-modern-btn { border-radius: 8px; font-weight: 600; padding: 12px 24px; transition: all 0.3s ease; border: none; } .intro-modern-btn:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .intro-modern-btn:active { transform: translateY(0); } /* 배지 스타일 강화 */ .intro-badge { font-size: 0.8em; padding: 0.5em 0.8em; border-radius: 0.5rem; font-weight: 600; } /* ===== 마이페이지 1뎁스 탭 (Pill 버튼 형태) ===== */ .mypage-first-depth .btn-pill{ min-width: 200px; border-radius: 50px !important; padding: 8px 12px; font-weight: 500; font-size: 15px; transition: all 0.2s ease; border: 2px dashed #6c757d !important; background-color: transparent !important; color: #6c757d !important; } .mypage-first-depth .btn-pill:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background-color: #f8f9fa !important; color: #495057 !important; } .mypage-first-depth .btn-pill.btn-success{ border: 2px solid #343a40 !important; background-color: #343a40 !important; color: #fff !important; } .mypage-first-depth .btn-pill.btn-success:hover{ background-color: #23272b !important; border-color: #23272b !important; } .mypage-first-depth.nav-pills{ display: flex; flex-wrap: wrap; } .mypage-first-depth ~ .nav-tabs .nav-item:not(:first-child) {margin-left: 2px;} .mypage-first-depth ~ .nav-tabs .nav-link {min-width: 150px; text-align: center; border-color: #dee2e6 #dee2e6 #e9ecef !important;} .mypage-first-depth ~ .nav-tabs .nav-link.active {background-color: #343a40 !important; color: #fff !important; font-weight: 700 !important; border-color: #343a40 !important; box-shadow: 0 2px 8px rgba(52, 58, 64, 0.3); } /* ===== 배송상품 선택 메인 헤더 ===== */ .prdu-main-header-wrap{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25); padding: 2px; margin-bottom: 2rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);} .prdu-main-header-wrap:hover{box-shadow: 0 12px 35px rgba(102, 126, 234, 0.35); transform: translateY(-2px);} .prdu-main-header{background: #ffffff; border-radius: 14px; padding: 2rem;} .prdu-main-icon{flex-shrink: 0;} .prdu-icon-circle{width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); animation: pulse-icon 2s ease-in-out infinite;} .prdu-icon-circle i{font-size: 32px; color: #ffffff;} .prdu-main-content{flex: 1;} .prdu-main-title{font-size: 1.75rem; font-weight: 700; color: #2d3748; margin-bottom: 0.5rem;} .prdu-main-description{font-size: 0.95rem; color: #718096; line-height: 1.5;} @keyframes pulse-icon{0%, 100%{transform: scale(1);} 50%{transform: scale(1.05);}} @media (max-width: 768px){.prdu-main-header{padding: 1.5rem;} .prdu-icon-circle{width: 56px; height: 56px;} .prdu-icon-circle i{font-size: 24px;} .prdu-main-title{font-size: 1.35rem;} .prdu-main-description{font-size: 0.875rem;}} /* ===== PC 고객사 배송 목록 페이지 스타일 ===== */ .table tbody.JS-row { border-top: 1px solid #dee2e6; } .table tbody.JS-row:first-child { border-top: none; } /* tbody 전체에 배경색 적용 (홀수) - 더 강력한 선택자 */ .table-card .table tbody.JS-row:nth-of-type(odd) { background-color: #fff !important; } /* tbody 전체에 배경색 적용 (짝수) - 더 강력한 선택자 */ .table-card .table tbody.JS-row:nth-of-type(even) { background-color: #f8f9fa !important; } /* tr과 td는 배경색 투명하게 - 더 강력한 선택자 */ .table-card .table tbody.JS-row>tr, .table-card .table tbody.JS-row>tr:nth-child(odd), .table-card .table tbody.JS-row>tr:nth-child(even) { background-color: transparent !important; } .table-card .table tbody.JS-row>tr td { background-color: transparent !important; } /* hover 효과 */ .table-card .table tbody.JS-row:hover { background-color: #f1f3f5 !important; } .table-card .table tbody.JS-row:hover>tr { background-color: transparent !important; } /* thead 배경색 */ .table thead th { background: #f8f9fa; font-weight: 600; color: #495057; border-bottom: 2px solid #e9ecef; } /* ===== PC 호스팅 고객 검수 페이지 스타일 ===== */ /* 고객 검수중 배경 */ /* 제목 색상 */ .srv_gud_outer.customer-inspection .gud_info_wrap dt, .srv_gud_outer.customer-inspection .gud_info_wrap dd { color: #000; } .srv_gud_outer.customer-inspection .gud_info_wrap dt em { color: #ffc107; margin-left: 8px; margin-right: 8px;} /* 카드 스타일 */ .srv_gud_outer.customer-inspection .card_outer .card_inner { width: 1040px; height: 500px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 85%; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .icon { font-size: 80px; color: #000; margin-bottom: 20px; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .title { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 20px; letter-spacing: -1px; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .message { font-size: 20px; line-height: 32px; color: #495057; letter-spacing: -0.5px; margin-bottom: 20px; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .info-box { background: #f4f4f4; border: 2px solid #000; border-radius: 10px; padding: 20px; margin-top: 20px; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .info-box .info-title { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 10px; } .srv_gud_outer.customer-inspection .card_outer .card_inner .pstn-sta .info-box .info-text { font-size: 16px; line-height: 24px; color: #495057; } /* 버튼 */ .btn_bg_Blue, .btn_bg_Blue:hover { background: linear-gradient(135deg, #b8f5ff 0%, #86bcff 100%); color: #fff; border: none; } /* ===== PC 호스팅 초기 검수 페이지 스타일 ===== */ /* 내부 검수중 배경 */ /* 제목 색상 */ .srv_gud_outer.internal-inspection .gud_info_wrap dt, .srv_gud_outer.internal-inspection .gud_info_wrap dd { color: #000; } .srv_gud_outer.internal-inspection .gud_info_wrap dt em { color: #ffc107; margin-left: 8px; margin-right: 8px;} /* 카드 스타일 */ .srv_gud_outer.internal-inspection .card_outer .card_inner { width: 1040px; height: 500px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 85%; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .icon { font-size: 80px; color: #000; margin-bottom: 20px; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .title { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 20px; letter-spacing: -1px; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .message { font-size: 20px; line-height: 32px; color: #495057; letter-spacing: -0.5px; margin-bottom: 20px; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .info-box { background: #f4f4f4; border: 2px solid #000; border-radius: 10px; padding: 20px; margin-top: 20px; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .info-box .info-title { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 10px; } .srv_gud_outer.internal-inspection .card_outer .card_inner .pstn-sta .info-box .info-text { font-size: 16px; line-height: 24px; color: #495057; } /* 버튼 */ .btn_bg_Pink, .btn_bg_Pink:hover { background: linear-gradient(135deg, #b8f5ff 0%, #86bcff 100%); color: #fff; border: none; } /* ===== PC 호스팅 서비스 해지 페이지 스타일 ===== */ /* 홈페이지 비활성화 배경 */ /* 제목 색상 */ .srv_gud_outer.disabled .gud_info_wrap dt, .srv_gud_outer.disabled .gud_info_wrap dd { color: #000; } .srv_gud_outer.disabled .gud_info_wrap dt em { color: #ffc107; margin-left: 8px; margin-right: 8px;} /* 카드 스타일 */ .srv_gud_outer.disabled .card_outer .card_inner { width: 1040px; height: 443px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .srv_gud_outer.disabled .card_outer .card_inner .pstn-sta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 80%; } .srv_gud_outer.disabled .card_outer .card_inner .pstn-sta .icon { font-size: 80px; color: #000; margin-bottom: 20px; } .srv_gud_outer.disabled .card_outer .card_inner .pstn-sta .title { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 20px; letter-spacing: -1px; } .srv_gud_outer.disabled .card_outer .card_inner .pstn-sta .message { font-size: 20px; line-height: 32px; color: #495057; letter-spacing: -0.5px; } /* 버튼 */ .btn_bg_Purple, .btn_bg_Purple:hover { background: linear-gradient(135deg, #b8f5ff 0%, #86bcff 100%); color: #fff; border: none; } /* ===== PC 호스팅 서비스 정지 페이지 스타일 ===== */ /* 서비스 일시중단 배경 */ /* 제목 색상 */ .srv_gud_outer.temporary-suspend .gud_info_wrap dt, .srv_gud_outer.temporary-suspend .gud_info_wrap dd { color: #000; } .srv_gud_outer.temporary-suspend .gud_info_wrap dt em { color: #ffc107; margin-left: 8px; margin-right: 8px;} /* 카드 스타일 */ .srv_gud_outer.temporary-suspend .card_outer .card_inner { width: 1040px; height: 500px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 85%; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .icon { font-size: 80px; color: #000; margin-bottom: 20px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .title { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 20px; letter-spacing: -1px; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .message { font-size: 20px; line-height: 32px; color: #495057; letter-spacing: -0.5px; margin-bottom: 20px; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .info-box { background: #f4f4f4; border: 2px solid #000; border-radius: 10px; padding: 20px; margin-top: 20px; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .info-box .info-title { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 10px; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .info-box .info-text { font-size: 16px; line-height: 24px; color: #495057; } .srv_gud_outer.temporary-suspend .card_outer .card_inner .pstn-sta .info-box .info-text strong { color: #000; font-weight: 600; } /* 버튼 */ .btn_bg_Orange, .btn_bg_Orange:hover { background: linear-gradient(135deg, #b8f5ff 0%, #86bcff 100%); color: #fff; border: none; } /* ===== PC 배송신청 폼 페이지 스타일 ===== */ input[type="radio"]:checked+label .frame-option-card, .frame-option-card.selected { border-color: #28a745 !important; background: linear-gradient(135deg, #f8fff9 0%, #d4edda 100%) !important; } input[type="radio"]:checked+label .frame-option-card .font-weight-bold, .frame-option-card.selected .font-weight-bold { color: #28a745 !important; } /* 메인페이지 퀵 버튼 */ .main_qck_btn_lst_wrap > .row {align-items: stretch;} /* 메인 index 페이지 스타일 */ .summary-layout { display: flex; align-items: center; gap: 20px; } .summary-left { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; overflow: hidden; max-width: calc(100% - 220px); } .summary-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .selection-badge { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .selection-badge .premium-icon { font-size: 18px; color: #667eea; } .selection-count { font-weight: 600; color: #333; white-space: nowrap; } /* 선택된 상품 이미지 영역 */ .selected-products-images { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-width: 0; max-width: 100%; height: 125px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; background: rgba(255,255,255,0.6); border-radius: 12px; cursor: grab; user-select: none; } .selected-products-images:empty { display: none; } .selected-products-images.dragging { cursor: grabbing; } .selected-products-images::-webkit-scrollbar { height: 5px; } .selected-products-images::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 3px; } .selected-products-images::-webkit-scrollbar-thumb { background: rgba(102,126,234,0.4); border-radius: 3px; } .selected-products-images::-webkit-scrollbar-thumb:hover { background: rgba(102,126,234,0.7); } .selected-product-item { display: flex; flex-direction: column; align-items: center; width: 80px; height: 105px; flex-shrink: 0; position: relative; } .selected-product-img-wrap { position: relative; width: 64px; height: 64px; } .selected-product-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: none; } .selected-product-item:hover .selected-product-img { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .selected-product-badge { position: absolute; top: -5px; left: -5px; width: 20px; height: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .selected-product-remove { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: #ff4757; color: #fff; font-size: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; opacity: 0; } .selected-product-item:hover .selected-product-remove { opacity: 1; } .selected-product-remove:hover { transform: scale(1.1); background: #ff2f43; } .selected-product-name { margin-top: 4px; font-size: 10px; font-weight: 500; color: #495057; text-align: center; width: 80px; height: 26px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; word-break: keep-all; } /* 프리미엄 카테고리 탭 - 가로 한줄 */ .prdu-category-filter { display: flex; justify-content: center; flex-wrap: nowrap; gap: 12px; padding-bottom: 16px; } .prdu-filter-item { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 56px; background: #fff; border: 2px solid #e9ecef; border-radius: 12px; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); white-space: nowrap; min-width: 200px; } .prdu-filter-item:hover { border-color: #667eea; background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15); text-decoration: none; } .prdu-filter-item.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: #667eea; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35); } .filter-icon-wrapper { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(102, 126, 234, 0.12); border-radius: 8px; flex-shrink: 0; } .prdu-filter-item:hover .filter-icon-wrapper { background: rgba(102, 126, 234, 0.2); transform: scale(1.08); } .prdu-filter-item.active .filter-icon-wrapper { background: rgba(255, 255, 255, 0.25); } .filter-icon-wrapper i { font-size: 16px; color: #667eea; transition: color 0.3s ease; } .prdu-filter-item.active .filter-icon-wrapper i { color: #fff; } .filter-label { font-size: 15px; font-weight: 700; color: #495057; letter-spacing: -0.3px; transition: color 0.3s ease; } .prdu-filter-item:hover .filter-label { color: #667eea; } .prdu-filter-item.active .filter-label { color: #fff; } /* 비활성화된 상품 스타일 */ .common-product-item.product-disabled { opacity: 0.6; pointer-events: none; } .common-product-item.product-disabled .product-select-btn { cursor: not-allowed; } /* 비활성화된 깃발 스타일 */ .product-card.flag-disabled { opacity: 0.6; pointer-events: none; } .product-card.flag-disabled .product-select-btn { cursor: not-allowed; } @media (max-width: 768px) { .prdu-category-filter { max-width: 100%; gap: 8px; } .prdu-filter-item { padding: 14px 20px; } .filter-icon-wrapper { width: 28px; height: 28px; } .filter-icon-wrapper i { font-size: 14px; } .filter-label { font-size: 13px; } } /* 깃발 상품 스크롤 영역 */ .flag-products-scroll-wrapper { position: relative; padding: 0 25px; } .flag-products-scroll-wrapper.has-scroll-arrows { padding: 0 50px; } .flag-products-scroll { display: flex; padding-top: 50px; margin: 0 0.75rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .flag-products-scroll::-webkit-scrollbar { display: none; } .flag-product-item { flex: 0 0 50%; min-width: 50%; box-sizing: border-box; padding: 0 10px; } .delivery-installation-section-fixed { position: sticky; top: 20px; align-self: flex-start; overflow-y: auto; padding: 20px; background: #f8f9fa; border-radius: 12px; } .delivery-installation-section-fixed .timeline-list { overflow-y: auto; } .delivery-installation-section-fixed h5 { color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px; } .flag-scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid #667eea; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); color: #667eea; font-size: 18px; } .flag-scroll-arrow:hover:not(.disabled) { background: #667eea; color: #fff; box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); } .flag-scroll-arrow.disabled { opacity: 0.5; cursor: not-allowed; border-color: #ccc; color: #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .flag-scroll-arrow-left { left: 0; } .flag-scroll-arrow-right { right: 0; } .flag-scroll-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .flag-scroll-dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd; cursor: pointer; } .flag-scroll-dot.active { background: #007bff; width: 24px; border-radius: 5px; } .product-name-text { white-space: normal !important; word-break: keep-all; overflow: visible !important; text-overflow: clip !important; } .product-name-overlay-container { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .flag-pair-list-container {display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr);} .flag-pair-list-container[data-total-count="1"], .flag-pair-list-container[data-total-count="2"], .flag-pair-list-container[data-total-count="3"], .flag-pair-list-container[data-total-count="4"] {display: flex; gap: 1.25rem; flex-wrap: nowrap;} .flag-pair-item {flex: 1;} .flag-pair-item .flag-pair-product {max-width: 100%; flex: 1;} .flag-pair-list-container[data-total-count="1"] .flag-pair-product, .flag-pair-list-container[data-total-count="2"] .flag-pair-product {max-width: 55%; flex: 1 1 55%;} .flag-pair-list-container[data-total-count="0"] {} /* === 고객센터 문의 (슈빅 cusMngt 동기화 · PC) === */ .grand_ttl { margin-bottom: 1.5rem; } .grand_ttl_dfnt_lst { margin: 0; padding: 0; } .grand_ttl_dfnt_lst dt { font-size: 1.5rem; font-weight: 700; color: #1e1e1e; margin: 0; } .grand_ttl_dfnt_lst dd { margin: 0.5rem 0 0; font-size: 0.9375rem; color: #666; line-height: 1.5; } .cus_mngt_qust_lst_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; } .cus_mngt_qust_lst_cnt { font-size: 1rem; color: #666; margin: 0; } .cus_mngt_qust_lst_cnt strong { font-weight: 700; color: #1e1e1e; } .cus_mngt_qust_btn_write { display: inline-block; padding: 0.5rem 1.5rem; font-size: 1rem; font-weight: 500; background-color: #002a80; color: #fff; text-decoration: none; border-radius: 3px; } .cus_mngt_qust_btn_write:hover { background-color: #001a52; color: #fff; text-decoration: none; } .cus_mngt_qust_tbl { width: 100%; border-top: 2px solid #000; border-collapse: collapse; } .cus_mngt_qust_tbl thead th { padding: 1rem 0.75rem; font-size: 1rem; font-weight: 500; text-align: center; background-color: #fafafa; border-bottom: 1px solid #ddd; color: #333; } .cus_mngt_qust_tbl thead .col_no { width: 80px; } .cus_mngt_qust_tbl thead .col_sta { width: 120px; } .cus_mngt_qust_tbl thead .col_date { width: 140px; } .cus_mngt_qust_tbl tbody tr { border-bottom: 1px solid #e7e7e7; transition: background-color 0.15s; } .cus_mngt_qust_tbl tbody tr:hover { background-color: #f9f9f9; } .cus_mngt_qust_tbl tbody td { padding: 1rem 0.75rem; font-size: 1rem; text-align: center; color: #666; } .cus_mngt_qust_tbl .cus_mngt_qust_ttl { text-align: left; } .cus_mngt_qust_tbl .cus_mngt_qust_ttl a { display: inline; color: #333; text-decoration: none; } .cus_mngt_qust_tbl .cus_mngt_qust_ttl a:hover { color: #002a80; text-decoration: underline; } .cus_mngt_qust_sta { display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 3px; line-height: 1.4; } .cus_mngt_qust_sta_rcpt { background-color: #f0f0f0; color: #666; } .cus_mngt_qust_sta_rvw { background-color: #e8f4fd; color: #0758aa; } .cus_mngt_qust_sta_cmplt { background-color: #d4edda; color: #155724; } .cus_mngt_qust_sta_hold { background-color: #fff3e0; color: #e65100; } .cus_mngt_qust_lst_empty { padding: 3rem 1rem; text-align: center; font-size: 1rem; color: #999; border-bottom: 1px solid #e7e7e7; } .cus_mngt_qust_paging { margin-top: 2rem; text-align: center; } .cus_mngt_qust_paging .pagination { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; } /* === 고객센터 FAQ (PC) === */ .cus_mngt_faq_list { counter-reset: faqCounter; border: 1px solid #e7e7e7; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); } .cus_mngt_faq_card { counter-increment: faqCounter; border-bottom: 1px solid #e7e7e7; background: #fff; transition: background-color 0.26s cubic-bezier(0.4,0,0.2,1); } .cus_mngt_faq_card:last-child { border-bottom: none; } .cus_mngt_faq_card.cus_mngt_faq_card_open { background: #f0f4ff; } .cus_mngt_faq_btn { display: flex; align-items: center; width: 100%; padding: 1.125rem 1.25rem; background: none; cursor: pointer; text-align: left; gap: 0.875rem; text-decoration: none; transition: background-color 0.26s cubic-bezier(0.4,0,0.2,1); } .cus_mngt_faq_btn:hover { background: #f0f4ff; } .cus_mngt_faq_card_open .cus_mngt_faq_btn { background: #f0f4ff; } .cus_mngt_faq_q_badge { flex-shrink: 0; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #002a80; color: #fff; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .cus_mngt_faq_q_txt { flex: 1; font-size: 1.125rem; font-weight: 500; color: #1e1e1e; line-height: 1.5; transition: color 0.26s cubic-bezier(0.4,0,0.2,1); } .cus_mngt_faq_q_txt::before { content: counter(faqCounter) '. '; font-weight: 700; } .cus_mngt_faq_card_open .cus_mngt_faq_q_txt { color: #002a80; } .cus_mngt_faq_icon { flex-shrink: 0; color: #aaa; font-size: 0.75rem; transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), color 0.26s cubic-bezier(0.4,0,0.2,1); } .cus_mngt_faq_card_open .cus_mngt_faq_icon { transform: rotate(180deg); color: #002a80; } .cus_mngt_faq_body { display: none; } .cus_mngt_faq_body_inner { padding: 1.25rem 1.25rem 1.25rem 4.25rem; background: #f8f9fa; border-top: 1px solid #e7e7e7; display: flex; align-items: baseline; gap: 0.5rem; } .cus_mngt_faq_a_label { font-size: 1rem; font-weight: 700; color: #002a80; margin-bottom: 0; flex-shrink: 0; } .cus_mngt_faq_a_txt { font-size: 1rem; color: #333; line-height: 1.75; margin-bottom: 0; } .comn_table_wrap table { width: 100%; border-top: 2px solid #000; } .comn_table_wrap table tr { border-bottom: 1px solid #e7e7e7; } .comn_table_wrap table tr th { width: 13.5%; font-size: 1rem; line-height: 1.4; font-weight: 500; text-align: center; background-color: #fafafa; vertical-align: top; padding: 12px 8px; } .comn_table_wrap table tr td { padding: 10px 16px; vertical-align: middle; } .cus_mngt_qust_radio_group { display: flex; flex-wrap: wrap; gap: 0.625rem; } .cus_mngt_qust_radio_item { position: relative; cursor: pointer; margin: 0; } .cus_mngt_qust_radio_item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .cus_mngt_qust_radio_box { display: inline-block; padding: 0.4375rem 1.5rem; border: 1px solid #c1c1c1; border-radius: 3px; font-size: 1rem; font-weight: 500; color: #666; background-color: #fff; transition: border-color 0.15s, background-color 0.15s, color 0.15s; user-select: none; } .cus_mngt_qust_radio_item input[type="radio"]:checked + .cus_mngt_qust_radio_box { border-color: #002a80; background-color: #f0f4ff; color: #002a80; font-weight: 600; } .cus_mngt_qust_radio_box:hover { border-color: #002a80; background-color: #f8f9ff; } .cus_mngt_qust_hint { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: #999; } .cus_mngt_qust_oppub_desc { margin: 0.625rem 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.55; color: #666; word-break: keep-all; overflow-wrap: break-word; } .in-block { font-size: 0; } .in-block > * { display: inline-block; font-size: 1rem; vertical-align: middle; } .cus_mngt_qust_form_wrap .form_labl_lst { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 1rem; } .cus_mngt_qust_form_wrap .form_labl_lst > li { margin: 0; list-style: none; } .cus_mngt_qust_form_wrap .form_labl_wrap { position: relative; } .cus_mngt_qust_form_wrap .form_labl_wrap label { display: inline-flex; align-items: center; margin: 0; cursor: pointer; font-size: 1rem; font-weight: 500; color: #666; } .cus_mngt_qust_form_wrap .form_labl_wrap input[type="radio"] { position: static; width: auto !important; max-width: none; min-width: 1rem; height: auto; margin: 0 0.25rem 0 0; padding: 0; flex-shrink: 0; opacity: 1; vertical-align: middle; } .cus_mngt_qust_form_btn { margin-top: 2rem; text-align: center; margin-bottom: 2rem; } .cus_mngt_qust_form_btn > * { display: inline-block; min-width: 120px; } .cus_mngt_qust_form_btn > .btn + .btn { margin-left: 0.5rem; } .cus_mngt_qust_btn_cancel { margin-right: 0.5rem; padding: 0.625rem 1.5rem; font-size: 1rem; font-weight: 500; text-align: center; background-color: #fff; color: #666; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; } .cus_mngt_qust_btn_cancel:hover { color: #333; border-color: #999; text-decoration: none; } .cus_mngt_qust_btn_submit { padding: 0.625rem 1.5rem; font-size: 1rem; font-weight: 500; text-align: center; background-color: #002a80; color: #fff; border: 1px solid #002a80; border-radius: 3px; text-decoration: none; } .cus_mngt_qust_btn_submit:hover { opacity: 0.92; color: #fff; text-decoration: none; } .cus_mngt_qust_info_cont { line-height: 1.8; word-break: keep-all; white-space: pre-line; } .cus_mngt_qust_reply_wrap { margin-top: 2rem; } .cus_mngt_qust_det_form_ttl { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 700; color: #1e1e1e; padding-left: 0.75rem; border-left: 4px solid #002a80; } @media (max-width: 720px) { .cus_mngt_qust_tbl { border-top: 0; } .cus_mngt_qust_tbl thead { display: none; } .cus_mngt_qust_tbl tbody tr { display: flex; flex-wrap: wrap; align-items: center; padding: 1rem 0; border-bottom: 1px solid #e7e7e7; } .cus_mngt_qust_tbl tbody tr:first-child { border-top: 2px solid #000; } .cus_mngt_qust_tbl tbody td { display: block; padding: 0; text-align: left; } .cus_mngt_qust_tbl .cus_mngt_qust_ttl { width: 100%; order: 4; margin-top: 0.5rem; font-size: 1rem; } .cus_mngt_qust_tbl tbody td:first-child { order: 1; font-size: 0.8125rem; color: #999; margin-right: 0.75rem; } .cus_mngt_qust_tbl tbody td:first-child::before { content: "No. "; } .cus_mngt_qust_tbl tbody td:nth-child(3) { order: 2; margin-right: 0.75rem; } .cus_mngt_qust_tbl tbody td:nth-child(3) .cus_mngt_qust_sta { font-size: 0.8125rem; padding: 0.1875rem 0.5rem; } .cus_mngt_qust_tbl tbody td:nth-child(4) { order: 3; font-size: 0.8125rem; color: #999; flex: 1; text-align: right; } .comn_table_wrap table tr th, .comn_table_wrap table tr td { display: block; width: 100% !important; } .comn_table_wrap table tr th { text-align: left; border-bottom: 0; } } /* === 고객센터 문의 (레거시 · 모바일 등) === */ .cus-mngt-qust-table-wrap { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #e9ecef; } .cus-mngt-qust-table-wrap .table { margin-bottom: 0; } .cus-mngt-qust-table-wrap .table td a { color: #212529; text-decoration: none; } .cus-mngt-qust-table-wrap .table td a:hover { color: #007bff; text-decoration: underline; } .cus-mngt-qust-sta-rcpt { background-color: #e9ecef; color: #495057; font-size: 0.85em; padding: 0.45em 0.8em; } .cus-mngt-qust-sta-rvw { background-color: #cce5ff; color: #004085; font-size: 0.85em; padding: 0.45em 0.8em; } .cus-mngt-qust-sta-cmplt { background-color: #d4edda; color: #155724; font-size: 0.85em; padding: 0.45em 0.8em; } .cus-mngt-qust-sta-hold { background-color: #ffe8cc; color: #b35c00; font-size: 0.85em; padding: 0.45em 0.8em; } .cus-mngt-qust-form-section { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .cus-mngt-qust-section-ttl { font-weight: 600; color: #495057; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #dee2e6; } .cus-mngt-qust-section-ttl-reply { color: #007bff; border-bottom-color: #007bff; } .cus-mngt-qust-reply-section { margin-top: 20px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 24px; } .cus-mngt-qust-info-th { background-color: #f8f9fa; font-weight: 500; color: #495057; width: 120px; vertical-align: middle; } .cus-mngt-qust-info-cont { line-height: 1.8; } .cus-mngt-qust-textarea { min-height: 160px; resize: vertical; } .cus-mngt-qust-hint { display: block; margin-top: 5px; font-size: 0.8rem; color: #6c757d; } .cus-mngt-qust-privacy-notice { display: flex; align-items: flex-start; padding: 0.875rem 1rem; background: #f0f7ff; border-left: 3px solid #002a80; border-radius: 0 6px 6px 0; font-size: 0.875rem; color: #495057; margin-bottom: 1.5rem; } .cus-mngt-qust-file-wrap { border: 2px dashed #dee2e6; border-radius: 8px; padding: 0.875rem 1.25rem; transition: border-color 0.2s ease; background: #fafafa; } .cus-mngt-qust-file-wrap:hover { border-color: #adb5bd; } .cus-mngt-qust-file-label { display: flex; align-items: center; cursor: pointer; margin: 0; color: #6c757d; font-weight: 400; } .cus-mngt-qust-file-label:hover { color: #495057; } .cus-mngt-qust-file-name { font-size: 0.875rem; } .cus-mngt-qust-file-name.has-file { color: #212529; font-weight: 500; } /* 고객센터 문의 - 안내 메시지 영역 */ .cus_mngt_qust_notice_wrap{margin-top:3rem; padding:2rem; background-color:#f8f9fa; border-radius:4px; text-align:center;} .cus_mngt_qust_notice_msg p{margin:0; font-size:1rem; line-height:1.8; color:#333;} .cus_mngt_qust_notice_msg p:first-child{margin-bottom:0.75rem; font-weight:500; color:#1e1e1e;} /* ============================================================ prduList.jsp 전용 스타일 (이 파일에만 적용되는 클래스이므로 다른 페이지에 영향 없음) ============================================================ */ /* --- 깃발 슬라이더 레이아웃 (flag-pair-slider) --- */ .flag-pair-slider-container { position: relative; width: 100%; box-sizing: border-box; } .flag-pair-slider-container.has-arrows { padding: 0 50px; } .flag-pair-slider-wrapper { width: 100%; overflow-x: hidden; overflow-y: visible; } .flag-pair-slider { display: flex; transition: transform 0.4s ease; overflow: visible; } .flag-pair-slide { min-width: 50%; display: flex; gap: 1rem; padding: 0 0.75rem; padding-top: 35px; padding-bottom: 20px; box-sizing: border-box; overflow: visible; } .flag-pair-product { flex: 1 1 55%; max-width: 55%; overflow: visible; } .flag-pair-product .product-card-medium { height: 470px; overflow: visible; } .flag-pair-delivery { flex: 1 1 45%; max-width: 45%; min-width: 0; } .flag-pair-delivery-inner { background: #f8f9fa; border-radius: 12px; padding: 1rem; height: 470px; display: flex; flex-direction: column; } .flag-pair-delivery-inner h6 { margin-bottom: 0.75rem; flex-shrink: 0; } .flag-pair-timeline { flex: 1; overflow-y: auto; } .flag-pair-timeline-item { padding: 0.5rem; margin-bottom: 0.5rem; background: #fff; border-radius: 8px; text-decoration: none; color: inherit; display: block; transition: background 0.2s; } .flag-pair-timeline-item:hover { background: #e9ecef; text-decoration: none; color: inherit; } .flag-pair-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; font-size: 1rem; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .flag-pair-arrow:hover { background: rgba(0,0,0,0.7); } .flag-pair-arrow.disabled { opacity: 0.3; cursor: not-allowed; } .flag-pair-arrow-left { left: 5px; } .flag-pair-arrow-right { right: 5px; } .flag-pair-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1rem; } .flag-pair-dot { width: 10px; height: 10px; border-radius: 50%; background: #dee2e6; cursor: pointer; transition: background 0.2s; } .flag-pair-dot.active { background: #667eea; } .flag-pair-dot:hover { background: #adb5bd; } .flag-pair-dot.active:hover { background: #667eea; } /* 단일 깃발일 때 중앙 정렬 */ .flag-pair-slider-container.single-flag-center { display: flex; justify-content: center; } .flag-pair-slider-container.single-flag-center .flag-pair-slider-wrapper { display: flex; justify-content: center; max-width: 100%; gap: 1rem; } .flag-pair-slider-container.single-flag-center .flag-pair-slider { transform: none !important; justify-content: center; flex: 0 0 55%; } .flag-pair-slider-container.single-flag-center .flag-pair-slide { min-width: 100%; max-width: 100%; } /* --- 추천상품 타이틀 (recmd-prd) --- */ .recmd-prd-icon-wrapper { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; color: #fff; font-size: 0.875rem; box-shadow: 0 4px 8px rgba(102,126,234,0.3); } .recmd-prd-title { font-size: 1.25rem; font-weight: 700; color: #333; letter-spacing: -0.5px; } .recmd-prd-divider { flex: 1; height: 2px; background: linear-gradient(to right, #667eea, transparent); margin-left: 1rem; } .recmd-prd-lst-wrap { flex: 1; padding-top: 35px; position: relative;} .recmd-prd-lst-wrap .recmd-prd-title-wrapper {position: absolute; top: -1.25rem; left: 0;} .flag-pair-slider-wrapper:has(.recmd-prd-lst-wrap) {overflow-x: visible;} .flag-pair-slider-container .flag-pair-slider-wrapper {overflow-x: hidden;} .flag-pair-slider-container.single-flag-center .flag-pair-slider-wrapper {overflow-x: visible;} .recmd-prd-lst-wrap .product-card.product-card-medium { height: 223px; background-size: auto 80%; } /* --- 단체적립현황 (grop-accml-stat) --- */ .prdu-grop-accml-stat { flex-shrink: 0; } .grop-accml-stat-box { display: flex; flex-direction: column; gap: 0.5rem; background: #f8f9fa; border-radius: 12px; padding: 1rem 1.25rem; border: 1px solid #e9ecef; } .grop-accml-stat-header { display: flex; align-items: flex-start; gap: 0.75rem; } .grop-accml-stat-title-wrap { display: flex; flex-direction: column; gap: 0.15rem; } .grop-accml-stat-title { font-size: 1.125rem; font-weight: 600; color: #1a1a1a; line-height: 1.3; } .grop-accml-stat-desc { font-size: 0.75rem; color: #6c757d; line-height: 1.4; } .grop-accml-stat-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 50%; color: #fff; font-size: 1.25rem; flex-shrink: 0; } .grop-accml-stat-body { display: flex; flex-direction: column; gap: 0.25rem; } .grop-accml-stat-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .grop-accml-stat-label { font-size: 0.875rem; color: #6c757d; } .grop-accml-stat-value { font-weight: 600; color: #333; } /* --- prdPrtSxnCd 0001/0002 가격 표시 버튼 공통 --- */ .product-select-btn[data-prd-prt-sxn-cd="0001"] .btn-content, .product-select-btn[data-prd-prt-sxn-cd="0002"] .btn-content { display: flex; justify-content: space-between; align-items: center; width: 100%; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-detail-0001, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-detail-0002 { flex: 1; display: flex; flex-direction: column; gap: 0; text-align: left; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row { display: flex; justify-content: space-between; align-items: center; width: 100%; line-height: 1.45; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mkt, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mkt { margin-bottom: 1px; } /* 시중가격 opacity: 0001=0.52, 0002=0.75 (개별 적용) */ .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mkt { opacity: 0.52; } .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mkt { opacity: 0.75; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mkt .price-label, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mkt .price-label { font-size: 0.875rem; font-weight: 400; color: #fff; flex-shrink: 0; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mkt .price-value-origin, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mkt .price-value-origin { font-size: 0.875rem; font-weight: 400; color: rgba(255,255,255,0.88); text-decoration: line-through; margin-left: auto; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mbr .price-label, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mbr .price-label { font-size: 0.875rem; font-weight: 600; color: #fff; flex-shrink: 0; } .product-select-btn[data-prd-prt-sxn-cd="0001"] .price-row-mbr .price-value, .product-select-btn[data-prd-prt-sxn-cd="0002"] .price-row-mbr .price-value { font-size: 1.125rem; font-weight: 800; color: #fff; text-align: right; margin-left: auto; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.35); letter-spacing: -0.3px; } /* --- prdPrtSxnCd 0002 전용 버튼 스타일 --- */ .product-select-btn[data-prd-prt-sxn-cd="0002"] { border-color: rgba(0,0,0,0.8) !important; color: #fff !important; } .product-select-btn[data-prd-prt-sxn-cd="0002"]:hover { background: linear-gradient(135deg, rgba(85,104,211,0.95) 0%, rgba(106,66,146,0.95) 100%) !important; } .product-select-btn[data-prd-prt-sxn-cd="0002"].btn-success { background: rgba(40,167,69,0.85) !important; border-color: rgba(40,167,69,1) !important; } /* --- 발전기금 뱃지 (카드 우측 상단, product-name-overlay 하단) --- */ .product-card-medium .accm-badge { position: absolute; top: 30px; right: 10px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 3px 8px 3px 6px; border-radius: 20px; box-shadow: 0 2px 8px rgba(217,119,6,0.55); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; z-index: 11; line-height: 1.5; pointer-events: none; backdrop-filter: blur(4px); } .cus_mngt_qust_notice_msg p:last-child{color:#666;}