/* 문의하기(상담·문의 신청) 시안 — 10-02. 실제 페이지(contact-list) 구조 그대로: 히어로(제목 · 소개 · 성과 4) → 자문 문의(M&A 센터 카드) → 기타 문의.
   톤만 지금 시안에 맞춤 — 검정 · 흰색, Noto Serif 제목, 모서리 0, 칸 사이 1px 선 없음(간격만), 월계관은 고객 사례 'Deal Done'과 같은 실버 크롬 */

/* ① 히어로 */
.chero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hdr-h) + 56px) 0 56px;
  background: var(--ink);
  color: var(--white);
}
.chero .btn {
  --btn-ink: var(--white);
  --btn-paper: var(--ink);
}
.chero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chero__bg img {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: 78% 50%;
  opacity: 0.9;
}
.chero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 46%, rgba(10, 10, 10, 0.15) 100%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 40%);
} /* 글 자리(왼쪽)를 눌러 둔다 — 실제 페이지 사진도 왼쪽이 검정으로 흐려짐 */
.chero__inner {
  position: relative;
}
.chero .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.chero__title {
  font: 400 38px/1.2 var(--serif);
  letter-spacing: -0.015em;
}
.chero__sub {
  margin-top: 16px;
  max-width: 34em;
  font: 400 16px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.78);
}
.chero__awards {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
} /* 실제 페이지 에셋 그대로(975×236, 흰 월계관 · 숫자 · 설명이 한 장) — 폭도 실제 페이지와 같게: 휴대폰 100% · 태블릿 min(820px, 92%) · 데스크톱 min(900px, 78%) */
/* (보관) 실버 크롬 월계관 HTML판 */
.awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 150px));
  gap: 24px 20px;
  margin-top: 36px;
}
.award {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
}
.award__ring {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: url('/assets/v3/images/deal-done-wreath-chrome.png?v=2') center / 100% no-repeat;
} /* 월계관 안에는 숫자만 — 설명은 아래(긴 숫자 · 두 줄 설명이 잎과 겹치지 않게) */
.award__v {
  font: 600 30px/1 var(--serif);
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #eef0f2 34%, #a3a9b0 50%, #dfe2e6 58%, #ffffff 82%, #c9ced3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
} /* 'Deal Done' 글자와 같은 크롬 */
.award__v small {
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
}
.award__k {
  font: 500 12px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.78);
  word-break: keep-all;
}
.chero__asof {
  margin-top: 20px;
  font: 400 12px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.5);
}

/* ② · ③ 공통 머리 */
.chead {
  margin-bottom: 28px;
}

/* ② 자문 문의 — 회색 바탕 위 흰 카드(실제 페이지와 같은 짜임) */
.cadv {
  background: #f4f4f4;
}
.ccard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--white);
}
.ccard__cat {
  display: flex;
  gap: 6px;
  padding: 20px 20px 0;
  font: 500 14px/1.4 var(--sans);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.ccard__body {
  padding: 12px 20px 28px;
}
.ccard__head {
  display: grid;
  gap: 20px;
}
.ccard__title {
  font: 400 26px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.ccard__desc {
  margin-top: 8px;
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
}
.ccard__btn {
  justify-self: start;
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  --btn-ink: #2f2f2f;
  --btn-paper: var(--white);
} /* 10-02 사용자: 강조 — 검정 채움. 호버는 흰 판 대신 검정 톤만 살짝 밝게(#2f2f2f가 왼쪽부터 채워짐, 글자는 흰색 그대로). '기타 문의'는 보조라 테두리 버튼 그대로 */
.ccard__btn:hover {
  background: var(--ink);
  border-color: #2f2f2f;
} /* 공통 .btn:hover는 바탕을 비우는데, 채움 버튼은 검정을 유지해야 채워지는 동안 흰 바탕이 비치지 않는다 */
.ccard__btn span {
  margin-left: 6px;
}
.ccard__lists {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  position: relative;
}
.ccard__lists::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 1px;
  background: var(--ink);
} /* 실제 페이지의 짧은 구분 선 */
.ccard__lists ul {
  display: grid;
  align-content: start;
  gap: 10px;
}
.ccard__lists li {
  position: relative;
  padding-left: 18px;
  font: 400 15px/1.5 var(--sans);
}
.ccard__lists li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: currentColor;
} /* 점 대신 짧은 선(시안 톤) */

/* ③ 기타 문의 — 흰 바탕 위 회색 판 한 줄 */
.cother__row {
  display: grid;
  gap: 20px;
  padding: 24px 20px;
  background: #f4f4f4;
}
.cother__row p {
  font: 400 15px/1.6 var(--sans);
}
.cother__tag {
  display: block;
  margin-bottom: 6px;
  font: 600 14px/1.4 var(--sans);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.cother__row .btn {
  justify-self: start;
}

@media (min-width: 768px) {
  .chero {
    padding: calc(var(--hdr-h) + 80px) 0 72px;
  }
  .chero__title {
    font-size: 48px;
  }
  .chero__sub {
    font-size: 16px;
  } /* 10-02 짝수 규칙 — 회사 소개 히어로 문단(768↑ 16px)과 같은 위계 */
  .chero__awards {
    width: min(820px, 92%);
    margin-top: 38px;
  }
  .ccard__cat,
  .cother__tag {
    font-size: 16px;
  } /* 10-02 사용자: 분류 · 태그 글자 키우고 짝수로(13 → 14 · 16px) */
  .awards {
    grid-template-columns: repeat(4, 150px);
    gap: 28px;
    margin-top: 44px;
  }
  .award__v {
    font-size: 32px;
  }
  .chead {
    margin-bottom: 40px;
  }
  .ccard {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .ccard__cat {
    flex-direction: column;
    gap: 0;
    padding: 28px 0 0 28px;
  }
  .ccard__body {
    padding: 28px 32px 36px 0;
  }
  .ccard__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;
  }
  .ccard__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .cother__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 28px 32px 28px 28px;
  }
}
@media (min-width: 1280px) {
  .chero {
    padding: calc(var(--hdr-h) + 104px) 0 88px;
  }
  .chero__title {
    font-size: 56px;
  }
  .chero__sub {
    font-size: 18px;
  }
  .chero__awards {
    width: min(900px, 78%);
  }
  .awards {
    grid-template-columns: repeat(4, 160px);
    gap: 36px;
  }
  .award__v {
    font-size: 34px;
  }
  .award__k {
    font-size: 13px;
  }
  .cadv,
  .cother {
    padding-block: 112px;
  }
  .ccard {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .ccard__cat {
    padding: 36px 0 0 36px;
  }
  .ccard__body {
    padding: 36px 40px 44px 0;
  }
  .ccard__title {
    font-size: 30px;
  }
  .ccard__desc,
  .ccard__lists li,
  .cother__row p {
    font-size: 16px;
  }
  .cother__row {
    padding: 32px 40px 32px 36px;
  }
}

/* ── 기타 문의(contact-form.html, 10-02) — 실제 페이지(contact-form.njk · contact-original)와 같은 구성, 톤은 문의 목록 시안과 같게 ── */
.cfhero .chero__title {
  max-width: 18em;
}
.cform {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.cform .btn {
  --btn-ink: var(--white);
  --btn-paper: var(--ink);
}
.cform__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cform__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.5;
}
.cform__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, 0.72) 45%, rgba(10, 10, 10, 0.55) 100%);
} /* 실제 페이지처럼 위는 검정(히어로와 이어짐), 아래로 갈수록 사진이 비친다 */
.cform__inner {
  position: relative;
  display: grid;
  gap: 40px;
}
.cform .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.cform__desc {
  margin-top: 14px;
  font: 400 15px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.72);
}
.advs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 28px;
} /* 휴대폰은 한 줄에 한 명(두 명이면 경력 '(전)'만 따로 줄바꿈됨) */
@media (min-width: 480px) and (max-width: 767px) {
  .advs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.adv {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.adv img {
  width: 52px;
  height: 66px;
  object-fit: cover;
  object-position: 50% 15%;
  background: #1a1a1a;
}
.adv__name {
  font: 600 15px/1.3 var(--sans);
}
.adv__name span {
  margin-left: 4px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.adv__career {
  display: grid;
  margin-top: 4px;
  font: 400 12px/1.5 var(--sans);
  color: rgba(255, 255, 255, 0.55);
}
html[lang='en'] .adv__name span {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
} /* 영문 직함(Executive Director 등)은 길어 이름 아래 줄로 */
.cform__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 28px;
  align-content: start;
}
.cfield {
  position: relative;
}
.cfield__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
} /* 실제 페이지처럼 안내 문구(placeholder)만 보이고, 이름표는 화면 낭독용 */
.cfield input,
.cfield select {
  width: 100%;
  padding: 16px 2px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 400 16px/1.4 var(--sans);
  outline: none;
  transition: border-color 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.cfield input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.cfield input:focus,
.cfield select:focus {
  border-bottom-color: var(--white);
}
.cfield select {
  padding-right: 28px;
  color: var(--white);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8l4-3.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E")
    right 4px center / 12px no-repeat;
}
.cfield select:invalid {
  color: rgba(255, 255, 255, 0.5);
}
.cfield select option {
  color: var(--ink);
}
.cfield.is-err input,
.cfield.is-err select {
  border-bottom-color: #ff9b8f;
}
.cfield__error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  font: 500 12px/1.4 var(--sans);
  color: #ff9b8f;
} /* 10-02 실제 접수 연결 — 칸별 오류(서버 422 fieldErrors와 같은 칸 이름) */
.cfield__error:empty {
  display: none;
}
.cform__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
} /* 봇 차단용 빈 칸(name=website) — 운영 .contact-honeypot과 같은 숨김. 값이 들어가면 서버가 버린다 */
.cform__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.cform__consent {
  margin-top: 20px;
  font: 400 13px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.6);
}
.cform__consent a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cform__status {
  min-height: 1.4em;
  margin-top: 8px;
  font: 500 13px/1.4 var(--sans);
  color: var(--white);
}
.cform__submit {
  justify-self: start;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .cform__inner {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .cform__intro {
    grid-column: 1 / 4;
  }
  .cform__form {
    grid-column: 4 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cfield--wide,
  .cform__consent,
  .cform__status,
  .cform__submit {
    grid-column: 1 / -1;
  }
  .advs {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .cform__intro {
    grid-column: 1 / 5;
  }
  .cform__form {
    grid-column: 5 / -1;
  }
  .advs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .cform {
    padding-block: 112px 128px;
  }
  .cform__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .cform__intro {
    grid-column: 1 / 6;
  }
  .cform__form {
    grid-column: 7 / -1;
  }
  .cform__desc {
    font-size: 16px;
  }
  .adv__name {
    font-size: 16px;
  }
  .adv__career {
    font-size: 13px;
  }
}

/* ── 문의 완료(10-02) — 운영 /contact-success 문구 그대로. 문의하기 첫 화면 배경 · 톤, 화면 높이를 채워 가운데에 ── */
.csuccess {
  display: flex;
  align-items: center;
  min-height: min(88vh, 820px);
}
.csuccess__inner {
  width: 100%;
}
.csuccess__actions {
  margin-top: 40px;
}
.csuccess__btn {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  --btn-ink: #d9d9d9;
  --btn-paper: var(--ink);
} /* 채움 버튼(문의 목록 .ccard__btn과 같은 규칙, 어두운 바탕이라 흰 채움). 호버는 톤만 바뀜 */
.csuccess__btn:hover {
  background: var(--white);
  border-color: #d9d9d9;
}