/* company/greeting.html — CEO 인사말 전용
 *
 * 원본 본문은 통짜 이미지 1장(shop-banner-01.png)이었다.
 * R1(텍스트=단일 텍스트 노드 리프) 준수를 위해 인사말 전문을 실텍스트로 옮기고,
 * 이미지에서는 글자가 없는 지구본/화살표/스카이라인 아트워크 영역만 잘라
 * 장식 비주얼(greeting-visual.png)로 쓴다. 손글씨 서명은 텍스트로 재현 불가라
 * 별도 이미지(greeting-signature.png)로 남긴다.
 *
 * 수치 근거 = 정답샷 -d.png 글리프 밴드 실측(행 시작 y·높이·행 간격)과 원본 이미지 색 샘플링:
 *   제목 34px(밴드 31) / 회사명 23px(21) / 리드 28px(26) / 본문 16px(15)
 *   행 간격 — 제목→회사명 59 · 회사명→리드 70 · 리드 44 · 리드→인사 69 ·
 *            인사 29 · 인사→본문 59 · 본문 29 · 문단 사이 58
 *   제목·회사명 #002a5c · 리드 #002e99 · 본문 #111111
 */

/* 좌측 ABOUT 서브내비 — 라인박스 디센더 제거(파리티 r3)
 * 원본 실측(_trees/*.src.json): 1행 TR/TD/IMG 가 전부 h=50 으로 동일하다
 * (셀 높이 = 이미지 높이). 우리 렌더는 TD 54 / IMG 50 으로 4px 이 더 붙었다 —
 * img 가 display:inline 이라 셀에 baseline 디센더가 생긴 것.
 * 같은 4px 이 하단 customer.jpg 행에도 붙어 서브내비 TABLE/TBODY 가
 * 339 → 347(8px) 로 부풀었다. GLOBAL-parity-r2#0 이 헤더 subimg.jpg 를
 * display:block 으로 고친 것과 동일 기전.
 * ⚠ 셀렉터를 width="220" 서브내비 셀 안으로 좁힌다 — customer.jpg 는
 *   14개 페이지가 공유하므로 전역으로 풀면 내 쓰기범위를 벗어난다.
 *   링크(<a>)로 감싼 행은 원본도 39 로 이미 정합이라 건드리지 않는다. */
td[width="220"] > table td > img {
  display: block;
}

.greeting {
  position: relative;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  background: #fdfdfd;
}

/* 원본 배경 그래픽(지도도트+지구본+화살표+도시)을 통짜로 깔고 텍스트를 위에 얹는다(원본 레이아웃 재현).
   원본 800x1066 비율 유지, 우측 정렬. 텍스트는 좌측에 배치해 지구본과 안 겹치게 한다. */
/* 반응형 분기(2026-08-25): 데스크톱=원본 통짜 이미지(디자인 100% 동일),
   모바일=HTML 텍스트 재조판(가독성). 데스크톱에선 텍스트 숨김, 모바일에선 이미지 숨김. */
.greeting-photo { display: block; text-align: center; }
.greeting-photo img { max-width: 100%; height: auto; }
.greeting { display: none; }  /* 데스크톱 기본: 텍스트 재조판 숨김(이미지 사용) */

.greeting-body {
  position: relative;
  z-index: 1;
  padding: 30px 0 40px 25px;
  max-width: 62%;
}

/* 공통 타이포 — front.css 의 9pt 상속을 이 페이지에서만 되돌린다.
 * ⚠ 여기서 margin 을 잡으면(0,2,0) 아래 단일 클래스 규칙(0,1,0)의
 *   문단 간격이 통째로 죽는다 — 글꼴만 지정한다. */
.greeting-body p,
.greeting-body h2,
.greeting-body span {
  font-family: "Apple SD Gothic Neo",'nanumR',"Nanum Gothic",Malgun Gothic,"맑은 고딕",Dotum,"돋움", sans-serif;
}

.greeting-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  color: #002a5c;
  letter-spacing: -0.02em;
  margin: 0;
}

/* 제목 밴드 시작 → 회사명 밴드 시작 = 59px */
.greeting-company {
  font-size: 23px;
  font-weight: 400;
  line-height: 28px;
  color: #002a5c;
  margin: 25px 0 0;
}

/* 회사명 → 리드 = 70px */
.greeting-lead {
  font-size: 28px;
  font-weight: 700;
  line-height: 44px;
  color: #002e99;
  letter-spacing: -0.02em;
  margin: 0;
}

.greeting-company + .greeting-lead {
  margin-top: 34px;
}

.greeting-hello {
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  color: #111111;
  margin: 0;
}

/* 리드 → 인사 = 69px (리드 line-height 44 기준 잔여) */
.greeting-lead + .greeting-hello {
  margin-top: 28px;
}

.greeting-p {
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  color: #111111;
  margin: 0;
}

/* 문단 사이 빈 줄 = 58px 간격(행 피치 2줄분) */
.greeting-p-gap {
  margin-top: 29px;
}

/* 인사 블록 → 첫 본문 문단 = 59px */
.greeting-hello + .greeting-p {
  margin-top: 30px;
}

/* 서명 — 상단 가는 실선 + 우측 정렬 */
.greeting-sign {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid #cfcfcf;
  text-align: right;
  white-space: nowrap;
}

.greeting-sign-role {
  font-size: 15px;
  color: #333333;
  vertical-align: middle;
}

.greeting-sign-img {
  display: inline-block;
  width: 126px;
  height: auto;
  margin-left: 22px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
 * 반응형 (R3) — 원본은 1080 고정폭이라 좁은 화면 리플로우를 여기서 만든다.
 * 아트워크는 절대배치를 풀고 본문 아래로 흘려보낸다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  .greeting {
    width: auto;
  }
}

@media screen and (max-width: 860px) {
  /* 절대배치를 풀고 본문 아래로 흘려보낸다 — 순서는 본문 → 아트워크 */
  .greeting {
    display: flex;
    flex-direction: column;
  }

  .greeting-visual {
    position: static;
    order: 2;
    width: 60%;
    max-width: 348px;
    margin: 4px auto 24px;
  }

  .greeting-body {
    order: 1;
  }

  .greeting-body {
    padding: 24px 16px 30px;
  }

  .greeting-title {
    font-size: 30px;
  }

  .greeting-company {
    font-size: 20px;
  }

  .greeting-lead {
    font-size: 24px;
    line-height: 36px;
  }

  .greeting-company + .greeting-lead {
    margin-top: 28px;
  }
}

@media screen and (max-width: 640px) {
  .greeting-body {
    padding: 20px 14px 26px;
  }

  .greeting-title {
    font-size: 26px;
    line-height: 32px;
  }

  .greeting-company {
    font-size: 17px;
    margin-top: 18px;
  }

  .greeting-lead {
    font-size: 20px;
    line-height: 30px;
  }

  .greeting-company + .greeting-lead {
    margin-top: 22px;
  }

  .greeting-hello,
  .greeting-p {
    font-size: 15px;
    line-height: 25px;
  }

  .greeting-lead + .greeting-hello {
    margin-top: 24px;
  }

  .greeting-p-gap,
  .greeting-hello + .greeting-p {
    margin-top: 25px;
  }

  .greeting-sign {
    margin-top: 32px;
    padding-top: 16px;
    white-space: normal;
  }

  .greeting-sign-role {
    font-size: 13px;
  }

  .greeting-sign-img {
    width: 100px;
    margin-left: 10px;
  }

  .greeting-visual {
    width: 78%;
  }
}

@media (max-width: 900px) {
  /* 모바일: 원본 이미지 숨기고 HTML 텍스트 표시(가독성) */
  .greeting-photo { display: none; }
  .greeting { display: block; }
  .greeting-body { max-width: 100%; }
}