/** * Theme Name: Blocksy Child * Description: Blocksy Child theme * Author: Creative Themes * Template: blocksy * Text Domain: blocksy */ /* ================================================= [레이아웃 구조] GenerateBlocks : site header / Blocksy Theme ==================================================== */ /* 모든 기기에서 헤더를 완전히 제거 */ #header.ct-header { display: none !important; } /* 태블릿 및 모바일 헤더 메뉴 (1024px 이하) */ @media (max-width: 1024px) { .gb-menu-container .gb-menu-link { font-size: 21px !important; line-height: 1.2; } } /* blocksy_Form 활성화 테두리 2px로 변경 */ input:focus, textarea:focus, select:focus { border-width: 2px !important; } /* 전화번호 링크처럼 ios 요소의 초기화 */ a[href^="tel"] { color: inherit !important; text-decoration: none !important; } /* Tokyo_Preview 손가락 커서 출력 */ .osaka_preview-button { cursor: pointer !important; } /* Contact Form 7 제출 버튼 너비 100% */ form.wpcf7-form input[type="submit"].wpcf7-submit { width: 100% !important; display: block !important; } /* ============================================== ========= MyAccount page=== ================================================= */ /* My Account 네비게이션 숨기기 */ .woocommerce-MyAccount-navigation { display: none !important; } /* My Account 네비게이션의 빈공간 매우기 */ .woocommerce-account .woocommerce { display: block !important; } /* My Account 기본 환영 문구 숨기기 */ .woocommerce-MyAccount-content > p { display: none; } /* 우커머스 알림 메시지 17px 강제 적용 (우선순위 상향) */ :is(.woocommerce-info, .woocommerce-error, .woocommerce-message, .woocommerce-thankyou-order-received) { font-size: 17px !important; line-height: 1.6 !important; } /* 모바일(768px 미만)에서 성과 이름을 나란히 배치 */ @media (max-width: 767px) { .woocommerce-billing-fields__field-wrapper .form-row-first, .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce-address-fields__field-wrapper .form-row-last { width: 48% !important; /* 너비를 50%보다 조금 작게 설정하여 여백 확보 */ float: left !important; clear: none !important; } .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce-address-fields__field-wrapper .form-row-last { float: right !important; /* 이름 필드는 오른쪽으로 밀착 */ } } /* 계정 및 결제 페이지 전체 입력란 48px 적용 .woocommerce-content-box input.input-text, .woocommerce-checkout input.input-text, .woocommerce-address-fields input.input-text, .select2-container .select2-selection--single { height: 48px !important; line-height: 48px !important; } */ /* 계정 상세 편집 페이지 입력란 48px 적용 .woocommerce-edit-account input.input-text { height: 48px !important; line-height: 48px !important; } */ /* <비밀번호 찾기> 모바일 화면 (768px 이하): 상단에 패딩 적용 */ @media (max-width: 768px) { .woocommerce-ResetPassword.lost_reset_password { padding-top: 70px !important; padding-left: 0 !important; } } /* 계정 페이지의 모든 헤딩(제목) 스타일 조정*/ .woocommerce-account h1, .woocommerce-account h2 { font-size: 30px !important; font-weight: 600 !important; } .woocommerce-account h3, .woocommerce-account h4 { font-size: 25px !important; font-weight: 500 !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; margin-bottom: 20px !important; } /* 대화명(Display Name) 필드 및 하단 설명 문구 숨기기*/ .woocommerce-edit-account p:has(#account_display_name), .woocommerce-edit-account #account_display_name_description { display: none !important; } /* ======================================================== **MyAccount_ login form++register form css ====================================================== */ /* 로그인 폼_등록폼 레이블 크기 조절 */ .login label, .u-column1 label, .u-column2 label, form label { font-size: 16px !important; font-weight: 500; margin-bottom: 3px; display: inline-block; } /* woocommerce form.login,register (헤딩=h2)의 폰트 크기 숨김 */ #customer_login .u-column1 h2, #customer_login .u-column2 h2 { display: none !important; } /* 성(Last Name)과 이름(First Name) 등록폼에서 강제 표시 */ p:has(#reg_billing_last_name), p:has(#reg_billing_first_name) { display: block !important; visibility: visible !important; } /* woocommerce-form-button(Full-width) */ .woocommerce-form-register .button, .woocommerce-form .woocommerce-button { display: block !important; width: 100% !important; text-align: center; } .woocommerce-LostPassword-wrap a { font-size: 16px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight:400 ; } /* Register form 문구및 정책의 폰트 미출력 */ .woocommerce-form-register > p:nth-of-type(2), .woocommerce-privacy-policy-text p { display: none !important; } /* 우커머스 체크박스 크기 키우기 */ .woocommerce-form__label-for-checkbox input[type="checkbox"], input[type="checkbox"].input-checkbox { width: 18px !important; height: 18px !important; } /* 1. form-register 레이아웃 확보를 동시에*/ .woocommerce-form-register label { display: flex !important; /* 아이콘 순서 변경을 위해 필수 */ float: none !important; /* 겹침 방지 */ } /* 2.글자보다 앞으로 배치 */ .woocommerce-form-register label .required { order: -1 !important; margin-right: 4px !important; } /* ============================================ 데스크탑에서 Blocksy 테마 결제 페이지 1칼럼화 ===================================================*/ @media (min-width: 768px) { /* 1. Blocksy가 강제로 적용한 그리드 해제 */ form.checkout.woocommerce-checkout { display: block !important; /* grid를 block으로 변경 */ max-width: 800px !important; margin: 0 auto !important; } /* 2. 좌측(주소/메모) 영역 너비 100% */ .ct-customer-details, #customer_details, .col2-set#customer_details .col-1, .col2-set#customer_details .col-2 { width: 100% !important; float: none !important; margin-right: 0 !important; } /* 3. 우측(주문 검토/결제) 영역 너비 100% */ #order_review_heading, #order_review { width: 100% !important; float: none !important; margin-top: 0px !important; } /* 4. 내부 여백 조정 (Blocksy 특화) */ .ct-woocommerce-checkout .col2-set { margin: 0 !important; display: block !important; } /* 이메일 입력란과 아래 주문 요약 섹션 사이의 간격 조정 */ #billing_email_field { margin-bottom: 120px !important; } } /* ============================================== ========= Checkout page=== ================================================= */ /* 결제 페이지 내 모든 h3 제목 크기 조정 */ .ct-woocommerce-checkout h3 { font-size: 25px !important; font-weight: 400; /* 조금 더 강조하고 싶다면 추가 (선택사항) */ margin-bottom: 20px !important; /* 아래 필드와의 간격 확보 */ } /* 주문 요약 테이블 내의 모든 텍스트 크기를 17px로 조정 */ .woocommerce-checkout-review-order-table thead th, .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { font-size: 16px !important; color: #000000; } /* 결제 페이지 입력란 및 선택창 높이 설정 */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container--default .select2-selection--single { height: 58px !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle; } /* 결제 버튼도 입력창 높이에 맞춰 통일감 부여 */ .woocommerce-checkout #place_order { height: 54px !important; font-size: 18px !important; font-weight: 600 !important; } /* 결제 페이지 이메일 필드 위 여백 */ #billing_email_field { margin-top:50px !important; } /* 국가 선택 필드 위 여백 */ #billing_country_field { padding-top: 10px !important; } /* 결제 페이지 '고객 정보' 제목 하단 여백 설정 */ .woocommerce-checkout h3#order_review_heading, .woocommerce-billing-fields > h3 { margin-bottom: 50px !important; padding-bottom: 10px !important; border-bottom: 1px solid #eeeeee; /* 선택사항: 얇은 구분선을 넣으면 더 깔끔합니다 */ } /* 주문 요약 섹션 상단에 여유 공간(Padding) 추가 */ #order_review_heading { padding-top: 60px !important; /* 위쪽으로 시원하게 공간 확보 */ margin-top: 40px !important; /* 섹션 간의 경계를 확실히 구분 */ padding-bottom: 10px !important; border-top: 1px solid #eeeeee; /* 선택사항: 얇은 선을 넣어 구분감을 줄 수 있습니다 */ } /* 상품명과 항목 제목(소계, 총계 등)을 조금 더 선명하게 */ .woocommerce-checkout-review-order-table .product-name, .woocommerce-checkout-review-order-table tfoot th { font-weight: 400; } /* 최종 결제 금액(Total)은 16px 유지하되 아주 굵게 강조 */ .woocommerce-checkout-review-order-table .order-total td .woocommerce-Price-amount { font-weight: 600; color: #000000; } /* 결제 페이지 주문 요약에서 소계(Subtotal) 행 숨기기 */ .woocommerce-checkout-review-order-table .cart-subtotal { display: none !important; } /* 결제 페이지 약관 체크박스 영역 숨기기 */ .woocommerce-terms-and-conditions-wrapper { display: none !important; } /*========================== ====== japan========= ========================== */ /* 1. 이전 버튼: 글자 숨기고 '前へ' 표시 */ .jp-prev-btn a { font-size: 0 !important; /* 기존 '이전' 글자 숨김 */ } .jp-prev-btn a:before { content: "前へ"; font-size: 18px; /* 실제 보여줄 크기 */ color: #1e50ac; /* 네이비 배경에 어울리는 베이지 */ } /* 2. 다음 버튼: 글자 숨기고 '次へ' 표시 */ .jp-next-btn a { font-size: 0 !important; /* 기존 '다음' 글자 숨김 */ } .jp-next-btn a:before { content: "次へ"; font-size: 18px; color: #1e50ac; } /* 3. 호버 효과 (마우스 올렸을 때) */ .jp-prev-btn a:hover:before, .jp-next-btn a:hover:before { color: #D0D0D0; } /*========================== ====== jp checkout========= ========================== */ /*========================== ====== ebook- Security========= ========================== */ /* 인쇄 시에만 작동하는 설정 */ @media print { /* 내가 지정한 클래스(.no-print-content)만 인쇄에서 제외 */ .no-print-content { display: none !important; } } /* ebook- Security iOS 대응 강화 */ .ebook-protected { /* 1. 기본 선택 방지 (사파리 전용 포함) */ -webkit-user-select: none !important; /* iOS/Safari 필수 */ -ms-user-select: none !important; /* IE/Edge */ user-select: none !important; /* 2. 터치 시 강조 효과 제거 (사파리 모바일) */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3. 롱 프레스(길게 누르기) 메뉴 방지 */ -webkit-touch-callout: none !important; /* 4. 포인터 이벤트 강제 (클릭 가로채기) */ pointer-events: auto !important; } /* 내부 모든 요소에 강제 적용*/ .ebook-protected * { -webkit-user-select: none !important; -webkit-touch-callout: none !important; cursor: default !important; }