/* 문의(contact) 페이지 전용 스타일 — 공통 d3.css 위에 덧붙임 */

/* 머리 사진: 나무 계단이 오른쪽에 보이게 */
.ct-hero{object-position:50% 46%}

/* ===== 문의 양식 배치: 데스크톱은 [머리말·연락처 | 양식], 좁은 화면은 머리말 → 적는 요령 → 양식 → 연락처 ===== */
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;
  grid-template-areas:"head form" "info form";column-gap:clamp(40px,calc(5.2vw / var(--z)),96px);align-items:start}
.cgrid-head{grid-area:head}
.cgrid-head .label + .h2{margin-top:22px}
.cgrid-head .lead{margin-top:18px}
/* 양식 윗선을 왼쪽 라벨의 보라 짧은 선 높이에 맞춤 */
.cgrid > .form{grid-area:form;margin-top:11px;padding-top:28px;border-top:1px solid var(--line2)}
.cgrid-info{grid-area:info;margin-top:clamp(48px,calc(4.6vw / var(--z)),72px);display:grid;gap:clamp(48px,calc(4.6vw / var(--z)),64px)}

/* 대표 전화: 메인 숫자 줄처럼 가는 대형 숫자 */
.direct-tel{display:grid;gap:12px;margin-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line2);transition:color .3s}
.tn-thin{font-size:clamp(44px,calc(4.4vw / var(--z)),68px);font-weight:200;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.direct-tel:hover{color:var(--hi)}
.direct-tel:hover .tn-thin{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:var(--accent)}
.direct .kv{border-top:0}

/* 적어 주시면 좋은 내용: 번호 + 1px 선 */
.tips ol{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line2)}
.tips li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.tips-n{font-size:13px;color:var(--mute)}
.tips li p{font-size:15.5px;line-height:1.6;color:var(--mute)}
.tips li b{display:block;font-size:16.5px;font-weight:600;color:var(--fg);margin-bottom:2px}

/* 양식 세부 */
.form-note .req{margin:0 4px 0 0}
.form .todo{color:var(--fg);border-bottom:1px dashed var(--accent)}
.fld .prefilled{border-color:rgba(139,124,255,.6);background-color:rgba(139,124,255,.06)}
.form .agree{padding-top:6px}

/* ===== 문의 접수 연결 (챗봇 스위치를 켠 빌드에서만 생기는 요소·속성 — _build.py inquiry_form. 꺼진 빌드에는 이 요소들이 없어 영향 없음) ===== */
/* 로봇 거르기 숨은 칸: 화면 밖으로 (display:none이면 일부 로봇이 건너뜀) */
.form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fld .opt{margin-left:2px;font-weight:400;color:var(--mute)}
.form .fld-list a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
/* JavaScript가 없으면 보낼 수 없으므로 보내기 단추를 숨기고 안내 문구(noscript)만 */
html:not(.js) .form[data-inquiry] .form-act{display:none}
.form-noscript{padding:14px 18px;border:1px solid var(--line2);border-left:2px solid var(--accent);font-size:14.5px;line-height:1.65;color:var(--fg)}
.form-noscript a{text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}   /* 전화번호가 '+82 31 / 340 2801'로 갈려 밑줄이 끊기지 않게 (아래 .form-status a 와 같음) */
/* 접수 결과 칸 (d3.js가 채움): 보내는 중 · 접수됨 · 실패 */
.form-status{padding:16px 20px;border:1px solid var(--line2);background:var(--soft);font-size:15px;line-height:1.7;color:var(--fg)}
.form-status:empty{display:none}
.form-status:focus{outline:none}
.form-status:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.form-status.is-wait{color:var(--mute)}
.form-status.is-ok{border-color:rgba(139,124,255,.6);background:rgba(139,124,255,.08)}
.form-status.is-bad{border-color:var(--err)}
.form-status a{text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.form-status .btn{margin-top:16px}
.form[aria-busy="true"] .form-act .btn{opacity:.55;cursor:progress}
/* 접수되면 칸들을 접고 결과 칸만 */
.form.is-sent > :not(.form-status){display:none}

/* ===== 사업장 ===== */
.locsplit .split-txt > .label{margin-top:0}
.locsplit .split-txt > .label + .locs{margin-top:18px}
.locsplit .split-txt > .locs + .label{margin-top:clamp(40px,calc(3.6vw / var(--z)),56px)}
.locsplit .split-txt > .label + .abroad{margin-top:18px}
.label .en{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mute2)}
.locs{border-top:1px solid var(--line2)}
.locs li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n m" "a a";gap:6px 20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.loc-n{grid-area:n;font-size:clamp(20px,calc(1.7vw / var(--z)),24px);font-weight:600;letter-spacing:-.03em;line-height:1.3}
.loc-a{grid-area:a;font-size:15.5px;line-height:1.65;color:var(--mute)}
.loc-a > span{display:block;font-size:14.5px}
.loc-map{grid-area:m;display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;border-bottom:1px solid var(--line2);font-size:14.5px;font-weight:500;color:var(--fg);white-space:nowrap;transition:border-color .25s,color .25s}
.loc-map .ext{width:16px;height:16px;color:var(--mute);transition:transform .25s,color .25s}
.loc-map:hover{border-color:var(--accent)}
.loc-map:hover .ext{color:var(--accent);transform:translate(2px,-2px)}
.abroad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line2)}
.abroad > div{padding:20px 20px 4px 0}
.abroad > div + div{padding-left:24px;border-left:1px solid var(--line)}
.abroad dt{display:flex;align-items:baseline;gap:10px;font-size:clamp(20px,calc(1.7vw / var(--z)),24px);font-weight:600;letter-spacing:-.03em;line-height:1.3}
.abroad dt small{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mute)}
.abroad dd{margin:6px 0 0;font-size:15.5px;color:var(--mute)}
.loc-img{object-position:72% 55%}

/* ===== 반응형 ===== */
/* 중간 폭: 글 칸이 길어지므로 본사 사진을 정사각으로 맞춰 높이를 비슷하게 */
@media (min-width:960px) and (max-width:1239px){
  .locsplit .split-media img{aspect-ratio:1}
}
/* 2단이 막 시작되는 960~1023px(1920 모니터 200% 등): 해외 법인 한 칸이 154px쯤이라 '베트남 / 법인'으로 꺾이고 영문만 옆에 뜨므로,
   휴대폰처럼 이름 위 · 영문 아래로 쌓아 두 칸 높이를 맞춤 (영문판은 이 폭에서 한 줄에 들어가 그대로) */
@media (min-width:960px) and (max-width:1023px){
  .lang-ko .abroad dt{flex-direction:column;gap:2px}
}
/* 아주 넓은 화면: 본사 사진 높이를 1920px 폭 때 값에서 멈춤 — 화면 끝까지 붙어 계속 커지면 주소 글 아래로 빈 어둠이 길어짐 (d3.css .split.bleed 와 같은 방식) */
@media (min-width:960px){
  .locsplit .split-media img{max-height:760px}
}
/* 좁은 화면: 적는 요령을 양식 앞에 두어 쓰기 전에 읽게 하고, 대표 전화는 양식 뒤로
   (.cgrid-info 는 display:contents 로 풀어 두 덩어리를 따로 배치 → 간격은 자식에 직접 줌) */
@media (max-width:959px){
  .cgrid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "tips" "form" "direct"}
  .cgrid-info{display:contents}
  .tips{grid-area:tips;margin-top:32px}
  .tips li{padding:12px 0}
  .cgrid > .form{margin-top:44px}
  .direct{grid-area:direct;margin-top:56px}
}
@media (max-width:640px){
  .ct-hero{object-position:72% 50%}
  .cgrid > .form{margin-top:48px;padding-top:22px}
  .direct{margin-top:52px}
  .tn-thin{font-size:min(44px,calc(13.6vw / var(--z)))}   /* 324px부터 44px 그대로. 그보다 좁으면(500% 확대 등) 화면 폭에 맞춰 줄여 마지막 숫자가 잘리지 않게 */
  .tips{margin-top:28px}
  .tips li{grid-template-columns:36px minmax(0,1fr)}
  .locs li{padding:18px 0}
  .abroad > div{padding:18px 12px 4px 0}
  .abroad > div + div{padding-left:16px}
  .abroad dt{flex-direction:column;gap:2px}
}

/* ===== 영문판(.lang-en) 조정 ===== */
/* 주소는 쉼표 덩어리(.nw)마다 묶어 하이픈(Gyeongsangbuk-do)에서 끊기지 않게 함 → 덩어리는 줄 나눔(block) 규칙에서 빼고,
   수원 둘째 줄(도로명 주소)은 영문 표기 순서상 본 주소라 첫 줄과 같은 크기로 */
.lang-en .loc-a > .nw{display:inline;font-size:inherit}
.lang-en .loc-a > span:not(.nw){font-size:inherit}
/* 큰 제목: 'Contact Products · Quotes · TDS'가 1440에서 화면 폭의 87%를 차지해 무거움 → 제품 페이지 영문과 같은 크기 단계 */
.lang-en .phero h1{font-size:clamp(40px,calc(5.5vw / var(--z)),82px)}
/* 문의 띠 제목: 메인 · 회사소개 영문과 같은 폭(15em) → 데스크톱에서 물음표 뒤에서 두 줄로 나뉨(br-d) */
.lang-en .cta h2{max-width:15em}
/* 해외 법인 도시: 'Hanoi ·'처럼 가운뎃점이 줄 끝에 매달리지 않게 한 줄에 하나씩 */
.lang-en .abroad dd .city{display:block}
/* 영문 대표 전화(+82 31 340 2801)는 한국어(031-340-2801)보다 세 글자 길어 320px 폭에서 칸을 넘음 → 좁은 화면에서는 화면 폭에 맞춰 줄임 */
@media (max-width:640px){
  .lang-en .tn-thin{font-size:min(44px,calc(12vw / var(--z)))}
  /* 큰 제목이 두 줄이 되는 폭: 'Products ·'처럼 가운뎃점이 줄 끝에 매달리지 않게 첫 점을 숨김 → Contact Products / Quotes · TDS */
  .lang-en .phero h1 .dot{display:none}
  /* 머리 단추: 'Go to the form'은 반 폭(390에서 글자 칸 약 110px)에 들어가지 않아 두 줄로 꺾이므로,
     기술자료 영문 머리 · 아래 문의 띠 단추처럼 전체 폭으로 쌓음 */
  .lang-en .phero-side{flex-wrap:wrap}
  .lang-en .phero-side .btn{flex:1 1 100%}
}

/* 10-23 대표 전화 숫자 크게 보이던 줄 뺌(사용자) → 팩스·이메일 표가 바로 이어지도록 위쪽 선·간격 */
.direct .kv{border-top:1px solid var(--line2);margin-top:0}