/* ========================================================================== CRESC AI 홈페이지 — 디자인 시스템 (site.css) - 모든 페이지가 로드하는 단일 CSS. 페이지 전용 스타일은 assets/css/pages/.css - 모바일 퍼스트. 브레이크포인트: ≤767px 모바일, ≥768px 데스크톱(콘텐츠 폭 980px) - 컴포넌트 사용법은 scratchpad/COMPONENTS.md 참고 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 웹폰트 (자체 호스팅, ../fonts/) -------------------------------------------------------------------------- */ @font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Fahkwang-400.woff2") format("woff2"); } @font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Fahkwang-500.woff2") format("woff2"); } @font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Fahkwang-600.woff2") format("woff2"); } @font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Fahkwang-700.woff2") format("woff2"); } @font-face { font-family: "NanumSquare Neo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/NanumSquareNeo-Bold.woff2") format("woff2"); } @font-face { font-family: "NanumSquare Neo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/NanumSquareNeo-ExtraBold.woff2") format("woff2"); } @font-face { font-family: "NanumSquare Neo"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/NanumSquareNeo-Heavy.woff2") format("woff2"); } @font-face { font-family: "NanumSquare AC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/NanumSquareAC-Regular.woff2") format("woff2"); } @font-face { font-family: "NanumSquare AC"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/NanumSquareAC-ExtraBold.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 2. 디자인 토큰 -------------------------------------------------------------------------- */ :root { /* 색 */ --c-white: #FFFFFF; --c-black: #000000; --c-title: #2E2D2C; /* 진회색 제목 */ --c-accent: #6AAAE4; /* 포인트 하늘색 (섹션 소제목, Press) */ --c-blue: #77BDF6; /* 연하늘 (Product 제목 / 현재 메뉴 / 버튼) */ --c-blue-dark: #5AABF0; /* 버튼 hover */ --c-band: #3B3B3B; /* 진회색 밴드 (color_12) */ --c-light: #FAFAFA; /* 연회색 배경 (Press) */ --c-mosaic: #EDEDED; /* 제품 상세 이미지 밴드 */ --c-border: #D1D1D1; /* 폼 테두리 (color_40) */ --c-border-soft: rgba(209, 209, 209, 0.29); --c-error: #FF4040; --c-muted: #666666; /* 폰트 */ --ff-sys: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "NanumSquare Neo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --ff-body: "NanumSquare Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --ff-en: "Fahkwang", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "NanumSquare Neo", sans-serif; --ff-ac: "NanumSquare AC", "NanumSquare Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* 레이아웃 */ --container: 980px; --gutter: 20px; --header-h: 70px; --header-h-m: 60px; --radius: 5px; --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 3. 리셋 / 베이스 -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-body); font-size: 16px; line-height: 1.5; color: var(--c-black); background: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: keep-all; /* 한글 어절 단위 줄바꿈 */ overflow-wrap: anywhere; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.3; font-weight: 800; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } img, video, svg { max-width: 100%; height: auto; } img { display: inline-block; border: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } address { font-style: normal; } hr { border: 0; border-top: 1px solid var(--c-border); margin: 24px 0; } figure { margin: 0; } :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; } .skip-link { position: absolute; left: 8px; top: -100px; z-index: 2000; padding: 8px 14px; background: var(--c-blue); color: #fff; border-radius: var(--radius); } .skip-link:focus { top: 8px; } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 4. 레이아웃 유틸 -------------------------------------------------------------------------- */ /* 안쪽 콘텐츠 폭 = 980px (패딩 20px 은 바깥쪽에 더함) → 1440 뷰포트에서 x=230~1210, 원본 Wix 980 그리드와 동일 */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .container--narrow { max-width: 720px; } .section { padding: 48px 0; } .section--tight { padding: 24px 0; } .section--loose { padding: 72px 0; } .section--flush { padding: 0; } .bg-light { background: var(--c-light); } .band { background: var(--c-band); min-height: 28px; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .u-accent { color: var(--c-accent); } .u-blue { color: var(--c-blue); } .u-title { color: var(--c-title); } .ff-en { font-family: var(--ff-en); } .ff-ac { font-family: var(--ff-ac); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-hide-mobile { display: none !important; } .u-hide-desktop { display: block; } @media (min-width: 768px) { .u-hide-mobile { display: block !important; } .u-hide-desktop { display: none !important; } .section { padding: 60px 0; } .section--loose { padding: 90px 0; } } /* -------------------------------------------------------------------------- 5. 섹션 제목 기본: NanumSquare Neo ExtraBold 30px, #2E2D2C, 좌측 (원본 "About us", "Cert. & Patent") -------------------------------------------------------------------------- */ .section-title { font-family: var(--ff-body); font-weight: 800; font-size: 26px; line-height: 1.3; letter-spacing: .01em; color: var(--c-title); margin: 0 0 28px; } .section-title--left { text-align: left; } .section-title--right { text-align: right; } .section-title--center { text-align: center; } .section-title--accent { color: var(--c-accent); } /* #6AAAE4 */ .section-title--blue { color: var(--c-blue); } /* #77BDF6 (Product) */ .section-title--black { color: var(--c-black); } .section-title--ac { font-family: var(--ff-ac); font-weight: 800; } /* NanumSquare AC ExtraBold ("Press", Cert 40px) */ .section-title--neo { font-family: var(--ff-body); font-weight: 800; } .section-title--heavy { font-family: var(--ff-body); font-weight: 900; } /* NanumSquare Neo Heavy ("Product") */ .section-title--bold { font-family: var(--ff-body); font-weight: 700; } /* NanumSquare Neo Bold (Service 36px) */ .section-title--en { font-family: var(--ff-en); font-weight: 700; } /* Fahkwang */ .section-title--lg { font-size: 30px; } .section-title--xl { font-size: 32px; } @media (min-width: 768px) { .section-title { font-size: 30px; } .section-title--lg { font-size: 36px; } .section-title--xl { font-size: 40px; } } .section-sub { font-size: 17px; line-height: 1.5; color: var(--c-title); } /* -------------------------------------------------------------------------- 6. 헤더 / 네비게이션 -------------------------------------------------------------------------- */ .site-header { position: relative; z-index: 100; background: var(--c-white); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h-m); } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand-logo { display: inline-flex; align-items: center; line-height: 0; } .brand-logo img { width: 150px; height: auto; } .brand-iso { width: 28px; height: 28px; object-fit: contain; } .brand-logo:hover { text-decoration: none; } /* 햄버거 (모바일) */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-right: -10px; border-radius: 6px; } .nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--c-black); transition: transform .25s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 모바일 드로어 */ .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-white); border-top: 1px solid #EEE; box-shadow: 0 12px 24px rgba(0, 0, 0, .08); transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s var(--ease), opacity .2s, visibility 0s linear .25s; } .site-nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .site-nav ul { list-style: none; margin: 0; padding: 8px 0 12px; } .site-nav li { margin: 0; } .site-nav a { display: block; padding: 14px var(--gutter); font-family: var(--ff-sys); font-size: 18px; font-weight: 500; letter-spacing: .02em; color: var(--c-black); } .site-nav a:hover { text-decoration: none; background: var(--c-light); } .site-nav a.is-current { color: var(--c-blue); } body.nav-open { overflow: hidden; } @media (min-width: 768px) { .site-header-inner { height: var(--header-h); } .brand-logo img { width: 181px; height: 23px; } .brand-iso { width: 33px; height: 33px; } .nav-toggle { display: none; } .site-nav { position: static; border: 0; box-shadow: none; background: transparent; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; } .site-nav ul { display: flex; align-items: center; padding: 0; } .site-nav a { padding: 10px 20px; font-size: 16px; } .site-nav a:hover { background: transparent; color: var(--c-blue); } body.nav-open { overflow: auto; } } /* -------------------------------------------------------------------------- 7. 히어로 (홈) -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 360px; background: #000; color: var(--c-white); text-align: center; } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; opacity: .6; /* 원본: video-opacity .6 + 검정 오버레이 */ } .hero-body { position: relative; z-index: 1; padding: 40px var(--gutter); } .hero-title { margin: 0 0 16px; font-family: var(--ff-body); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--c-white); } .hero-title .accent { color: var(--c-blue); } .hero-wordmark { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; } @media (min-width: 768px) { .hero { min-height: 505px; } .hero-title { font-size: 28px; margin-bottom: 22px; } .hero-wordmark { width: 567px; } } /* -------------------------------------------------------------------------- 8. Trusted by (홈) -------------------------------------------------------------------------- */ .trusted-by { padding: 26px 0 24px; } .trusted-by-title { margin: 0 0 20px; font-family: var(--ff-body); font-weight: 800; font-size: 16px; line-height: 1.4; letter-spacing: .01em; color: var(--c-black); } /* 원본과 동일한 마퀴: 1448×46 스트립 2장을 이어 붙여 좌로 흘림 (reduced-motion 이면 정지) */ .trusted-by-logos { overflow: hidden; width: 100%; max-width: 980px; } .trusted-by-track { display: flex; width: max-content; animation: trusted-marquee 40s linear infinite; } .trusted-by-track img { display: block; flex: 0 0 auto; width: 1133px; max-width: none; height: 36px; } .trusted-by-logos:hover .trusted-by-track { animation-play-state: paused; } @keyframes trusted-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (min-width: 768px) { .trusted-by { padding: 30px 0 28px; } .trusted-by-track img { width: 1448px; height: 46px; } } @media (prefers-reduced-motion: reduce) { .trusted-by-track { animation: none; } } /* -------------------------------------------------------------------------- 9. 푸터 -------------------------------------------------------------------------- */ .site-footer { padding: 36px 0 72px; color: var(--c-black); } .footer-company { margin: 0 0 6px; font-family: var(--ff-body); font-weight: 700; font-size: 13px; line-height: 2; } .footer-address { font-family: var(--ff-body); font-weight: 700; font-size: 12px; line-height: 2; } .footer-line { display: block; } .site-footer a { color: inherit; } @media (min-width: 768px) { .site-footer { padding: 44px 0 96px; } } /* -------------------------------------------------------------------------- 10. 3칼럼 특징 (About us / Service) -------------------------------------------------------------------------- */ .features { display: grid; grid-template-columns: 1fr; gap: 36px; margin: 0; padding: 0; list-style: none; } .feature { max-width: 260px; } .feature-icon { display: block; height: 46px; width: auto; margin: 0 0 18px; } .feature-icon img, .feature-icon svg { height: 100%; width: auto; } .feature h3, .feature-title { margin: 0 0 12px; font-family: var(--ff-ac); font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: normal; color: var(--c-accent); } .feature p, .feature-text { margin: 0; font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--c-black); } .feature-rule { display: block; width: 100%; max-width: 202px; height: 1px; margin-top: 18px; background: var(--c-border); } @media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); gap: 40px 60px; } } /* 10b. 3칼럼 "카드" 변형 .features--cards (About us / Service — includes/features-3col.php 가 출력) 원본(브리프 §8): 흰 카드 239px, radius 10px, 그림자 0 0 30px rgba(0,0,0,.3), 아이콘 → 제목 → 본문 → 하단 4px 회색(#666) 선. 데스크톱 3장 space-between, 모바일 1열 중앙. */ .features--cards { gap: 26px; justify-items: center; padding: 10px 0; } .features--cards .feature--card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 320px; min-height: 220px; padding: 26px 12px 24px 22px; /* 원본: 텍스트 박스(195~219px)가 카드 우측 가장자리까지 닿음 */ background: var(--c-white); border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, .3); } /* 아이콘 박스 높이 고정(46px) + 세로 중앙 → 아이콘 크기(45/33/46px)가 달라도 세 카드의 제목 y 위치가 같음(원본과 동일) */ .features--cards .feature-icon { display: flex; align-items: center; height: 46px; width: auto; line-height: 0; margin: 0 0 18px; } .features--cards .feature-icon img { display: block; } /* 크기는 img 의 width/height(인라인) 가 결정 */ .features--cards .feature-title { margin: 0 0 6px; } .features--cards .feature-text { margin: 0 -10px 30px 0; } /* 본문 폭 215px: 14px 기준 가장 긴 줄(213px)이 239px 카드 안에서 안 꺾이도록 */ .features--cards .feature-rule { display: block; width: 100%; max-width: none; height: 4px; margin: auto 0 0; /* 카드 하단에 고정 */ background: var(--c-muted); border-radius: 2px; } @media (min-width: 768px) { .features--cards { grid-template-columns: repeat(3, 239px); justify-content: space-between; justify-items: stretch; gap: 40px 24px; padding: 14px 0; } .features--cards .feature--card { width: 239px; max-width: none; } } /* 11b. Cert 카드 캡션 좌측 정렬 변형 (원본 service / cert-patent 페이지의 첫 카드 — 데스크톱만; 모바일은 중앙) */ @media (min-width: 768px) { .cert-card.cert-card--left { text-align: left; } } /* -------------------------------------------------------------------------- 11. Cert. & Patent 카드 (About us / Service / Cert 페이지 공용) -------------------------------------------------------------------------- */ .cert-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 100px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .cert-grid { justify-content: flex-start; } } .cert-card { width: 199px; max-width: 100%; text-align: center; } .cert-card img, .cert-card-img { display: block; width: 194px; height: 274px; object-fit: cover; margin: 0 auto 14px; background: #f3f3f3; } .cert-card figcaption, .cert-card-caption { font-family: var(--ff-ac); font-weight: 400; font-size: 17px; line-height: 1.35; letter-spacing: .01em; color: var(--c-title); } .cert-card-caption span, .cert-card figcaption span { display: block; } .cert-card-caption .cert-gap, .cert-card figcaption .cert-gap { height: .6em; } .cert-card a:hover { text-decoration: none; } /* -------------------------------------------------------------------------- 12. Press 카드 (Cert 페이지) -------------------------------------------------------------------------- */ .press-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 110px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .press-grid { justify-content: flex-start; } } .press-card { width: 369px; max-width: 100%; text-align: center; } .press-card img, .press-card-img { display: block; width: 100%; height: auto; aspect-ratio: 361 / 295; object-fit: cover; margin: 0 0 12px; } .press-card figcaption, .press-card-caption { font-family: var(--ff-ac); font-weight: 800; font-size: 17px; line-height: 1.4; color: var(--c-accent); } .press-card-caption span, .press-card figcaption span { display: block; } .press-card a { display: block; color: inherit; } .press-card a:hover { text-decoration: none; opacity: .9; } @media (min-width: 768px) { .press-card img, .press-card-img { height: 295px; aspect-ratio: auto; } .press-card--newspaper { width: 361px; } } /* -------------------------------------------------------------------------- 13. 제품 목록 (Product) -------------------------------------------------------------------------- */ .product-list { margin: 0; padding: 0; list-style: none; } .product-item { display: flex; flex-direction: column; gap: 18px; padding: 30px 0; } .product-item + .product-item { border-top: 1px solid #F0F0F0; } .product-item-thumb { display: block; flex: 0 0 auto; width: 222px; height: 222px; line-height: 0; } .product-item-thumb img { width: 222px; height: 222px; object-fit: cover; display: block; } .product-item-body { flex: 1 1 auto; min-width: 0; } .product-item-title { margin: 0 0 10px; font-family: var(--ff-body); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--c-black); } .product-item-title a:hover { color: var(--c-blue); text-decoration: none; } .product-item-desc { margin: 0 0 14px; font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 1.6; } .read-more { display: inline-block; font-family: var(--ff-body); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; } .read-more:hover { color: var(--c-blue); } @media (min-width: 768px) { .product-item { flex-direction: row; align-items: flex-start; gap: 40px; padding: 36px 0; } .product-list--2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; } .product-list--2col .product-item { flex-direction: column; gap: 16px; } .product-list--2col .product-item + .product-item { border-top: 0; } } /* -------------------------------------------------------------------------- 14. 제품 상세 (Product detail) -------------------------------------------------------------------------- */ .product-detail { padding: 12px 0 0; } .back-link { display: inline-block; padding: 8px 0; margin: 0 0 4px; font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--c-black); } .back-link:hover { color: var(--c-blue); text-decoration: none; } .product-detail-head { text-align: center; padding: 0 0 22px; } .product-detail-title { margin: 0 0 8px; font-family: var(--ff-body); font-weight: 800; font-size: 22px; line-height: 1.4; color: var(--c-black); } .product-detail-subtitle { margin: 0; font-family: var(--ff-body); font-weight: 800; font-size: 17px; line-height: 1.4; color: var(--c-title); } .product-gallery { background: var(--c-mosaic); padding: 14px 0 20px; } /* 원본 모자이크: 폭 815px 안에 405+405 / 346+465 (간격 4~5px). 합이 815 를 넘지 않도록 gap 4px, 컨테이너 816px */ .product-gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 4px; max-width: 816px; margin: 0 auto; padding: 0 var(--gutter); } .product-gallery-grid img { display: block; flex: 0 1 auto; max-width: 100%; height: auto; object-fit: cover; } .product-text { max-width: 680px; margin: 0 auto; padding: 34px var(--gutter) 30px; } .product-text-block + .product-text-block { margin-top: 22px; } .product-text h2, .product-text-heading { margin: 0; font-family: var(--ff-body); font-weight: 800; font-size: 16px; line-height: 1.5; color: var(--c-black); } .product-text p, .product-text-line { margin: 0; font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1.5; } @media (min-width: 768px) { .product-detail { padding: 16px 0 0; } .product-detail-title { font-size: 25px; } .product-detail-subtitle { font-size: 20px; } .product-gallery-grid { padding: 0; } .product-gallery-grid img { flex: 0 1 auto; } .product-text { padding: 40px 0 40px; } } /* -------------------------------------------------------------------------- 15. 폼 (Contact / 채팅 위젯) -------------------------------------------------------------------------- */ .form { display: grid; grid-template-columns: 1fr; gap: 18px 20px; width: 100%; max-width: 761px; margin: 0 auto; } .form--stack { grid-template-columns: 1fr; } .form-field { display: flex; flex-direction: column; min-width: 0; } .form-field--full { grid-column: 1 / -1; } .form-field label, .form-label { margin: 0 0 12px; font-family: var(--ff-body); font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--c-black); } .form-field .req, .req { color: var(--c-black); margin-left: 2px; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field input[type="url"], .form-field input[type="number"], .form-field select, .form-field textarea, .form-control { width: 100%; height: 50px; padding: 0 14px; font-family: var(--ff-sys); font-size: 14px; line-height: 1.4; color: var(--c-black); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .form-field textarea, textarea.form-control { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; font-family: var(--ff-body); font-size: 13px; line-height: 1.5; } .form-field input::placeholder, .form-field textarea::placeholder { color: #A8A8A8; font-family: var(--ff-body); font-size: 12px; } .form-field input:hover, .form-field textarea:hover { border-color: #B8B8B8; } .form-field input:focus, .form-field textarea:focus, .form-control:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(119, 189, 246, .25); } .form-field.is-invalid input, .form-field.is-invalid textarea, .form-field input.is-invalid, .form-field textarea.is-invalid { border-color: var(--c-error); } .field-error { display: none; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-error); } .field-error.is-visible, .form-field.is-invalid .field-error { display: block; } .form-honeypot { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .form-actions { grid-column: 1 / -1; text-align: center; margin-top: 8px; } .form-message { grid-column: 1 / -1; display: none; margin: 4px 0 0; text-align: center; font-size: 15px; line-height: 1.5; } .form-message.is-visible { display: block; } .form-message.is-success, .form-success { color: var(--c-blue); font-family: var(--ff-body); font-weight: 800; font-size: 16px; } .form-message.is-error, .form-error { color: var(--c-error); font-weight: 700; } .form-captcha { grid-column: 1 / -1; min-height: 0; } .form.is-sending { opacity: .85; } @media (min-width: 768px) { .form { grid-template-columns: 1fr 1fr; gap: 20px 20px; } .form--stack { grid-template-columns: 1fr; } .form-actions { margin-top: 30px; } } /* -------------------------------------------------------------------------- 16. 버튼 -------------------------------------------------------------------------- */ .btn-primary { display: inline-block; width: 100%; max-width: 510px; height: 55px; padding: 0 24px; font-family: var(--ff-body); font-weight: 800; font-size: 24px; line-height: 55px; text-align: center; letter-spacing: .01em; color: var(--c-white); background: var(--c-blue); border: 1px solid var(--c-blue); border-radius: var(--radius); cursor: pointer; text-decoration: none; vertical-align: middle; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .15s; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--c-blue-dark); border-color: var(--c-blue-dark); color: var(--c-white); text-decoration: none; } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; } .btn-primary--sm { height: 44px; line-height: 44px; font-size: 16px; max-width: 240px; } .btn-secondary { display: inline-block; padding: 10px 22px; font-family: var(--ff-body); font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--c-blue); background: transparent; border: 1px solid var(--c-blue); border-radius: var(--radius); transition: background-color .2s, color .2s; } .btn-secondary:hover { background: var(--c-blue); color: var(--c-white); text-decoration: none; } @media (min-width: 768px) { .btn-primary { font-size: 28px; } .btn-primary--sm { font-size: 16px; } } /* -------------------------------------------------------------------------- 17. 채팅 위젯 (Wix Chat 대체) -------------------------------------------------------------------------- */ .chat-widget { position: fixed; right: 16px; bottom: 16px; z-index: 900; font-family: var(--ff-body); } .chat-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 56px; height: 56px; border-radius: 28px; background: var(--c-blue); color: var(--c-white); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: background-color .2s, transform .2s var(--ease); } .chat-toggle:hover { background: var(--c-blue-dark); transform: translateY(-2px); } /* JS 가 꺼져 있으면 패널을 열 수 없으므로, 동작하지 않는 버블 버튼 대신 chat-widget.php 의