/* INNO&M CONTACT — 문의 폼 중심 페이지 (form-focused).
   Shared tokens / header / footer / eyebrow all come from common.css.
   Dark canvas + blue accent, surface-raised form card, mailto compose on submit. */

.contact-page{background:var(--canvas);padding:0;min-height:100vh;}
.contact-page > .container{max-width:1248px;padding-top:116px;padding-bottom:100px;}
@media(min-width:1320px){.contact-page > .container{padding-left:24px;padding-right:24px;}}
@media(max-width:900px){.contact-page > .container{padding-top:116px;padding-bottom:72px;}}

/* ===== 시안2 — 1행: 제목(전체 가로) / 2행: 좌우 2열(왼쪽 연락처+오시는 길+지도, 오른쪽 폼) =====
   지도는 왼쪽 컬럼 안, 오시는 길 아래에 세로로 이어 붙인다(3열 금지, 폼 크기 축소 금지). */

/* 1행: 제목 — 전체 가로 폭 */
.cf-head{width:100%;margin-bottom:56px;}
.cf-head .eyebrow{margin-bottom:26px;}
.cf-title{font-family:var(--ff-ko);font-weight:700;font-size:clamp(38px,4.4vw,58px);line-height:1.18;letter-spacing:-1.4px;color:var(--text);word-break:keep-all;}
.cf-lead{margin-top:22px;max-width:100%;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.75;color:var(--muted);word-break:keep-all;}
/* 넓은 화면은 1행 전체 가로를 쓰므로 lead 안 봉합(nowrap)이 불필요 — 좁은 화면(≤600px)에서만 절 경계 봉합 유지 */
.cf-lead .nowrap{white-space:normal;}
@media(max-width:600px){
  .cf-lead .nowrap{white-space:nowrap;}
}

/* 2행: 좌우 2열 */
.cf-split{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:stretch;}

/* 왼쪽 컬럼 — 우측 상담폼과 높이를 맞추기 위해 세로 flex, 지도가 남는 높이를 흡수 */
.cf-left{padding-top:0;display:flex;flex-direction:column;}

/* 오시는 길(왼쪽 컬럼 하단) — 남는 세로 공간을 차지해 지도가 늘어날 수 있게 함 */
.cf-loc{margin-top:34px;display:flex;flex-direction:column;flex:1;}
.cf-loc-label{font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:2px;}
.cf-loc .cf-info{margin-top:0;}

/* 지도 플레이스홀더 — 왼쪽 컬럼(오시는 길) 아래에 세로로 이어 붙임.
   실제 주소 지도 이미지 없어 다크톤 스타일드 박스로 구성 */
.cf-map{
  position:relative;overflow:hidden;min-height:220px;flex:1 1 auto;margin-top:22px;width:100%;
  border:1.5px solid var(--hair-2);border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(2,112,255,.16), transparent 60%),
    linear-gradient(160deg, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:24px;
}
.cf-map-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(2,112,255,.16) 0 2px, transparent 2px 138px);
}
.cf-map-pin{
  position:relative;z-index:1;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:var(--accent-wash);border:1px solid var(--accent-line);
  box-shadow:0 0 0 8px rgba(2,112,255,.08);
}
.cf-map-label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.cf-map-tag{font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.cf-map-note{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.55;color:var(--muted-2);word-break:keep-all;}

@media(max-width:860px){
  .cf-map{min-height:180px;}
}

/* 오른쪽 컬럼 — 상담폼 자체(필드 크기)는 그대로 두고, 좌측이 더 길 때만 카드 바깥 높이가 맞춰지게 wrapper를 stretch */
.cf-right{display:flex;}

/* form card (오른쪽) */
.cf-form{
  background:var(--surface-raised);border:1.5px solid var(--accent);border-radius:var(--radius-lg);
  box-shadow:0 20px 60px -16px rgba(2,112,255,.32);
  padding:34px 36px 30px;display:flex;flex-direction:column;gap:10px;flex:1;
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.cf-field label{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,0.82);}
.cf-req{color:var(--accent);}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);color:var(--text);
  background:var(--surface-sunken);border:1px solid var(--hair-2);border-radius:var(--radius-sm);
  padding:10px 15px;transition:border-color .18s,box-shadow .18s;
}
.cf-field textarea{resize:vertical;min-height:70px;line-height:1.5;}
.cf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 16px,calc(100% - 14px) 16px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;}
.cf-field select option{color:var(--text);background:var(--bg-panel);}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(255,255,255,0.32);}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}

.cf-submit{
  align-self:flex-start;margin-top:4px;font-family:var(--ff-ko);font-weight:600;font-size:var(--fs-base);
  color:var(--text);background:var(--accent);border:none;border-radius:var(--radius-pill);
  padding:12px 34px;cursor:pointer;transition:transform .18s,background .18s;
}
.cf-submit span{margin-left:4px;}
.cf-submit:hover{transform:translateY(-2px);background:var(--color-brand-hover);}
.cf-submit:active{transform:none;}

.cf-formnote{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted-2);line-height:1.55;word-break:keep-all;}
.cf-formnote a{color:var(--accent);text-decoration:none;}
.cf-formnote a:hover{text-decoration:underline;}
.cf-formnote.cf-ok{color:#3ddc84;}
.cf-formnote.cf-err{color:#ff6a6a;}

/* contact info — 왼쪽 컬럼 세로 스택(구분선형) */
.cf-info{margin-top:0;display:flex;flex-direction:column;gap:0;}
.cf-loc .cf-info{margin-top:0;}
.cf-info-item{
  display:flex;flex-direction:column;gap:6px;flex:none;
  background:transparent;border:none;border-top:1px solid var(--hair);border-radius:0;
  padding:18px 0;text-decoration:none;transition:border-color .18s;
}
a.cf-info-item:hover{border-top-color:var(--accent-line);}
.cf-info-k{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);letter-spacing:1.6px;color:var(--accent);text-transform:uppercase;}
.cf-info-v{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:rgba(255,255,255,0.86);line-height:1.45;word-break:keep-all;}
.cf-info-v em{font-style:normal;color:var(--muted-2);font-size:var(--fs-xs);}

/* 좌우 → 세로 스택 전환 */
@media(max-width:980px){
  .cf-head{margin-bottom:44px;}
  .cf-split{grid-template-columns:1fr;gap:52px;align-items:start;}
  .cf-left{padding-top:0;}
  .cf-lead{max-width:100%;}
  /* 1열 스택에서는 좌우 높이 맞춤(stretch) 불필요 — 각자 자연스러운 높이로 */
  .cf-loc{flex:none;}
  .cf-map{flex:none;}
  .cf-right{display:block;}
  .cf-form{flex:none;}
}
@media(max-width:680px){
  .cf-row{grid-template-columns:1fr;}
  .cf-form{padding:26px 20px 24px;}
}

/* CAREER 드롭다운 내 "준비중" 배지 (헤더 nav-dd, 공용 common.css 구조 재사용) */
.nav-dd-tag{margin-left:8px;font-family:var(--ff-en);font-weight:700;font-size:10px;letter-spacing:.8px;color:var(--muted-2);}

/* Mobile nav drawer: layout class applied by JS while open (display stays flex
   during the close animation). opacity/transform only. */
.nav.nav--drawer{
  display:flex;position:absolute;top:100%;right:24px;flex-direction:column;
  background:rgba(10,10,12,0.97);padding:16px 24px;border-radius:12px;gap:16px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
.nav.nav--drawer.nav--open{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .nav.nav--drawer{transition:none;}
}

/* 모바일 터치 타깃 ≥44px (리뷰 반영) */
@media(max-width:680px){
  .cf-field input,.cf-field select,.cf-field textarea{padding:13px 15px;}
}

/* ===== CONTACT HERO(.ch3) — 배경 4컷 크로스페이드 + 도트/스와이프/진행바 =====
   시안 B3-3 v2(_시안_홈개편_2026-07/B_contact_hero) 통합, 2026-07-21.
   대표 지시(07-21 09:32): 도트+스와이프+진행바 추가를 위해 CSS 자동 애니메이션에서
   JS class 토글(.is-active) 방식으로 전환. 원본 이미지가 이미 1344x768(≈16:9) 와이드 컷이라,
   데스크톱(2.23:1)은 풀블리드 유지하고 모바일만 @media(max-width:480px)에서 letterbox(16:9)
   프레임을 씌워 "가로로 길게" 보이게 한다. */
.ch3{position:relative;min-height:860px;display:flex;align-items:flex-end;overflow:hidden;}
.ch3 .img-cycle{position:absolute;inset:0;touch-action:pan-y;}
.ch3 .img-slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  filter:saturate(.85) brightness(1.02);opacity:0;transition:opacity .9s ease;}
.ch3 .img-slide.is-active{opacity:1;}
.ch3 .img-slide:nth-child(1){background-image:url(../assets/bg-success-1.png);}
.ch3 .img-slide:nth-child(2){background-image:url(../assets/bg-success-2.png);}
.ch3 .img-slide:nth-child(3){background-image:url(../assets/bg-success-3.png);}
.ch3 .img-slide:nth-child(4){background-image:url(../assets/bg-success-4.png);}
@media (prefers-reduced-motion: reduce){
  .ch3 .img-slide{transition:none;}
  .ch3-progress-fill{transition:none!important;}
}

.ch3-stacknav{position:absolute;right:24px;bottom:40px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.ch3-dots{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.34);box-shadow:0 6px 22px rgba(0,0,0,.35);}
.ch3-dot{appearance:none;-webkit-appearance:none;border:none;margin:0;padding:7px;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.ch3-dot::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;}
.ch3-dot.is-active::before{background:var(--accent);transform:scale(1.35);box-shadow:0 0 0 3px rgba(2,112,255,.22);}
.ch3-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%;}
.ch3-progress{width:74px;height:3px;border-radius:var(--radius-pill);background:rgba(255,255,255,.2);overflow:hidden;}
.ch3-progress-fill{display:block;height:100%;width:0%;background:var(--accent);border-radius:var(--radius-pill);}

@media (max-width:480px){
  .ch3-stacknav{right:18px;bottom:22px;gap:7px;}
  .ch3-dots{padding:6px 9px;gap:6px;}
  .ch3-progress{width:58px;}
  .ch3 .img-cycle{inset:auto;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:16/9;overflow:hidden;}
}

.ch3 .veil{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 780px 620px at 0% 100%, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 72%),
  linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.28) 100%);}

.ch3-caption{position:absolute;top:112px;left:24px;z-index:2;display:flex;align-items:center;gap:10px;
  font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:15px;color:rgba(255,255,255,.7);text-shadow:0 2px 10px rgba(0,0,0,.7);}
.ch3-caption .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}

.ch3-inner{position:relative;z-index:3;max-width:var(--content);margin:0 auto;padding:0 24px 108px;width:100%;}
.ch3-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:34px;}
.ch3-eyebrow .n{font-family:var(--ff-en);font-weight:600;font-size:14px;color:var(--accent);}
.ch3-eyebrow .l{font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.5);text-transform:uppercase;}
.ch3-eyebrow .line{width:40px;height:1px;background:rgba(255,255,255,.25);flex:none;}

/* 헤드라인: 의미 단위 2줄 고정. <br> 딱 1개(절 경계). 각 줄은 nowrap으로 묶어
   중간에 아무데서나 잘리지 않게 하고, font-size는 clamp로 뷰포트에 맞춰 줄어들어
   1920px·390px 모두 정확히 2줄로 떨어지도록 폭을 맞춤(검증: Range.getClientRects). */
.ch3-h1{font-family:var(--ff-ko);font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.34;letter-spacing:-1.1px;color:#fff;margin:0 0 40px;max-width:820px;text-shadow:0 2px 16px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8);}
.ch3-h1 em{display:inline-block;font-family:var(--ff-ko);font-style:normal;font-weight:700;font-size:1.14em;color:var(--accent);margin-top:6px;position:relative;padding-bottom:14px;}
.ch3-h1 em::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:1px;background:var(--accent);}

@media (max-width:480px){
  .ch3{min-height:620px;}
  .ch3-caption{top:78px;}
  .ch3-inner{padding-left:18px;padding-right:18px;padding-bottom:64px;}
  .ch3-h1{margin-bottom:28px;letter-spacing:-1.5px;font-size:clamp(23px,7.6vw,30px);}
  .ch3-h1 em{font-size:1.03em;margin-top:4px;}
}

.ch3-row{display:flex;align-items:flex-end;justify-content:flex-start;}
.ch3-sub{font-family:var(--ff-ko);font-weight:400;font-size:16px;line-height:1.8;color:rgba(255,255,255,.5);max-width:520px;margin:0;}

.ch3-statline{margin-top:56px;display:flex;align-items:center;gap:20px;font-family:var(--ff-en);}
.ch3-statline .num{font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:26px;color:#fff;}
.ch3-statline .lbl{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap;}
.ch3-statline .sep{width:1px;height:26px;background:rgba(255,255,255,.18);}