/* 050103.css — 약도/담당자
   수치는 design/050103_약도-담당자.svg(1920×2443) 를 브라우저 렌더한 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* ── 섹션 머리(eyebrow + 제목) : 050301/050302/050303 과 동일 리듬 ── */
.section-head__eyebrow {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-muted);
}

.section-head__title {
  margin-top: 17px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

/* ── 히어로 일러스트 ──
   배경 격자(x970~1588 / y156~452)가 아트웍과 한 덩어리라 기본 520×296 보다 크다.
   콘텐츠 우측선(1536) 밖으로 52 흘리고 4 끌어올려야 아트웍이 시안 자리에 앉는다.
   음수 마진 아래쪽은 0 이므로 히어로 높이(=다음 섹션 시작 503)는 그대로다. */
.hero__image--map {
  margin: -4px -52px 0 0;
}

/* 위 블리드가 1024~1335 구간에서 가로 스크롤을 만들지 않게 잘라낸다.
   1336 이상에서는 여백 안에 들어가므로 잘리는 부분이 없다. */
.hero {
  overflow: hidden;
}

/* ══ 오시는 길 ══ 히어로 끝 503 → eyebrow 603, 섹션 끝 1437 ══ */
.map-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 99px var(--gutter-pc) 80px;
  text-align: center;
}

/* 지도 : 시안 rect 384,724 1152×357.
   구글 지도 iframe 이 뒤늦게 붙어도 자리와 높이가 흔들리지 않도록 박스를 먼저 잡는다 */
.map-section__map {
  height: 357px;
  margin-top: 55px;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.map-section__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.office-info {
  margin-top: 48px;
  text-align: left;
}

/* 구분선 1129 / 1258 / 1356 */
.office-info__row {
  padding: 27px 0 23px;
  border-top: 1px solid var(--color-card-line);
}

/* 전화번호·팩스는 2열. 열 폭 544 + 간격 64 = 1152 (팩스 열 시작 992) */
.office-info__row--two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: 64px;
  row-gap: 10px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-card-line);
}

.office-info__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-text-sub);
}

.office-info__value {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

/* 2열 행은 row-gap 으로 간격을 주므로 margin 을 쓰지 않는다 */
.office-info__value--tel {
  margin-top: 0;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.25px;
}

/* ══ 사업 분류별 연락처 ══ 섹션 1437~2243 ══ */
.contact-section {
  background: var(--color-bg-alt);
}

.contact-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 82px var(--gutter-pc) 160px;
  text-align: center;
}

/* 카드 564 + 간격 24 = 1152 */
.contact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 53px;
  text-align: left;
}

/* 높이 132 = 테두리 2 + 패딩 64 + 제목행 30 + 8 + 연락처행 28 */
.contact-card {
  height: 132px;
  padding: 32px;
  border: 1px solid var(--color-card-line);
  border-radius: 12px;
  background: var(--color-bg);
}

.contact-card__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

.contact-card__num {
  margin-right: 9px;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.contact-card__tel {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.25px;
  color: var(--color-text-sub);
}

/* ── 태블릿 ── */
@media (max-width: 1023px) {
  /* 히어로가 세로로 쌓이므로 블리드를 되돌린다 */
  .hero__image--map {
    margin: 0;
  }

  .map-section__inner {
    padding: 64px var(--gutter-pc);
  }

  .map-section__map {
    height: 320px;
  }

  .contact-section__inner {
    padding: 64px var(--gutter-pc) 72px;
  }

  /* 2열을 유지하되 제목이 접히면 카드가 늘어나도록 높이를 풀어준다 */
  .contact-card {
    height: auto;
    min-height: 132px;
  }
}

/* ── 모바일 ── */
@media (max-width: 767px) {
  .section-head__title {
    margin-top: 14px;
    font-size: 26px;
  }

  .map-section__inner {
    padding: 48px var(--gutter-mo);
  }

  .map-section__map {
    height: 240px;
    margin-top: 32px;
  }

  .office-info {
    margin-top: 32px;
  }

  .office-info__row {
    padding: 20px 0;
  }

  .office-info__row--two {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    row-gap: 6px;
    padding: 20px 0;
  }

  /* 1열로 접히면 팩스 묶음 위에 간격이 필요하다 */
  .office-info__row--two .office-info__label:nth-of-type(2) {
    margin-top: 18px;
  }

  .office-info__value {
    margin-top: 6px;
    font-size: 15px;
    line-height: 24px;
  }

  .office-info__value--tel {
    font-size: 15px;
  }

  .contact-section__inner {
    padding: 48px var(--gutter-mo);
  }

  .contact-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }

  .contact-card {
    min-height: 0;
    padding: 20px;
  }

  .contact-card__head {
    font-size: 16px;
    line-height: 24px;
  }

  .contact-card__tel {
    margin-top: 6px;
    font-size: 15px;
    line-height: 22px;
  }
}