/* 고객·사업자 화면.
   control.css 의 색·간격을 그대로 쓴다. 여기서 색 체계를 새로 만들지 않는다.

   ★ control.css 는 `button{background:var(--blue);color:white}` 를 모든 단추에
     건다 (2026-09-09 화면을 열어 보고 알았다). 그래서 여기서 만든 단추는
     **글자색과 배경을 반드시 스스로 정해야 한다.** 정하지 않으면 흰 바탕에
     흰 글씨가 되어 **검색 결과가 통째로 안 보인다.** 오류도 나지 않는다. */

/* 글자색만 되돌린다. 배경은 아래 각 규칙이 정하게 두어야 :hover 가 산다
   (여기서 배경까지 잡으면 ID 선택자가 더 세서 hover 가 죽는다). */
#directory .dir-hit,
#directory .dir-link,
#directory .dir-id { color: var(--ink); font-weight: 400; }

/* `.detail` 격자는 ops.css 에서 다른 화면 두 곳에만 걸려 있다. 여기도 같은
   모양이어야 하므로 그 규칙을 이 화면에도 준다(값은 그쪽과 같게 맞췄다). */
#dirDetail .detail {
  display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px;
  margin: 0 0 20px; font-size: 14px;
}
#dirDetail .detail dt { color: #6b7c8c; }
#dirDetail .detail dd { margin: 0; overflow-wrap: anywhere; }
#dirDetail h4 { margin: 18px 0 4px; font-size: 14px; }

.searchbox { position: relative; }
.searchbox input {
  width: 100%; padding: 14px 16px; font-size: 16px;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
}
.searchbox input:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
.dir-hint { margin: 10px 2px 0; color: #64748b; font-size: 12px; }

/* 자동완성 창. 목록 위에 떠야 하므로 z-index 를 준다. */
.suggest {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 60vh; overflow-y: auto; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.suggest .empty { padding: 16px; margin: 0; }

.dir-hit {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid #f1f5f9;
  text-align: left; cursor: pointer; font: inherit;
}
.dir-hit:last-child { border-bottom: 0; }
.dir-hit:hover, .dir-hit:focus-visible { background: #f8fafc; }
.dir-kind {
  flex: 0 0 auto; margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  background: #e0e7ff; color: #3730a3; font-size: 11px; white-space: nowrap;
}
.dir-kind-person { background: #dcfce7; color: #166534; }
.dir-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dir-main strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.dir-main small { color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
.dir-thin { color: #94a3b8; }
.dir-past { color: #b45309; font-size: 11px; font-style: normal; }

/* ID 는 끝에, 작게. 사람이 읽을 값이 아니라는 것을 모양으로도 말한다. */
.dir-tail {
  flex: 0 0 auto; align-self: center; color: #cbd5e1;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px;
}
.dir-id {
  padding: 2px 6px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc; color: #64748b; cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
}
.dir-id.copied { background: #dcfce7; border-color: #86efac; color: #166534; }

.dir-ul { list-style: none; margin: 6px 0 18px; padding: 0; }
.dir-ul li {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid #f1f5f9;
}
.dir-ul li.empty { border-bottom: 0; color: #94a3b8; }
.dir-tag {
  padding: 1px 7px; border-radius: 999px; background: #f1f5f9;
  color: #475569; font-size: 11px;
}
.dir-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-link {
  padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: #fff; color: #1e293b; cursor: pointer; font: inherit; font-size: 13px;
}
.dir-link:hover { border-color: #2563eb; color: #2563eb; }

/* 현장에서 휴대폰으로 연다. 검색창이 작아지면 이 화면은 쓸모가 없다. */
@media (max-width: 640px) {
  .searchbox input { font-size: 16px; padding: 13px 14px; }  /* 16px 미만이면 iOS 가 확대한다 */
  .dir-tail { display: none; }
  .dir-hit { padding: 12px 12px; }
  .suggest { max-height: 50vh; }
  /* 390px 에서 150px 짜리 이름 칸은 값을 두 줄로 밀어낸다. */
  #dirDetail .detail { grid-template-columns: 92px 1fr; gap: 6px 10px; }
}