/* ========================================================================== (주)투어수다 - 공통 헤더 / GNB head.php 에서 add_stylesheet() 로 default.css 뒤에 적재됩니다. ========================================================================== */ /* 사이트 전체 폰트 : Pretendard 기존에는 외부 CDN(jsdelivr)의 가변 폰트를 @import로 불러왔는데, @import는 렌더링을 막는 직렬(순차) 체인(gnb.css 파싱 → 외부 CSS 요청 → 그 안의 폰트 파일 요청)인 데다 그 가변 폰트 파일 자체가 2MB(!)나 돼서 - 폰트가 늦게 로딩되고 나서 전체 텍스트가 한꺼번에 리플로우되며 "메뉴/콘텐츠가 하나씩 나타나는" 것처럼 보이는 원인이었다. 실제 사이트에서 쓰는 굵기(400/500/600/700, 900은 1곳뿐이라 700 파일로 대체)만 자체 호스팅 서브셋(각 ~260KB, 한글 전체+영문 포함)으로 교체 - 외부 CDN 왕복 없이 병렬 로딩되고 실제 쓰는 굵기만 필요할 때 개별적으로 받아온다. */ @font-face{ font-family:'Pretendard Variable'; font-weight:400; font-display:swap; src:url('../fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'); } @font-face{ font-family:'Pretendard Variable'; font-weight:500; font-display:swap; src:url('../fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'); } @font-face{ font-family:'Pretendard Variable'; font-weight:600; font-display:swap; src:url('../fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'); } @font-face{ font-family:'Pretendard Variable'; font-weight:700 900; font-display:swap; src:url('../fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'); } body{ font-family: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif; font-size: 16px; } /* default.css의 h1~h6 기본값('Malgun Gothic', dotum, sans-serif / font-size:1em) 오버라이드 (사이트 전체 공통) */ h1, h2, h3, h4, h5, h6{ font-family: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif; font-size: 30px; } /* 포커스 시 브라우저 기본 외곽선 제거 (사이트 전체 공통) */ input, select, button, textarea{ outline: none; } input:focus, select:focus, button:focus, textarea:focus{ outline: none; } /* default.css의 input/select/textarea 포커스 시 파란 box-shadow+border(!important)도 함께 제거 */ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{ box-shadow: none !important; border-color: transparent !important; } /* lucide SVG 아이콘 공통 (거래처 원본과 동일 아이콘, gnb.icons.php의 suda_icon() 에서 출력) 기존 Font Awesome 에 걸려있던 font-size(+반응형 vw) 규칙을 그대로 재사용하기 위해 ... 구조로 감싼다. */ .suda-icon{ display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.125em; } .suda-icon svg{ display: block; } /* 닫기(X) 버튼 공통 : Font Awesome fa-times 대신 얇은 선 2개로 직접 그림 (사이트 전체 공통) */ .suda-x-close{ position: relative; } .suda-x-close i{ display: none; } .suda-x-close::before, .suda-x-close::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: currentColor; border-radius: 999px; } .suda-x-close::before{ transform: translate(-50%, -50%) rotate(45deg); } .suda-x-close::after{ transform: translate(-50%, -50%) rotate(-45deg); } /* ---------- 반응형 브레이크포인트 기준 (사이트 전체 공통) ---------- 1024px / 768px / 480px 각 미디어쿼리 안에서, 그 폭 기준으로 계산한 고정 vw값(px ÷ 브레이크포인트 × 100)을 오버라이드로 적용 */ /* tail.php에서 #aside(외부로그인/설문조사 사이드바)를 완전히 제거했으므로, #aside를 위해 #container를 930px로 좁혀 float:left 하던 default.css 규칙도 함께 해제 - 전체 폭으로 사용 (사이트 전체 적용, #aside가 없으니 부작용 없음) */ #container{ float: none; width: auto; margin: 0; } /* default.css가 #container_wr에 width:1200px 고정값을 걸어놔서, 히어로 배너처럼 화면 전체 폭(100%)으로 나와야 하는 요소가 실제로는 1200px 안에 갇혀버리는 문제가 있었음 (콘텐츠 최대폭은 각 섹션에서 1280px로 개별 지정하므로, 바깥 컨테이너 자체는 화면 크기와 무관하게 항상 풀어준다) */ #container_wr{ width: 100%; } /* default.css가 #hd, #wrapper, #ft에 min-width:1200px를 걸어놔서, 1024px 미디어쿼리 안에서만 풀어주면 1024~1200px 사이 구간은 여전히 1200px min-width가 살아있어 그 구간에서 가로 스크롤/잘림이 발생했음. 미디어쿼리 없이 항상 해제 */ #hd, #wrapper, #ft{ min-width: 0; } :root{ --suda-blue: #4154ff; --suda-blue-dark: #3443cc; --suda-red: #fb2c36; --suda-red-dark: #dc2626; --suda-purple: #9333ea; --suda-purple-dark: #7e22ce; --suda-purple-dot: #a855f7; --suda-gray-50: #f9fafb; --suda-gray-100: #f3f4f6; --suda-gray-200: #e5e7eb; --suda-gray-400: #9ca3af; --suda-gray-500: #6b7280; --suda-gray-700: #374151; --suda-gray-900: #111827; --suda-header-h: 96px; } /* ---------- 공통 체크박스/라디오 (회원가입 화면의 .suda-join-checkbox/.suda-gender-radio input과 동일한 톤) ---------- 기획/디자인/퍼블리셔 공통 규칙: 사이트 전체에서 체크박스·라디오는 이 클래스로 통일한다. 네이티브 accent-color만으로는 브라우저마다 체크 전/후 테두리 색·모서리가 제각각이라(체크 전 테두리가 진하게 나오는 문제 등) appearance:none으로 직접 그린다 - 이미지 파일 없이 CSS만 사용. */ .suda-form-check{ -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 1px solid var(--suda-gray-400); background: #fff; cursor: pointer; flex-shrink: 0; position: relative; transition: background .15s ease, border-color .15s ease; } /* 체크박스/라디오 기본 크기는 예전(통일 전) 사이즈로 되돌린다 - 체크박스 22px, 라디오 20px */ input[type="checkbox"].suda-form-check{ width: 22px; height: 22px; border-radius: 6px; } input[type="radio"].suda-form-check{ width: 20px; height: 20px; border-radius: 50%; } .suda-form-check:checked{ background: var(--suda-blue); border-color: var(--suda-blue); } input[type="checkbox"].suda-form-check:checked::after{ content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="radio"].suda-form-check:checked::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); } /* ---------- 공통 셀렉트(ul/li 커스텀 드롭다운) ---------- 기획/디자인/퍼블리셔 공통 규칙: 사이트 전체에서 셀렉트는 네이티브