/* page-contact.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동. 불러오는 순서: tokens → _shell → _components → _legacy → page-* ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */ /* CONTACT 전용 회색 히어로 — 실측: bg #F9F9F9, 높이 175px(헤더 70px 아래), 좌측정렬, 제목만(부제 없음), Paperlogy 800 36px 잉크색. 다른 페이지의 .dk-bg-video-section (영상배경 600px 코발트그라디언트)과 완전히 다른, 원본에도 별도로 존재하는 스타일. */ /* ★2026-08-20 회장 지시 — 여기에도 배경 이미지. ⚠️ 다른 5페이지 히어로는 600px 인데 여긴 111~163px 짜리 얇은 띠다. 높이는 안 건드린다 — "배경을 이미지로"는 지시지만 "히어로를 600px 로 키워라"는 지시가 아니다. 그래서 3:2 원본이 13:1 가까이 잘린다. 인물이 읽힐 크기가 아니므로 피사체가 또렷한 컷 대신 결이 고른 야외 컷(daily-life-02)을 골랐다. 글자색을 잉크 → 흰색으로 바꾼다. 사진 위에 어두운 잉크를 두면 어떤 사진에서도 안 읽힌다. */ /* ★회장 지시(2026-08-21) — 필핀 원본대로 되돌린다. 글자 뒤 사진을 뺀다. 사진을 깔면서 붙었던 것들(어두운 오버레이 · 흰 글자 · LQIP 아래층 · preload)이 전부 그 사진 때문에 있던 것이라 같이 걷어 냈다. 밝은 바탕 + 잉크 글자만 남는다. 대비 15.9:1. */ .dk-contact-hero { position: relative; padding: 60px 0; background: var(--dk-surface-soft); border-bottom: 1px solid var(--dk-hairline-soft); } /* 필핀 원본의 얇은 경계선 (회장 지시) */ .dk-contact-hero > .dk-wrap { position: relative; z-index: 1; } .dk-contact-hero h1 { margin: 0; font-family: 'Paperlogy', sans-serif; font-weight: 800; font-size: 36px; color: var(--dk-ink); letter-spacing: var(--dk-track-snug); } @media (max-width: 768px) { .dk-contact-hero { padding: 40px 0; } .dk-contact-hero h1 { font-size: 26px; } } /* 폼 위 안내 — 원본은 센터정렬 제목(36px/700)+회색 부제(18px/#555), 에어브로우 라벨 없음 */ .dk-contact-formhead { text-align: center; margin-bottom: var(--dk-gap-lg); } .dk-contact-formhead .lead { margin-top: 14px; } /* 개인정보 수집·이용 동의 — 원본에 있는 유일한 부가 요소(스크롤 고지문+체크박스) */ .dk-consent-box { max-height: 140px; overflow-y: auto; font-size: 12.5px; line-height: 1.7; color: var(--dk-fg-3); background: var(--dk-surface-card); border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-sm); padding: 14px 16px; margin-top: 8px; } .dk-consent-check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--dk-ink); font-weight: 400; margin-top: 10px; cursor: pointer; } .dk-consent-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--dk-accent-red); } .dk-form-wrap { max-width: 640px; margin: 0 auto; } .dk-form { display: flex; flex-direction: column; gap: 22px; } .dk-form-row { display: flex; flex-direction: column; gap: 8px; } .dk-form-row label { font-size: 14px; font-weight: 700; color: var(--dk-ink); } .dk-form-row .req { color: var(--dk-accent-red); margin-left: 2px; } .dk-form-row input:not([type="checkbox"]), .dk-form-row textarea { font: inherit; font-size: 15px; padding: 13px 15px; width: 100%; border: 1.4px solid var(--dk-hairline); border-radius: var(--dk-radius-sm); background: #fff; color: var(--dk-ink); box-sizing: border-box; } /* ★버그수정: 위 width:100% 규칙이 체크박스에도 걸려 개인정보동의 체크박스가 행 전체로 늘어나 라벨 텍스트가 오른쪽 끝으로 밀려나던 문제 — checkbox 제외로 해결. */ .dk-form-row label.dk-consent-check { font-weight: 400; display: flex; } .dk-form-row input:focus, .dk-form-row textarea:focus { outline: none; border-color: var(--dk-accent-red); } .dk-form-row textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .dk-form-honeypot { position: absolute; left: -9999px; top: -9999px; } /* ★2026-07-25: 원본 실측(www.dakgongcamp.com/26 제출하기 버튼) = 진한 회색(#363636) +흰글자+작은 사이즈(12px/700)+각진 라운드(2px). 레드 강조 버튼은 원본에 없는 임의 추가였음. */ .dk-form-submit { align-self: flex-start; border: none; cursor: pointer; background: var(--dk-surface-dark-3); color: #fff; padding: 12px 26px; border-radius: 2px; font-size: 13px; font-weight: 700; transition: opacity var(--dk-dur-fast) var(--dk-ease-out); } .dk-form-submit:hover { opacity: 0.88; } .dk-form-note { font-size: 13px; color: var(--dk-fg-muted); margin: -8px 0 0; } .dk-form-success { display: none; } .dk-form-success.is-shown { display: flex; } @media (max-width: 480px) { .dk-form-submit { width: 100%; } }