/*------------------------------------------------------
· apmedia Ver 2.0
· Type : contact.css (Contact 페이지 전용 — 라이트 에디토리얼 · 화이트/레드)
· Author : Albatrosss Pictures
· Data : 2026-07-06
· Copyright @ 2026 apmedia all rights reserved
---------------------------------------------------------
· NOTE: 모든 룰을 .apmedia-contact 래퍼 하위로 스코프. custom.css / contents.css 미수정.
·       .apmedia-contact 안에서 custom.css :root 의 다크 토큰(--color-white* · --contact-bg · --contact-line)을
·       라이트 잉크(#141414 계열)로 재매핑 → 흰 배경 + 다크 텍스트 전환 (About 페이지와 동일 기법).
·       레드 --signature-color 는 액센트로 유지, 레드 배경 위 텍스트만 흰색(--contact-on-red).
· 구조 : 1) 스코프 토큰  2) HERO(대형 헤드라인 + 대표 이메일)  3) BODY(회사정보/무드 · 문의폼)  4) MAP  5) 반응형
· 라인 최소 : 폼 인풋 하단선만 유지, 구분은 여백/배경톤. 스크롤 리빌은 테마 공통([data-reveal]/[data-fade])에 위임.
---------------------------------------------------------*/

@charset "utf-8";

/* #################### 01. Wrapper + 스코프 토큰(다크→라이트 재매핑) #################### */
.apmedia-contact {
    --apmedia-contact-sec-pad: clamp(5rem, 9vw, 10rem);
    --apmedia-contact-gap-xl: clamp(3.5rem, 7vw, 6.5rem);
    --apmedia-contact-col-gap: clamp(3rem, 6vw, 7rem);
    --apmedia-contact-field-gap: clamp(2rem, 3vw, 3rem);
    --apmedia-contact-field-basis: clamp(12rem, 20vw, 16rem);
    --apmedia-contact-aside-gap: clamp(2.5rem, 5vw, 4rem);
    --apmedia-contact-info-gap: clamp(1.5rem, 2.5vw, 2.25rem);
    --apmedia-contact-sns-size: clamp(1.25rem, 1.6vw, 1.5rem);          /* 20~24px — 본문 값 글자와 눈높이를 맞춘 아이콘 크기 */
    --apmedia-contact-sns-gap: clamp(0.875rem, 1.4vw, 1.25rem);         /* 14~20px — 아이콘 사이 */
    --apmedia-contact-head-fs: clamp(2.75rem, 6vw + 0.5rem, 6.5rem);
    --apmedia-contact-mail-fs: clamp(1.125rem, 2.6vw + 0.5rem, 3rem);   /* 320 에서 이메일 한 줄이 넘치지 않게 하한 축소 */
    --apmedia-contact-mail-icon: clamp(1.15rem, 1.6vw, 1.6rem);
    --apmedia-contact-lead-w: clamp(20rem, 46vw, 40rem);
    --apmedia-contact-figure-h: clamp(15rem, 24vw, 24rem);
    --apmedia-contact-map-h: clamp(18rem, 34vw, 32rem);
    --apmedia-contact-chip-py: clamp(0.7rem, 0.9vw, 0.95rem);
    --apmedia-contact-chip-px: clamp(1.1rem, 1.8vw, 1.75rem);
    --apmedia-contact-input-py: clamp(0.75rem, 1vw, 1.05rem);
    --apmedia-contact-textarea-minh: clamp(7rem, 13vw, 10rem);
    --apmedia-contact-radius: var(--radius-xs);
    --apmedia-contact-radius-img: var(--radius-sm-md);
    --apmedia-contact-underline-h: clamp(0.125rem, 0.18vw, 0.15rem);
    --apmedia-contact-submit-icon-size: clamp(1rem, 1.4vw, 1.25rem);
    /* 다크 토큰 → 라이트 잉크 재매핑 (흰 배경 위 다크 텍스트) */
    --contact-bg: #ffffff;
    --contact-line: rgba(20, 20, 20, 0.16);
    --contact-fill: rgba(20, 20, 20, 0.04);
    --contact-fill-strong: rgba(20, 20, 20, 0.07);
    --contact-on-red: #ffffff;
    --color-white: #141414;
    --color-white-80: rgba(20, 20, 20, 0.82);
    --color-white-70: rgba(20, 20, 20, 0.72);
    --color-white-60: rgba(20, 20, 20, 0.6);
    --color-white-50: rgba(20, 20, 20, 0.5);
    --color-white-40: rgba(20, 20, 20, 0.42);
    --color-white-30: rgba(20, 20, 20, 0.34);
    --color-white-12: rgba(20, 20, 20, 0.1);
    --color-white-04: rgba(20, 20, 20, 0.04);
    /* 히어로 다크 밴드(About 히어로 프레임 통일) — 이 섹션만 다크, 본문은 라이트 유지 */
    --apmedia-contact-hero-bg: #0d0d0f;
    --apmedia-contact-hero-ink: #ffffff;
    --apmedia-contact-hero-sub: rgba(255, 255, 255, 0.72);
    --apmedia-contact-hero-line: rgba(255, 255, 255, 0.22);
    --apmedia-contact-hero-lead-fs: clamp(1.1875rem, 1vw + 0.8rem, 1.625rem);
    /* 히어로 = about 프레임과 동일한 full 100vh 섹션 (about.css --a1-hero-* 실값 이식) */
    --apmedia-contact-hero-minh: 100svh;   /* about 히어로와 동일 기준(svh) */
    --apmedia-contact-hero-pt: clamp(2rem, 4vw, 4rem);
    --apmedia-contact-hero-pb: clamp(2.5rem, 5vw, 5rem);
    --apmedia-contact-hero-gap: clamp(2.5rem, 6vw, 6rem);
    position: relative;
    background: var(--contact-bg);
    color: var(--color-white);
    overflow: hidden;
}
.apmedia-contact .apmedia-contact-eyebrow { font-family: var(--set-font-en); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-loose); text-transform: uppercase; color: var(--signature-color); }

/* #################### 02. HERO (about 프레임 통일 — full 100vh · 세로 중앙 정렬 · 초대형 헤드라인 + 리드 + 대표 이메일) #################### */
/* 높이·정렬·패딩은 공통 셸(.apmedia-subhero)이 단일 소스. 여기서는 배경·색만 정의한다. */
.apmedia-contact .apmedia-contact-hero { background: var(--apmedia-contact-hero-bg); color: var(--apmedia-contact-hero-ink); }
.apmedia-contact .apmedia-contact-hero-inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--apmedia-contact-hero-gap); }
.apmedia-contact .apmedia-contact-headline { font-size: var(--fs-t-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--apmedia-contact-hero-ink); word-break: keep-all; text-wrap: balance; margin: 0; }
.apmedia-contact .apmedia-contact-headline strong { color: var(--signature-color); font-weight: var(--fw-semibold); }
.apmedia-contact .apmedia-contact-lead { width: min(var(--apmedia-contact-lead-w), 100%); font-size: var(--apmedia-contact-hero-lead-fs); font-weight: var(--fw-light); line-height: var(--lh-relaxed); color: var(--apmedia-contact-hero-sub); word-break: keep-all; margin-top: 0; }
.apmedia-contact .apmedia-contact-mail { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-md); margin-top: 0; font-size: var(--apmedia-contact-mail-fs); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--apmedia-contact-hero-ink); transition: color var(--transition-base); }
.apmedia-contact .apmedia-contact-mail-text { padding-bottom: var(--space-2xs); border-bottom: var(--line-thin) solid var(--apmedia-contact-hero-line); transition: border-color var(--transition-base); }
.apmedia-contact .apmedia-contact-mail-icon { flex: 0 0 auto; width: var(--apmedia-contact-mail-icon); height: var(--apmedia-contact-mail-icon); transition: transform var(--transition-base); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-mail:hover { color: var(--signature-color); } .apmedia-contact .apmedia-contact-mail:hover .apmedia-contact-mail-text { border-color: var(--signature-color); } .apmedia-contact .apmedia-contact-mail:hover .apmedia-contact-mail-icon { transform: translate(0.25rem, -0.25rem); } }

/* #################### 03. BODY — 비대칭 그리드 (회사정보/무드 · 문의폼) #################### */
.apmedia-contact /* 상단 여백은 공통 .apmedia-subwrap(--subwrap-py)이 담당. 하단은 body↔map 간격 유지 */
.apmedia-contact-body { padding: 0 0 var(--apmedia-contact-gap-xl); }
.apmedia-contact .apmedia-contact-grid { display: flex; flex-direction: row; align-items: flex-start; gap: var(--apmedia-contact-col-gap); }

/* 03-a. LEFT — 회사정보 · 무드 이미지 */
.apmedia-contact .apmedia-contact-aside { flex: 4 1 0; display: flex; flex-direction: column; gap: var(--apmedia-contact-aside-gap); }
.apmedia-contact .apmedia-contact-info { display: flex; flex-direction: column; gap: var(--apmedia-contact-info-gap); }
.apmedia-contact .apmedia-contact-info-item { display: flex; flex-direction: column; gap: var(--space-2xs); }
.apmedia-contact .apmedia-contact-info-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); color: var(--color-white-50); }
.apmedia-contact .apmedia-contact-info-value { font-size: var(--fs-body-md); line-height: var(--lh-normal); color: var(--color-white-80); word-break: keep-all; }
.apmedia-contact a.apmedia-contact-info-value { transition: color var(--transition-base); }
@media (hover: hover) { .apmedia-contact a.apmedia-contact-info-value:hover { color: var(--signature-color); } }
/* SNS — 연락처 목록의 한 항목. 값 자리를 아이콘 가로 나열로 채운다(푸터 tail.php 와 같은 아이콘) */
.apmedia-contact .apmedia-contact-sns { display: flex; align-items: center; gap: var(--apmedia-contact-sns-gap); }
.apmedia-contact .apmedia-contact-sns-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-white-80); transition: color var(--transition-base); }
.apmedia-contact .apmedia-contact-sns-link svg { width: var(--apmedia-contact-sns-size); height: var(--apmedia-contact-sns-size); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-sns-link:hover { color: var(--signature-color); } }
/* 터치 기기 — 아이콘만 있는 링크라 손끝(44px) 히트박스를 따로 확보한다 */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .apmedia-contact .apmedia-contact-sns-link { min-height: var(--size-touch-min); width: var(--size-touch-min); }
    .apmedia-contact .apmedia-contact-sns { gap: var(--space-2xs); }
}
.apmedia-contact .apmedia-contact-figure { position: relative; width: 100%; height: var(--apmedia-contact-figure-h); overflow: hidden; border-radius: var(--apmedia-contact-radius-img); }
.apmedia-contact .apmedia-contact-figure-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(0.15) contrast(1.03); transition: transform var(--dur-slow) var(--ease-cta), filter var(--dur-slow) var(--ease-cta); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-figure:hover .apmedia-contact-figure-img { transform: scale(1.05); filter: grayscale(0) contrast(1.03); } }

/* 03-b. RIGHT — 문의 폼 */
.apmedia-contact .apmedia-contact-panel { flex: 6 1 0; }
.apmedia-contact .apmedia-contact-form { display: flex; flex-direction: column; gap: var(--apmedia-contact-field-gap); }
.apmedia-contact .apmedia-contact-field { display: flex; flex-direction: column; gap: var(--space-sm); }
.apmedia-contact .apmedia-contact-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--apmedia-contact-field-gap); }
.apmedia-contact .apmedia-contact-row .apmedia-contact-field { flex: 1 1 var(--apmedia-contact-field-basis); }
.apmedia-contact .apmedia-contact-label { display: block; font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-snug); color: var(--color-white-50); }
.apmedia-contact .apmedia-contact-req { color: var(--signature-color); margin-left: var(--space-2xs); }
.apmedia-contact .apmedia-contact-hint { font-size: var(--fs-caption-sm); font-weight: var(--fw-regular); color: var(--color-white-40); margin-left: var(--space-xs); }
.apmedia-contact .apmedia-contact-chips { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); }
.apmedia-contact .apmedia-contact-chip { position: relative; overflow: hidden; z-index: 0; padding: var(--apmedia-contact-chip-py) var(--apmedia-contact-chip-px); border: 0; border-radius: var(--apmedia-contact-radius); background: var(--contact-fill); color: var(--color-white-70); font-family: inherit; font-size: var(--fs-body-sm); cursor: pointer; transition: color var(--transition-base), transform var(--transition-base); }
.apmedia-contact .apmedia-contact-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signature-color); transform: scaleX(0); transform-origin: left center; transition: transform var(--transition-base) var(--ease-cta); }
.apmedia-contact .apmedia-contact-chip.is-active { color: var(--contact-on-red); }
.apmedia-contact .apmedia-contact-chip.is-active::before { transform: scaleX(1); }
.apmedia-contact .apmedia-contact-chip:active { transform: scale(0.96); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-chip:hover { color: var(--contact-on-red); } .apmedia-contact .apmedia-contact-chip:hover::before { transform: scaleX(1); } }
.apmedia-contact .apmedia-contact-input, .apmedia-contact .apmedia-contact-textarea { width: 100%; padding: var(--apmedia-contact-input-py) 0; background-color: transparent; background-image: linear-gradient(to right, var(--signature-color), var(--signature-color)); background-repeat: no-repeat; background-position: left bottom; background-size: 0 var(--apmedia-contact-underline-h); border: 0; border-bottom: var(--line-thin) solid var(--contact-line); font-family: inherit; font-size: var(--fs-body-md); color: var(--color-white); transition: border-color var(--transition-base), background-size var(--dur-base) var(--ease-cta); outline: none; }
.apmedia-contact .apmedia-contact-textarea { min-height: var(--apmedia-contact-textarea-minh); resize: vertical; line-height: var(--lh-normal); }
.apmedia-contact .apmedia-contact-input:focus, .apmedia-contact .apmedia-contact-textarea:focus { background-size: 100% var(--apmedia-contact-underline-h); }
.apmedia-contact .apmedia-contact-input::placeholder, .apmedia-contact .apmedia-contact-textarea::placeholder { color: var(--color-white-30); }
.apmedia-contact .apmedia-contact-agree { display: flex; flex-direction: row; align-items: center; gap: var(--space-sm); font-size: var(--fs-body-sm); color: var(--color-white-60); cursor: pointer; }
.apmedia-contact .apmedia-contact-agree input { accent-color: var(--signature-color); cursor: pointer; }
.apmedia-contact .apmedia-contact-submit { position: relative; overflow: hidden; width: 100%; padding: var(--padding-btn-y) var(--space-xl); background: var(--signature-color); color: var(--contact-on-red); border: 0; border-radius: var(--apmedia-contact-radius); font-family: inherit; font-size: var(--fs-btn-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); transition: background var(--transition-base); }
.apmedia-contact .apmedia-contact-submit::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--signature-color-hover); transform: scaleX(0); transform-origin: right center; transition: transform var(--transition-base) var(--ease-cta); }
.apmedia-contact .apmedia-contact-submit-text, .apmedia-contact .apmedia-contact-submit-icon { position: relative; z-index: 1; }
.apmedia-contact .apmedia-contact-submit-icon { flex: 0 0 auto; width: var(--apmedia-contact-submit-icon-size); height: var(--apmedia-contact-submit-icon-size); transition: transform var(--transition-base) var(--ease-cta); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-submit:hover::before { transform: scaleX(1); } .apmedia-contact .apmedia-contact-submit:hover .apmedia-contact-submit-icon { transform: translateX(var(--space-xs)); } }

/* #################### 04. MAP — 오시는 길 #################### */
.apmedia-contact /* 하단 여백은 공통 .apmedia-subwrap(--subwrap-py)이 담당 */
.apmedia-contact-map-sec { padding: 0; }
.apmedia-contact .apmedia-contact-map-title { font-size: var(--fs-t-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--color-white); margin: var(--space-sm) 0 var(--space-2xl); }
.apmedia-contact .apmedia-contact-map { position: relative; width: 100%; height: var(--apmedia-contact-map-h); overflow: hidden; border-radius: var(--apmedia-contact-radius-img); }
.apmedia-contact .apmedia-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.02); transition: filter var(--dur-slow) var(--ease-cta); }
@media (hover: hover) { .apmedia-contact .apmedia-contact-map:hover iframe { filter: grayscale(0) contrast(1.02); } }

/* #################### 05. 반응형 #################### */
@media (max-width: 1024px) {
.apmedia-contact .apmedia-contact-grid { flex-direction: column; gap: var(--apmedia-contact-aside-gap); }
.apmedia-contact .apmedia-contact-aside { flex: 1 1 auto; width: 100%; }
.apmedia-contact .apmedia-contact-panel { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 480px) {
.apmedia-contact .apmedia-contact-row { flex-direction: column; }
}

/* 허니팟 — 봇 차단용 미끼 칸. 사람에게는 완전히 숨김(캡차 대체) */
.apmedia-contact-hp { display: none; }

/* 터치 기기 — 누르는 요소 44px 확보. 실측: mail 32px · info-value 24px · chip 38px.
   체크박스(agree)는 제외한다 — 크기를 강제하면 네이티브 위젯 모양이 깨진다. */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .apmedia-contact-mail,
    .apmedia-contact-info-value,
    .apmedia-contact-chip {
        display: inline-flex;
        align-items: center;
        min-height: var(--size-touch-min);
    }
}