/* 페이지 전체의 기본 글꼴, 글자색, 배경색 */
:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d1d1f;
  background: #f5f5f7;
  font-synthesis: none;
}

/* 모든 요소의 너비에 테두리와 안쪽 여백을 포함한다. */
* {
  box-sizing: border-box;
}

/* 페이지가 너무 좁아지지 않도록 기본 크기를 정한다. */
html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

/* 화면 전체에 옅은 회색 배경을 채운다. */
body {
  min-height: 100dvh;
  background: #f5f5f7;
}

/* 검색창과 버튼도 페이지와 같은 글꼴을 사용한다. */
button,
input {
  font: inherit;
}

/* 위쪽 브랜드, 가운데 검색 영역, 아래쪽 안내를 세로로 배치한다. */
.page-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: 28px 40px 18px;
}

/* 사이트 왼쪽 위에 보이는 JobCheck 이름 */
.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 화면 가운데에 검색 영역을 놓는다. */
.main-content {
  display: grid;
  place-items: start center;
  padding: 112px 0 48px;
}

/* 제목과 검색창의 최대 너비를 680px로 맞춘다. */
.search-hero {
  display: grid;
  justify-items: center;
  width: min(100%, 680px);
  text-align: center;
}

/* 큰 제목 위에 보이는 파란색 작은 문구 */
.eyebrow {
  margin: 0 0 12px;
  color: #0066cc;
  font-size: 15px;
  font-weight: 500;
}

/* 화면 가운데 보이는 큰 제목 */
h1 {
  margin: 0 0 32px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

/* 검색 아이콘을 검색창 안에 놓기 위한 바깥 상자 */
.search-field {
  position: relative;
  width: 100%;
}

/* 사용자가 회사명을 입력하는 둥근 검색창 */
.search-field input {
  width: 100%;
  height: 56px;
  padding: 0 60px 0 54px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 9999px;
  outline: none;
  background: #ffffff;
  color: #1d1d1f;
  font-size: 16px;
}

/* 검색창이 비어 있을 때 보이는 예시 문구 */
.search-field input::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

/* 키보드로 검색창을 선택했을 때 파란 테두리를 보여준다. */
.search-field input:focus-visible {
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgb(0 102 204 / 18%);
}

/* 검색창 오른쪽에서 글자를 한 번에 지우는 X 버튼 */
.clear-search-button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7a7a7a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* 키보드로 X 버튼을 선택했을 때 파란 테두리를 보여준다. */
.clear-search-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
}

/* 검색창 왼쪽에 보이는 돋보기의 동그란 부분 */
.search-icon {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 23px;
  width: 17px;
  height: 17px;
  border: 1.8px solid #7a7a7a;
  border-radius: 50%;
  pointer-events: none;
}

/* 돋보기 아래쪽의 짧은 손잡이 */
.search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 1.8px;
  border-radius: 999px;
  background: #7a7a7a;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

/* 검색창 아래에 나타나는 회사 자동완성 목록 */
.company-suggestions {
  width: 100%;
  margin: 8px 0 0;
  padding: 6px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
  list-style: none;
  text-align: left;
}

/* 회사 이름과 업종을 누를 수 있는 한 줄로 묶는다. */
.company-suggestion-button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 7px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
}

/* 마우스나 방향키로 고른 회사를 옅은 회색으로 알려준다. */
.company-suggestion-button:hover,
.company-suggestion-item.is-active .company-suggestion-button {
  background: #f5f5f7;
}

/* 키보드로 자동완성 회사를 선택했을 때 파란 테두리를 보여준다. */
.company-suggestion-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}

/* 자동완성에서 위쪽에 보이는 회사 이름 */
.company-suggestion-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 자동완성에서 회사 이름 아래에 보이는 짧은 업종 */
.company-suggestion-industry {
  min-width: 0;
  color: #7a7a7a;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 검색 전에 검색창 아래에 보이는 사용 안내 */
.search-help {
  margin: 20px 0 0;
  color: #7a7a7a;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* 검색 후 나타나는 잡플래닛·블라인드 버튼 묶음 */
.external-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

/* 두 외부 검색 버튼이 함께 사용하는 모양 */
.external-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 9999px;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

/* 버튼 오른쪽에 보이는 외부 이동 표시 */
.external-mark {
  font-size: 14px;
  line-height: 1;
}

/* 키보드로 버튼을 선택했을 때 파란 테두리를 보여준다. */
.external-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

/* 마우스를 버튼 위에 올렸을 때 색을 조금 어둡게 한다. */
.external-button:hover {
  filter: brightness(0.96);
}

/* 버튼을 누르는 동안 살짝 눌린 모습으로 보여준다. */
.external-button:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

/* 첫 번째 외부 검색 버튼은 파란색으로 채운다. */
.primary-button {
  border: 1px solid #0066cc;
  background: #0066cc;
  color: #ffffff;
}

/* 두 번째 외부 검색 버튼은 파란 테두리만 보여준다. */
.secondary-button {
  border: 1px solid #0066cc;
  background: transparent;
  color: #0066cc;
}

/* 검색 영역 아래에서 JobCheck를 짧게 설명하는 부분 */
.about-section {
  width: min(100%, 600px);
  margin-top: 88px;
  text-align: center;
}

/* JobCheck 설명의 작은 제목 */
.about-section h2 {
  margin: 0 0 12px;
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

/* JobCheck가 하는 일을 알려주는 설명 */
.about-description,
.about-note {
  margin: 0;
  color: #7a7a7a;
  font-size: 14px;
  line-height: 1.65;
}

/* 두 번째 설명이 첫 번째 설명과 붙지 않도록 간격을 둔다. */
.about-note {
  margin-top: 8px;
}

/* 화면 아래쪽 안내 문구를 가운데에 세로로 배치한다. */
.site-footer {
  display: grid;
  gap: 7px;
  text-align: center;
}

/* 아직 실제 광고가 없다는 것을 알려주는 작은 문구 */
.ad-placeholder {
  color: #7a7a7a;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* JobCheck가 두 회사와 관계없다는 비제휴 안내 */
.independence-notice {
  max-width: 620px;
  margin: 0 auto;
  color: #6e6e73;
  font-size: 12px;
  line-height: 1.5;
}

/* 화면에는 숨기지만 읽기 도구가 설명을 읽을 수 있게 한다. */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 화면 너비가 640px 이하일 때 모바일에 맞게 바꾸는 부분 */
@media (max-width: 640px) {
  .page-shell {
    padding: 24px 20px 18px;
  }

  .brand {
    font-size: 15px;
  }

  .main-content {
    padding-top: 92px;
  }

  .eyebrow {
    font-size: 14px;
  }

  h1 {
    margin-bottom: 28px;
    font-size: 28px;
    line-height: 1.2;
  }

  .about-section {
    margin-top: 64px;
  }

  .external-actions {
    display: grid;
    width: 100%;
  }

  .external-button {
    width: 100%;
  }
}

/* 화면 높이가 낮을 때 검색 영역이 너무 아래로 내려가지 않게 한다. */
@media (max-height: 640px) {
  .main-content {
    padding-top: 56px;
  }
}