/* ─────────────────────────────
   CONTACT 레이아웃 전체
   ───────────────────────────── */

.contact-section {
  width: 100%;
  display: flex;
  justify-content: center;   /* 정렬 */
  padding: 180px 16px 0px;          /* 상단 여백만, 좌우는 0 */
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 이미지 + 텍스트 묶음 컨테이너 */
.contact-wrapper {
  display: flex;
  max-width: 960px;            /* 다른 페이지와 비슷한 폭 */
  width: 100%;
  padding: 150px;   /* ← 실제 여백은 여기로 이동 */
  align-items: flex-start;     /* 위쪽 기준 정렬 */
  gap: 80px;                   /* 이미지와 텍스트 사이 간격 */
  box-sizing: border-box;
}

/* 왼쪽 이미지 */
.contact-image img {
  width: 200px;                /* 필요하면 크기 조절 */
  height: auto;
  border-radius: 0px;          /* 선택사항 */
}

/* 오른쪽 텍스트 블록 */
.contact-box {
  text-align: left;           /* 오른쪽 정렬 */
  max-width: 360px;
  line-height: 1.55;
}

/* 각 줄 기본 스타일 */
.contact-line {
  margin-bottom: 12px;
  font-size: 13px;
  color: #222;
}

/* LOCATION + ADDRESS 간 간격 여유 */
.contact-location {
  margin-bottom: 25px;     /* ← 위치 블록과 아래 주소 사이 간격 */
}

/* EMAIL/TEL/FAX 블록 */
.contact-info {
  margin-top: 25px;        /* LOCATION과 같은 간격 확보 */
  margin-bottom: 0px;     /* BLOG 위 간격은 조금 좁게 */
  line-height: 1.6;
}

/* BLOG / INSTAGRAM 밑줄 */
.contact-sns a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #222;
}

/* BLOG 위쪽 줄 간격 약간 줄이기 */
.contact-sns {
  margin-top: 5px;         /* ← FAX와 BLOG 사이 간격 좁힘 */
  margin-bottom: 20px;
}

/* 공통 링크 스타일 (CONTACT 영역 안) */
.contact-line a {
  color: #222;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-line a:hover,
.contact-sns a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────────────────────────
   모바일 대응 (선택, 있으면 편함)
   ───────────────────────────── */

@media (max-width: 768px) {
  .contact-section {
    justify-content: center;
    padding: 120px 16px 20px;
  }

  .contact-wrapper {
    flex-direction: column;     
    align-items: center;      /* ← 전체를 화면 중앙으로 */
    gap: 24px;
    padding: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
  }

  .contact-image img {
    width: 180px;
  }

  .contact-box {
    max-width: 100%;
  }
}