@charset "utf-8";

/* ============================================================
   정보센터 › 온라인 문의
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:958

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css, 히어로는 /css/page-hero.css,
   하위 메뉴 탭은 /css/page-tabs.css 가 맡는다.

   구성
     제목 + 안내      왼쪽에 제목·리드, 오른쪽에 '* 표시는 필수 입력입니다.'
     입력 줄 네 개    문의유형(라디오) / 회사명 / 담당자 / 연락처 · 이메일
     문의내용         1400 × 300 라운드 20 상자
     동의 띠          1400 × 95 라운드 20 (#f8f8f8) + 전문 보기
     문의 하기        440 × 115 라운드 20 코발트

   색은 시안 토큰 그대로다.
     --color #135a9c / --black #222 / --gray #9f9f9f
     구분선 #e0e0e0 (Line 45·46), 문의유형 위아래 #9f9f9f (Line 43)
   ※ style.css 의 --color-cobalt 는 메인 페이지용 #2e5ad6 로 색이 다르다.
      서브 페이지는 시안대로 #135a9c 를 쓴다 (다른 서브 페이지와 같은 방식).
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.inq-page {
  --inq-point:  #135a9c;      /* 시안 --color */
  --inq-deep:   #115390;      /* 버튼을 눌렀을 때 한 단 진하게 */
  --inq-ink:    #222;         /* 시안 --black */
  --inq-gray:   #9f9f9f;      /* 시안 --gray */
  --inq-rule:   #e0e0e0;      /* 입력 줄 구분선 · 문의내용 테두리 */
  --inq-rule-2: #9f9f9f;      /* 문의유형 줄 위아래 (시안 Line 43) */
  --inq-soft:   #f8f8f8;      /* 동의 띠 */
  --inq-err:    #d64545;

  --grid-w: 1400;             /* 시안 260~1660 */
  --gutter: 40;
  --label-w: 138;             /* 시안 라벨 +40, 입력 +178 */
  --row-h: 119;               /* 시안 구분선 사이 간격 */
}

.inq-wrap {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}

main { padding-bottom: calc(180 * var(--u)); }

/* ==================== 제목 ==================== */
.inq-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  margin-top: calc(90 * var(--u));   /* 시안 탭(1026) → 제목(1218) 은 192 */
}

.inq-head__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(46 * var(--u));    /* 시안 55 */
  line-height: 1.2;
  letter-spacing: -.05em;            /* -2.75 / 55 */
  color: #000;
}
.inq-head__lead {
  margin: calc(18 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 15px);   /* 시안 25 */
  line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--inq-gray);
  word-break: keep-all;
}
/* 시안 2048:1031 — 오른쪽 끝에 붙는 한 줄 */
.inq-head__note {
  flex: none;
  margin: 0;
  font-size: max(calc(15 * var(--u)), 12px);
  letter-spacing: -.03em;
  color: var(--inq-gray);
  white-space: nowrap;
}

/* 필수 표시 — 시안은 라벨 20 옆에 17 짜리 코발트 별표를 둔다 */
.inq-req {
  color: var(--inq-point);
  font-size: .85em;
}

/* ==================== 입력 줄 ==================== */
.inq-form { transition: opacity .35s ease; }
.inq-form.is-gone { opacity: 0; }

.inq-rows {
  margin-top: calc(56 * var(--u));   /* 시안 리드(1345) → 첫 선(1399) */
  border-top: 1px solid var(--inq-rule-2);
}

/* 한 줄에 칸 하나(회사명·담당자) 또는 둘(연락처·이메일).
   둘일 때는 시안처럼 구분선도 칸마다 따로 그어진다 */
.inq-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: calc(40 * var(--u));   /* 시안 940 → 980 */
}
.inq-row--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.inq-field {
  display: grid;
  grid-template-columns: calc(var(--label-w) * var(--u)) minmax(0, 1fr);
  align-items: center;
  min-height: calc(var(--row-h) * var(--u));
  padding: calc(20 * var(--u)) 0 calc(20 * var(--u)) calc(var(--gutter) * var(--u));
  border-bottom: 1px solid var(--inq-rule);
  transition: border-color .2s ease;
}
/* 시안 Line 43 — 문의유형 줄만 아래도 진한 선이다 */
.inq-field--type { border-bottom-color: var(--inq-rule-2); }

.inq-field__label {
  font-weight: 500;
  font-size: max(calc(20 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
  transition: color .2s ease;
}
.inq-field--type .inq-field__label { font-weight: 700; }

.inq-field__body { min-width: 0; }

.inq-field__input {
  display: block;
  width: 100%;
  min-height: calc(48 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 400;
  /* 16 아래로 내려가면 iOS 가 입력할 때 화면을 확대한다 */
  font-size: max(calc(20 * var(--u)), 16px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
  appearance: none;
}
.inq-field__input:focus { outline: none; }
.inq-field__input::placeholder {
  font-weight: 300;
  color: var(--inq-gray);
}

/* ---------- 초점 ----------
   시안에는 입력칸 테두리가 따로 없다. 줄 밑선과 라벨 색으로 알린다 */
.inq-field:focus-within { border-bottom-color: var(--inq-point); }
.inq-field:focus-within > .inq-field__label { color: var(--inq-point); }

/* ---------- 잘못 채운 칸 ---------- */
.inq-field.is-err { border-bottom-color: var(--inq-err); }
.inq-field.is-err > .inq-field__label { color: var(--inq-err); }

.inq-err {
  margin: calc(6 * var(--u)) 0 0;
  font-size: max(calc(16 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: var(--inq-err);
}
.inq-err[hidden] { display: none; }

/* ==================== 문의유형 ====================
   시안 2048:1017~1028 — 20 짜리 동그라미 뒤 19 띄우고 굵은 글자 */
.inq-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(14 * var(--u)) calc(95 * var(--u));
  /* 시안은 라디오가 입력칸(178)보다 더 들어와 320 에서 시작한다 */
  padding-left: calc(142 * var(--u));
}
.inq-type {
  display: inline-flex;
  align-items: center;
  gap: calc(19 * var(--u));
  cursor: pointer;
}
.inq-type__radio {
  flex: none;
  /* 비율대로만 두면 1440 에서 15 까지 줄어 눌러야 할 것으로 안 보인다 */
  width: max(calc(20 * var(--u)), 16px);
  height: max(calc(20 * var(--u)), 16px);
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--inq-gray);       /* 시안 Ellipse 61 */
  border-radius: 50%;
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, border-width .2s ease;
}
/* 시안 Ellipse 60 — r7.25 에 두께 5.5 인 코발트 링. 안쪽 흰 원이 지름 9 다 */
.inq-type__radio:checked {
  border: max(calc(5.5 * var(--u)), 4px) solid var(--inq-point);
}
.inq-type__radio:focus-visible {
  outline: 2px solid var(--inq-point);
  outline-offset: 2px;
}
.inq-type__text {
  font-weight: 700;
  font-size: max(calc(20 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
}

/* ==================== 문의내용 ====================
   시안 2048:988 — 라벨 아래 1400 × 300 라운드 20 상자 */
.inq-area { margin-top: calc(40 * var(--u)); }   /* 시안 1875 → 1941 */

.inq-area__label {
  display: block;
  font-weight: 500;
  font-size: max(calc(20 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
  transition: color .2s ease;
}

.inq-area__box {
  margin-top: calc(23 * var(--u));   /* 시안 라벨(1941) → 상자(1994) */
  padding: calc(30 * var(--u)) calc(40 * var(--u));
  border: 1px solid var(--inq-rule);
  border-radius: calc(20 * var(--u));
  transition: border-color .2s ease;
}
.inq-area__box:focus-within { border-color: var(--inq-point); }
.inq-area:focus-within .inq-area__label { color: var(--inq-point); }

.inq-area__input {
  display: block;
  width: 100%;
  height: calc(238 * var(--u));      /* 시안 상자 300 - 위아래 여백 60 - 테두리 2 */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  resize: vertical;
  font-family: inherit;
  font-weight: 400;
  font-size: max(calc(20 * var(--u)), 16px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--inq-ink);
}
.inq-area__input:focus { outline: none; }
.inq-area__input::placeholder {
  font-weight: 300;
  color: var(--inq-gray);
}

.inq-area__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  margin-top: calc(8 * var(--u));
}
.inq-area__foot .inq-err { margin: 0; }
.inq-area__count {
  flex: none;
  /* 왼쪽 에러 문구가 숨어 있어도 카운터는 오른쪽 끝에 붙어 있어야 한다 */
  margin: 0 0 0 auto;
  font-size: max(calc(16 * var(--u)), 12px);
  color: var(--inq-gray);
  font-variant-numeric: tabular-nums;
}
.inq-area__count.is-full { color: var(--inq-err); }

.inq-area.is-err .inq-area__box { border-color: var(--inq-err); }
.inq-area.is-err .inq-area__label { color: var(--inq-err); }

/* ==================== 동의 ====================
   시안 2048:983 — 회색 띠에 네모 체크박스, 오른쪽 끝에 '전문 보기' */
.inq-agree {
  display: flex;
  align-items: center;
  gap: calc(29 * var(--u));          /* 시안 체크박스 끝(342) → 글자(371) */
  min-height: calc(95 * var(--u));
  margin-top: calc(50 * var(--u));   /* 시안 상자(2294) → 띠(2344) */
  padding: calc(16 * var(--u)) calc(50 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--inq-soft);
  transition: box-shadow .2s ease;
}
.inq-agree.is-err { box-shadow: inset 0 0 0 1px var(--inq-err); }

.inq-agree__box {
  flex: none;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--inq-gray);
  border-radius: 0;                  /* 시안은 각진 네모다 */
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.inq-agree__box:checked {
  border-color: var(--inq-point);
  background: var(--inq-point);
  /* 흰 체크 표시. 배경 이미지라 색을 바꿀 일이 없어 그대로 넣는다 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
}
.inq-agree__box:focus-visible {
  outline: 2px solid var(--inq-point);
  outline-offset: 2px;
}

.inq-agree__text {
  font-size: max(calc(23 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
  cursor: pointer;
  word-break: keep-all;
}

/* 시안 2048:987 — 오른쪽 끝 '전문 보기' */
.inq-agree__more {
  flex: none;
  margin-left: auto;
  padding: calc(6 * var(--u)) 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: max(calc(23 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--inq-gray);
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
  transition: color .2s ease;
}
.inq-agree__more:hover { color: var(--inq-point); }

/* 펼쳐지는 전문. 높이를 모르니 grid 로 접는다 */
.inq-agree__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.inq-agree__panel.is-open { grid-template-rows: 1fr; }
.inq-agree__panel > div { overflow: hidden; }

.inq-agree__doc {
  margin: calc(14 * var(--u)) 0 0;
  padding: calc(24 * var(--u)) calc(50 * var(--u));
  border: 1px solid var(--inq-rule);
  border-radius: calc(20 * var(--u));
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.8;
  letter-spacing: -.02em;
  color: var(--ink-mid);
  word-break: keep-all;
}
.inq-agree__doc dt { font-weight: 700; color: var(--inq-ink); }
.inq-agree__doc dd { margin: 0 0 calc(10 * var(--u)); }
.inq-agree__doc dd:last-child { margin-bottom: 0; }

/* ==================== 알림 배너 ==================== */
.inq-banner {
  margin-top: calc(30 * var(--u));
  padding: calc(20 * var(--u)) calc(30 * var(--u));
  border: 1px solid #f2c2c2;
  border-radius: calc(12 * var(--u));
  background: #fdecec;
  font-size: max(calc(18 * var(--u)), 14px);
  color: #b03636;
}
.inq-banner[hidden] { display: none; }

/* ==================== 문의 하기 ====================
   시안 2048:981 — 440 × 115 라운드 20 */
.inq-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  width: calc(440 * var(--u));
  min-height: calc(115 * var(--u));
  margin: calc(130 * var(--u)) auto 0;   /* 시안 띠(2439) → 버튼(2569) */
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border: 0;
  border-radius: calc(20 * var(--u));
  background: var(--inq-point);
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: max(calc(32 * var(--u)), 16px);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.inq-submit:hover {
  background: var(--inq-deep);
  transform: translateY(calc(-3 * var(--u)));
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(19, 90, 156, .32);
}
.inq-submit:focus-visible {
  outline: 2px solid var(--inq-point);
  outline-offset: 3px;
}
.inq-submit[disabled] {
  cursor: default;
  opacity: .8;
  transform: none;
  box-shadow: none;
}

@keyframes inqSpin { to { transform: rotate(360deg); } }
.inq-submit__spin {
  display: none;
  flex: none;
  width: .8em;
  height: .8em;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: inqSpin .8s linear infinite;
}
.inq-submit.is-busy .inq-submit__spin { display: block; }

/* ==================== 접수 완료 ====================
   시안에 완료 화면이 없어 새로 만든다 */
.inq-done {
  padding: calc(120 * var(--u)) 0;
  text-align: center;
}
.inq-done[hidden] { display: none; }

.inq-done__mark {
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  background: var(--inq-point);
  color: var(--color-white);
}
.inq-done__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(28 * var(--u));
  box-sizing: border-box;
}
.inq-done__title {
  margin: calc(34 * var(--u)) 0 0;
  font-weight: 700;
  font-size: max(calc(38 * var(--u)), 20px);
  letter-spacing: -.03em;
  color: var(--inq-ink);
}
.inq-done__desc {
  margin: calc(16 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(22 * var(--u)), 14px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--inq-gray);
  word-break: keep-all;
}
.inq-done__desc a {
  color: var(--inq-point);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.inq-done__again {
  margin-top: calc(44 * var(--u));
  padding: calc(18 * var(--u)) calc(46 * var(--u));
  border: 1px solid var(--inq-point);
  border-radius: calc(14 * var(--u));
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: max(calc(20 * var(--u)), 14px);
  color: var(--inq-point);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.inq-done__again:hover {
  background: var(--inq-point);
  color: var(--color-white);
}

/* 봇 방지용 빈 칸. 사람 눈과 스크린리더 모두에서 빠진다 */
.inq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================== 등장 ==================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay] { transition-delay: .15s; }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .inq-page {
    --gutter: 16;
    --row-h: 0;
  }

  /* 히어로→본문. 히어로 아래 여백·탭 위 여백과 겹쳐 가장 큰 값이 남는다 */
  .inq-wrap { margin-top: var(--sp-block); }
  .inq-head {
    display: block;
    margin-top: var(--sp-block);       /* 탭→제목 */
  }
  .inq-head__title { font-size: calc(28 * var(--u)); }
  .inq-head__lead {
    margin-top: calc(10 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.6;
  }
  .inq-head__note {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(13 * var(--u)), 12px);
    white-space: normal;
  }

  .inq-rows { margin-top: var(--sp-head); }      /* 제목→폼 */

  /* 라벨을 입력칸 위로 올린다. 옆에 두면 입력칸이 절반도 안 남는다 */
  .inq-row,
  .inq-row--half { grid-template-columns: 1fr; }
  .inq-field {
    display: block;
    padding: calc(16 * var(--u)) 0;
  }
  .inq-field__label {
    display: block;
    margin-bottom: calc(6 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
  }
  .inq-field__input { min-height: 48px; font-size: 16px; }

  .inq-types {
    gap: calc(12 * var(--u)) calc(20 * var(--u));
    padding-left: 0;
  }
  /* 두 개씩 놓이도록 폭을 반으로 잡는다 */
  .inq-type {
    width: calc(50% - calc(10 * var(--u)));
    min-height: 44px;
    gap: calc(10 * var(--u));
  }
  .inq-type__radio { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .inq-type__text { font-size: max(calc(15 * var(--u)), 14px); }

  .inq-area { margin-top: calc(20 * var(--u)); }
  .inq-area__label { font-size: max(calc(15 * var(--u)), 14px); }
  .inq-area__box {
    margin-top: calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .inq-area__input { height: calc(150 * var(--u)); font-size: 16px; }

  .inq-agree {
    flex-wrap: wrap;
    gap: calc(12 * var(--u));
    min-height: 0;
    margin-top: calc(24 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .inq-agree__box {
    width: max(calc(24 * var(--u)), 22px);
    height: max(calc(24 * var(--u)), 22px);
  }
  .inq-agree__text { font-size: max(calc(14 * var(--u)), 13px); }
  .inq-agree__more { font-size: max(calc(14 * var(--u)), 13px); }
  .inq-agree__doc {
    padding: calc(16 * var(--u));
    border-radius: calc(14 * var(--u));
    font-size: max(calc(13 * var(--u)), 12px);
    line-height: 1.7;
  }

  .inq-banner { margin-top: calc(16 * var(--u)); padding: calc(14 * var(--u)); }

  /* 엄지로 누르기 쉽도록 아래를 꽉 채운다 */
  .inq-submit {
    width: 100%;
    min-height: 56px;
    margin-top: calc(30 * var(--u));
    border-radius: calc(14 * var(--u));
    font-size: max(calc(18 * var(--u)), 16px);
  }

  .inq-done { padding: calc(50 * var(--u)) 0; }
  .inq-done__mark { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
  .inq-done__mark svg { padding: calc(18 * var(--u)); }
  .inq-done__title { margin-top: calc(20 * var(--u)); font-size: calc(22 * var(--u)); }
  .inq-done__desc { margin-top: calc(10 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  .inq-done__again { margin-top: calc(26 * var(--u)); min-height: 48px; }

  main { padding-bottom: var(--sp-section); }   /* 버튼→푸터 */
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .inq-form,
  .inq-field,
  .inq-area__box,
  .inq-submit,
  .inq-agree__panel { transition: none; }
  .inq-submit:hover { transform: none; }
  .inq-submit__spin { animation-duration: 1.6s; }
}