/* ---------- 사업자정보 표기 ----------
   랜딩과 법적 고지 페이지가 함께 쓴다. 두 페이지의 푸터 글자색·크기는 각자 다르되,
   항목이 끊기는 자리와 라벨·값의 위계는 같아야 한다.

   항목 하나가 곧 flex item 이다 — 라벨과 값을 한 덩어리로 묶어 두었으므로 줄바꿈은
   항목과 항목 사이에서만 일어난다. 문자 구분자로 이어 붙이면 어디서 끊길지 고를 수 없어
   '통신판매업 신고번호' 다음 줄에 번호만 남는 일이 생긴다. */

.biz-info {
  font-style: normal;
  /* 값은 가장 진하게 — 이 블록에서 실제로 옮겨 적는 것은 번호와 주소다. */
  color: var(--gray-800);
  display: flex;
  /* 좁은 폭에서는 가로 나열을 포기한다 — 항목당 한 줄이 우겨넣기보다 읽힌다. */
  flex-direction: column;
  gap: 0.6rem;
  line-height: 1.6;
}

/* 휴대폰 폭에서는 라벨을 값 위로 올린다 — '유료직업소개사업 등록번호'처럼 긴 라벨은
   값과 한 줄에 서지 못해 어차피 다음 줄로 넘어가고, 그때 어느 값이 어느 라벨의 것인지
   흐려진다. 앱 설정화면의 사업자정보도 같은 두 줄 구성이다. */
@media (max-width: 479px) {
  .biz-label {
    display: block;
    margin-right: 0;
  }
}

@media (min-width: 640px) {
  .biz-info {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
  }
}

/* 라벨은 값보다 한 단계 연하게 둔다 — 값(번호)이 먼저 읽히고, 항목 경계도 색으로 드러난다.
   다만 라벨도 읽어야 하는 글자이므로 배경 대비 4.5:1 아래로는 내리지 않는다
   (gray-700 은 흰 배경 7.11:1, 푸터 배경 6.81:1. gray-500 은 2.91:1 로 미달이다). */
.biz-label {
  color: var(--gray-700);
  margin-right: 0.15rem;
}

/* 등록번호는 하이픈마다 끊길 수 있다 — 좁은 폭에서도 번호 하나가 통째로 읽히게 붙여 둔다. */
.reg-no {
  white-space: nowrap;
}

/* 공정위 사업자정보 공개페이지로 가는 확인 링크. 값에 붙는 작은 표식이라 글자보다 연한
   테두리만 두르고 크기를 키우지 않는다. */
.biz-verify {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--gray-700);
  font-size: 0.92em;
  text-decoration: none;
  white-space: nowrap;
}

.biz-verify:hover {
  color: var(--gray-900);
  border-color: var(--gray-500);
}