의사소통

<스타일> /* Voc 양식 - 문의 양식(최소 및 좁은 공간의 경우) */ .voc-form-fields-container { 표시:플렉스; 플렉스 방향: 열; 간격: 0.8rem; /* 공백이 크게 줄어들었습니다 */ 배경: 투명; /* 배경 및 두꺼운 패딩 제거 */ 테두리:없음; 패딩: 0; 너비: 100%; } .voc-form-group { 표시:플렉스; 플렉스 방향: 열; 간격: 0.3rem; /* 태그와 입력 사이의 공간이 좁아졌습니다 */ 너비: 100%; 여백 하단: 0 !중요; } .voc-라벨 { 색상: rgba(255, 255, 255, 0.8) !중요; 글꼴 두께: 600; 글꼴 크기: 13px !중요; /* 더 최소한의 글꼴 크기 */ 글꼴 계열: '인터', 산세리프; 표시:플렉스; 항목 정렬: 중앙; 간격: 0.2rem; } .voc-필수-마크 { 색상: var(--brand-red, #f7374f) !중요; } .voc-입력 { 너비: 100%; 배경: rgba(0, 0, 0, 0.2) !중요; 테두리: 1px 단색 rgba(255, 255, 255, 0.1) !중요; 색상: #fff !중요; 패딩: 0.7rem 1rem !중요; /* 얇아짐 */ 테두리 반경: 8px !important; /* 더 작은 타원형 모서리 */ 글꼴 크기: 14px !중요; 글꼴 계열: '인터', 산세리프; 개요: 없음; 전환: 모두 0.3초 용이성; 배경 필터: 흐림(5px); } .voc-input::자리 표시자 { 색상: rgba(255, 255, 255, 0.3) !중요; } .voc-입력:초점 { 테두리 색상: var(--brand-red, #f7374f) !important; 배경: rgba(0, 0, 0, 0.4) !중요; 상자 그림자: 0 0 0 2px rgba(247, 55, 79, 0.1); } /* (팝업 메뉴) 사용자 정의 설정 선택 */ .voc-선택 { 외관: 없음; 배경 이미지: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4% 22%20높이%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5% 200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c 0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%2 05.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4- 7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !중요; background-repeat: 반복하지 않음 !important; 배경 위치: 오른쪽 1rem 위쪽 50% !important; 배경 크기: 0.6rem 자동 !중요; } .voc-선택 옵션 { 배경: #0f172a; 색상: #fff; } /* 텍스트 영역 설정 */ .voc-텍스트 영역 { 크기 조정: 수직; 최소 높이: 80px !important; /* 높이가 상당히 감소했습니다 */ } /* KVKK 체크박스 디자인 */ .voc-체크박스-래퍼 { 여백 상단: 0.2rem; } .voc-체크박스-라벨 { 표시:플렉스; 항목 정렬: 플렉스 시작; 간격: 0.6rem; 커서: 포인터; 색상: rgba(255, 255, 255, 0.7); 줄 높이: 1.4; 글꼴 크기: 12px !중요; /* KVKK 텍스트가 축소되었습니다 */ } .voc-체크박스-입력 { 외관: 없음; 최소 너비: 16px; 높이: 16px; 테두리: 1px 단색 rgba(255, 255, 255, 0.2) !중요; 테두리 반경: 4px !important; 배경: rgba(0, 0, 0, 0.2) !중요; 커서: 포인터; 위치: 상대; 전환: 모두 0.2초 용이성; 여백 상단: 1px; } .voc-checkbox-input:checked { 배경: var(--brand-red, #f7374f) !important; 테두리 색상: var(--brand-red, #f7374f) !important; } .voc-checkbox-input:checked::after { 내용: ''; 위치: 절대; 왼쪽: 4px; 공: 2px; 너비: 4px; 높이: 8px; 테두리: 단색 흰색; 테두리 너비: 0 2px 2px 0; 변환: 회전(45deg); } .voc-checkbox-content a { 색상: var(--brand-red, #f7374f) !중요; 텍스트 장식: 밑줄; 글꼴 크기: 12px !중요; } /* 보내기 버튼(최소) */ .voc-제출-btn { 여백 상단: 0.5rem; 배경: var(--brand-red, #f7374f) !important; 색상: #fff !중요; 테두리: 없음 !중요; 패딩: 0.8rem 1.5rem !중요; /* 얇아짐 */ 테두리 반경: 8px !important; /* 호환 가능한 가장자리 */ 글꼴 두께: 600; 글꼴 크기: 14px !중요; 글꼴 계열: '인터', 산세리프; 커서: 포인터; 표시:플렉스; 항목 정렬: 중앙; 내용 정당화: 센터; 간격: 0.5rem; 전환: 모두 0.3초 용이성; 너비: 100%; } .voc-submit-btn:hover { 배경: #e02040 !중요; 변환: 번역Y(-1px); } /* 스피너 로딩 */ .voc-스피너 { 디스플레이: 인라인 블록; 너비: 14px; 높이: 14px; 테두리: 2px 솔리드 rgba(255,255,255,0.3); 테두리 반경: 50%; 테두리 상단 색상: #fff; 애니메이션: vocSpin 1s easy-in-out 무한; } @keyframes vocSpin { { 변환: 회전(360deg); } }