/* ==========================================================================
   pages-service-contact.css — 온라인문의 페이지
   ========================================================================== */

/* ---------- 페이지 히어로 (배너 + 탭바) ---------- */
.page-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #141e30 0%, #243b55 100%);
  opacity: 0.8;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__titles {
  min-height: 430px;
  padding-top: var(--space-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.page-hero__kicker {
  font-size: clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.561), 1.6rem);
  font-weight: 700;
  letter-spacing: 7px;
  line-height: 1.2;
}
.page-hero__sub {
  font-size: var(--fs-medium);
  line-height: 1.6;
  opacity: 0.5;
}
.page-hero__line { width: 48px; padding-block: var(--space-20); color: #fff; }
.page-hero__line svg { display: block; width: 100%; height: auto; }

.page-hero__tabs {
  background-color: #0000004f;
  display: flex;
  align-items: flex-end;
}
.page-hero__tab {
  display: block;
  padding: calc(var(--space-20) + 3px) var(--space-10);
  color: #fffffc;
  font-size: var(--fs-medium);
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease;
}
.page-hero__tab:hover { color: var(--color-primary); background-color: #0000004f; }
.page-hero__tab.is-active {
  background-color: var(--color-base);
  color: var(--color-contrast);
  border-top: 6px solid var(--color-primary);
  padding-block: var(--space-20);
}
.page-hero__tab.is-active:hover { color: var(--color-contrast); }

/* ---------- 헤드라인(인트로) ---------- */
.sc-intro { padding-block: var(--space-70); }
.sc-intro--form { padding-top: var(--space-60); padding-bottom: 0; }
.sc-quote {
  color: var(--color-primary);
  font-size: var(--fs-xxx-huge);
  line-height: 1;
}
.sc-quote svg {
  display: block;
  width: 0.5em;
  height: auto;
  transform: rotate(180deg);
}
.sc-intro__title {
  margin-top: var(--space-30);
  font-size: var(--fs-xxx-large);
  font-weight: 700;
  line-height: 1.2;
}

.full-rule {
  border: none;
  border-top: 1px solid var(--color-step-3);
  margin: 0;
}

/* ---------- 제품취급 문의 배너 ---------- */
.sc-banner {
  position: relative;
  padding-block: var(--space-50);
  color: #fff;
  overflow: hidden;
}
.sc-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.sc-banner__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #333333 0%, #222222 100%);
  opacity: 0.6;
}
.sc-banner__content { position: relative; z-index: 1; }
.sc-banner__line {
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.2;
}
.sc-banner__line--sub { margin-top: 3px; }
.sc-banner__brand {
  margin-top: var(--space-70);
  font-size: var(--fs-xxx-large);
  font-weight: 700;
  line-height: 1.2;
}
.sc-banner__row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-20);
}
.sc-banner__big {
  font-size: var(--fs-xxx-large);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.sc-banner__bar {
  font-size: var(--fs-xxx-large);
  opacity: 0.3;
}
.sc-banner__rule {
  flex: 1;
  height: 1px;
  background-color: #ffffff14;
}
.sc-banner__call { font-size: var(--fs-xx-large); }

/* ---------- 문의 카드 ---------- */
.sc-cards { padding-top: 100px; }
.sc-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
}
.sc-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 0);
}
.sc-card__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #333333 0%, #222222 100%);
  opacity: 0.7;
}
.sc-card__body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-40);
}
.sc-card__body > * { flex-shrink: 0; }
.sc-card__spacer { height: 200px; }
.sc-card__label {
  margin-bottom: var(--space-20);
  margin-left: 3px;
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.2;
}
.sc-card__title {
  font-size: var(--fs-xxx-large);
  font-weight: 700;
  line-height: 1.2;
}
.sc-card__gap { height: 18px; }
.sc-card__desc { line-height: 1.6; }
.sc-card__btn-row { display: flex; flex-wrap: nowrap; padding-top: var(--space-40); }
.sc-card__contact {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-10);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: var(--fs-medium);
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease;
}
.sc-card__contact:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ---------- 문의 폼 ---------- */
.sc-form-section { padding-top: var(--space-10); padding-bottom: var(--space-70); }
.sc-form { width: 100%; }
.sc-form .form-field label { font-weight: 400; }
.sc-form .form-field input,
.sc-form .form-field textarea {
  padding: 1.4em 1.7em;
  color: var(--color-contrast);
  background-color: var(--color-base);
  border: 1px solid var(--color-step-6);
  border-radius: 0;
}
.sc-form .form-field textarea { resize: vertical; }
.sc-form__actions { margin-top: var(--space-20); }
.sc-form__submit {
  padding: 1.3em 2.5em;
  color: var(--color-base);
  background-color: var(--color-contrast);
  border: 1px solid var(--color-contrast);
  border-radius: 10em;
  font-weight: 700;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease;
}
.sc-form__submit:hover { color: var(--color-primary); }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .sc-cards__grid { grid-template-columns: 1fr; }
  .sc-card__spacer { display: none; }
}
@media (max-width: 780px) {
  .page-hero__kicker { letter-spacing: 4px; }
  .sc-banner__row { flex-wrap: wrap; gap: var(--space-10); }
  .sc-banner__rule { flex-basis: 100%; }
}

/* 서브내비 탭: 전체 폭 균등 분할 (원본 정렬) */
.page-hero__tab { flex: 1 1 0; }

/* 카드 내 담당자 안내 (원본: 이미지 위 일반 텍스트) */
.sc-card__manager {
  margin-top: var(--space-30);
  font-size: var(--fs-medium);
}

/* 배너: 새 사진 4장 나란히 배치 */
.sc-banner__bg--grid { display: flex; }
.sc-banner__bg--grid img { flex: 1 1 25%; width: 25%; height: 100%; object-fit: cover; }