/* db_components.css — 페이지 경계를 넘는 공용 db-* 컴포넌트 정본.
   2026-07-28 properties_grid.css 에서 이관(센서스 ② 후속) — 규칙 내용·내부 순서는 원본 그대로.
   교차 사용 실측: db-select*(clients·properties·listings·presentations·shared/_db_select),
   db-input(13파일), db-btn*(12파일·db_confirm.js), db-confirm-modal*(db_confirm.js 전역),
   db-action-btn(15파일·shared/_action_button).
   ⚠️ unlayered 시트 — Tailwind utilities(layered)를 항상 이긴다. @layer 로 감싸지 말 것(승부 뒤집힘). */

/* 커스텀 셀렉트 (button + panel) */
.db-select-wrap { position: relative; display: inline-block; }
/* native <select> 숨김 — JS 미연결/캐시 시에도 커스텀 버튼과 이중 렌더 방지(값은 유지) */
.db-select-wrap > select[data-db-select-target="native"] { display: none; }
.db-select-button {
  /* width:100% 는 shared/_db_select.html.erb 가 인라인으로 주던 것(2026-08-05 회수).
     그 파셜이 이 클래스의 유일한 생성처라(JS 생성 0건) 정의에 흡수해도 동등하다. */
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  /* 높이 = 공용 검색바 인풋(height:32px)과 동일 정렬. box-sizing:border-box 로 보더 포함 32px 고정. */
  height: 32px; box-sizing: border-box;
  width: 100%; padding: 0 30px 0 10px;
  background-color: var(--db-color-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2370737C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,4.5 6,8 9.5,4.5'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  font: var(--db-text-label-2); color: var(--db-color-text);
  text-align: left; cursor: pointer; outline: none;
  transition: border-color var(--db-duration-fast), box-shadow var(--db-duration-fast);
}
.db-select-wrap .db-select-button:hover { background-color: var(--db-color-fill-medium); }
.db-select-button:focus,
.db-select--open .db-select-button { border-color: var(--db-color-outline); }
.db-select-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-height: 280px; overflow-y: auto; overflow-x: hidden;
  /* 스크롤 체이닝 차단 — 패널이 사이드바(overflow-y:auto) 자식이라, 없으면 휠이 사이드바로 새어
     스크롤/reposition churn 으로 패널이 닫힘. contain 으로 내부 스크롤에 가둠. */
  overscroll-behavior: contain;
  /* 스크롤바 숨김 — 스크롤 기능(overflow-y:auto)은 유지, 바만 감춘다.
     (닫힘 버그는 lib/single_dropdown.js 스크롤 리스너 가드로 해결됨 — 스크롤바 유무와 무관.) */
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--db-color-card); border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input); box-shadow: var(--db-shadow-overlay);
  padding: 4px; z-index: 50; box-sizing: border-box;
}
.db-select-panel::-webkit-scrollbar { display: none; }
.db-select__option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--db-radius-xs);
  font: var(--db-text-label-2); color: var(--db-color-text);
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.db-select__option:hover { background: var(--db-color-fill-subtle); }
.db-select__option--selected { color: var(--db-color-primary); font-weight: 600; }
.db-select__option--selected::after { content: "✓"; margin-left: auto; color: var(--db-color-primary); }

/* 콤보박스(combo_controller) — 위 db-select 껍데기를 그대로 쓰고 아래 3개만 더한다.
   .db-select-input : 버튼 자리를 <input> 으로 바꿀 때. .db-select-button 의 display:flex 를
                      되돌려야 한다(input 에 flex 를 걸면 커서/placeholder 정렬이 깨진다).
   .db-select__group: 그룹 헤더(자주쓰는/가족/회사/그 외). datalist 로는 못 만드는 바로 그것.
   .db-select__hint : "외 N건 더 입력해 좁히세요" 같은 안내 — 클릭 대상이 아니다. */
.db-select-input { display: block; }
.db-select-input::placeholder { color: var(--db-color-text-muted, #9ca3af); }
.db-select__group {
  padding: 6px 10px 2px; margin-top: 2px;
  font: var(--db-text-label-2); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: var(--db-color-text-muted, #9ca3af);
  text-transform: none; user-select: none;
}
.db-select__group:first-child { margin-top: 0; }
.db-select__hint {
  padding: 6px 10px; font: var(--db-text-label-2); font-size: 11px;
  color: var(--db-color-text-muted, #9ca3af); cursor: default; user-select: none;
}
/* 키보드(↑↓) 이동 표시 — hover 와 같은 톤. 선택 확정(--selected)과는 다른 상태다. */
.db-select__option--active { background: var(--db-color-fill-subtle); }

/* 공용 인풋 (텍스트/숫자/textarea) — 셀렉박스(.db-select-button)와 동일 토큰·패딩·높이.
   정본 1곳: 폼 인풋은 이 클래스만 쓴다. (인라인 스타일 금지) */
.db-input {
  width: 100%; box-sizing: border-box; margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  /* 폼 컨트롤은 font-family 를 상속 안 함 — Tailwind preflight 없는 화면(독립 팝업 등)에서
     UA 기본(textarea=monospace)으로 떨어지는 것 방지. 공용 컴포넌트 자립. */
  font-family: inherit;
  font-size: 12px; font-weight: 500; line-height: 1.385; /* 셀렉박스 line-height 와 동일 → 높이 일치 */
  color: var(--db-color-text);
  background-color: var(--db-color-card);
  outline: none;
  transition: border-color var(--db-duration-fast);
}
/* 인풋 높이 = 셀렉박스(.db-select-button)와 동일 32px 정렬. textarea 는 제외(여러 줄 높이 보존). */
input.db-input, select.db-input { height: 32px; }
.db-input::placeholder { color: var(--db-color-text-sub); }
/* 클릭(포커스) 시 파란 아웃라인/보더 하이라이트 제거 — 기본 보더색 유지 */
.db-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--db-color-outline);
}

/* 버튼 (검색바 검색/초기화 등) */
.db-btn {
  height: 32px; box-sizing: border-box; padding: 0 10px;
  border-radius: var(--db-radius-btn); font: var(--db-text-label-2); font-family: inherit;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none; text-decoration: none; line-height: 1;
}
.db-btn-primary {
  background: var(--db-color-primary); color: var(--db-color-on-primary);
  border-color: var(--db-color-primary);
}
.db-btn-primary:hover { background: var(--db-color-primary-hover); border-color: var(--db-color-primary-hover); }
.db-btn-primary:active { background: var(--db-color-primary-pressed); border-color: var(--db-color-primary-pressed); }
.db-btn-secondary { background: var(--db-color-fill-light); color: var(--db-color-text-sub); text-decoration: none; }
.db-btn-secondary:hover { background-color: var(--db-color-fill-medium); }
/* 중립(진회색 solid) 변형 — 검색바 "문자·카톡" 버튼의 룩이 정본이다(조이 지목 2026-08-03).
   그 호출부는 raw hex(#6b7280)를 인라인으로 박고 있는데, 같은 값의 토큰
   --db-color-action-neutral 이 이미 있다(db_tokens.css:33, .db-action-btn 중립 변형용).
   새로 쓰는 자리는 토큰을 쓴다 — 색 정의가 hex 로 흩어지지 않게. 기존 인라인 2곳은 이번 범위 밖.
   hover 는 .db-action-btn:hover 관례(brightness 0.92)를 그대로 따른다 — solid 버튼끼리 톤 통일. */
.db-btn-neutral {
  background: var(--db-color-action-neutral); color: var(--db-color-on-primary);
  border-color: var(--db-color-action-neutral); transition: filter 0.12s;
}
.db-btn-neutral:hover { filter: brightness(0.92); }
/* --xs : 글줄 안에 끼워 넣는 버튼 (고객 상세 헤더의 [관계도], 조이 확정 2026-08-03).
   높이 22px 의 근거 = 옆에 선 이름 <h2 text-[18px] leading-tight> 의 줄높이(18×1.25≈22.5px).
   기본 32px 로 두면 이름 줄이 버튼 높이만큼 벌어져 헤더가 한 줄 더 두꺼워진다.
   같은 줄의 .db-badge--sm(≈16px)보다는 6px 크다 — 뱃지(정보)와 버튼(액션)이 안 헷갈릴 만큼의 차이다.
   **높이만** 줄인다. font(label-2 = 12px/1.385 ≈ 16.6px)는 건드리지 않는다 — 22px 안에 들어가고,
   글자까지 줄이면 베껴온 버튼과 다른 물건이 된다("디자인은 그대로, 높이만" 조이 확정).
   .db-btn 본체를 줄이지 않은 이유: 검색바 "고객 등록"·메모 "등록"까지 같이 작아진다.

   radius 를 굳이 다시 적는 이유(조이 지적 2026-08-03 "더 둥글어 보인다") — 값이 아니라 **비율** 때문이다.
   --db-radius-btn(10px)은 32px 버튼 기준이라 높이의 31%인데, 높이만 22px 로 줄이면 같은 10px 가
   45%가 되어 알약에 가까워진다(브라우저 computed 실측: 10px/32px=31% vs 10px/22px=45%).
   그래서 같은 **비율**을 유지하도록 22 × 0.3125 ≈ 7px 로 다시 잡는다 — 옆에 선 큰 버튼과 모서리가 같은 톤이 된다. */
.db-btn--xs { height: 22px; padding: 0 8px; border-radius: 7px; }

/* 공용 confirm 모달 (window.dbConfirm / dbAlert — 삭제 확인 등). db_confirm.js 참조. */
.db-confirm-modal__overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.db-confirm-modal {
  background: var(--db-color-card);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow-overlay);
  padding: 20px; min-width: 300px; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px; /* 본문↔버튼 등 세로 간격 축소 */
  font-family: var(--db-font-sans);
}
.db-confirm-modal__title { font-size: 14px; font-weight: 600; color: var(--db-color-text); }
.db-confirm-modal__body { font-size: 14px; color: var(--db-color-text); white-space: pre-wrap; line-height: 1.5; margin-top: -4px; /* 제목↔본문 위쪽 살짝 띄움(카드 gap 8px 중 4px만 상쇄) */ }
.db-confirm-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* 확인 버튼 색은 앱 primary 토큰 그대로(.db-btn-primary 상속) — 별도 오버라이드 없음(주 파랑=남색 #1e40af, db_tokens.css 정본). */
/* dbConfirm 이 열리며 확인 버튼을 auto-focus → 브라우저 기본 outline(검정 보더) 제거 */
.db-confirm-modal .db-btn:focus, .db-confirm-modal .db-btn:focus-visible { outline: none; box-shadow: none; }
.db-confirm-modal--danger .db-confirm-modal__title { color: var(--db-color-danger); }
.db-confirm-modal--danger .db-btn-primary { background: var(--db-color-danger); border-color: var(--db-color-danger); }
.db-confirm-modal--danger .db-btn-primary:hover { background: var(--db-color-danger-hover); border-color: var(--db-color-danger-hover); }

/* 공용 액션 버튼 (shared/_action_button) — 배경색은 --btn-color 로 변경 가능, hover 자동 */
.db-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 12px; box-sizing: border-box;
  border: none; border-radius: var(--db-radius-btn); /* .db-btn(10px)과 radius 통일 — 닫기/저장 동일 */
  /* 기본색 하드코딩 #1e40af → 토큰(--db-color-action) 경유로 정정 — 렌더값 동일(#1e40af). */
  background: var(--btn-color, var(--db-color-action)); color: #fff;
  /* M3 typescale 의존 제거(2026-07-29) — 정의처 m3-tokens.css 는 이 파일을 로드하는 6개 문서 중
     2곳(application·embed_modal)에만 있어 print_form·독립팝업 3개에선 이 shorthand 가 미해석이었다.
     해석되던 값(500 12px/16px)을 명시해 6개 문서 렌더를 일치시킨다. */
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 16px;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: filter 0.12s;
}
.db-action-btn:hover { filter: brightness(0.92); }
.db-action-btn:active { filter: brightness(0.85); }

/* ══════════════════════════════════════════════════════════════════════════
   공용 파셜 회수분 (2026-08-05) — `app/views/shared/**` 인라인 style 을 여기로 걷었다.
   여기(db_components)에 두는 근거는 **도달 범위**다: `<html>` 문서 7개 중 6개가 이 시트를
   싣고, 안 싣는 하나(layouts/mailer)는 이 파셜들을 렌더하지 않는다(전수 실측).
   화면 전용 시트에 뒀다면 독립 팝업·인쇄 문서에서 그 파셜만 스타일이 사라졌을 것이다 —
   인라인은 어디서나 먹었지만 시트는 그렇지 않다. 이게 이 회수의 유일한 진짜 위험이었다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 계정 메뉴 (shared/_account_menu) ─────────────────────────────────── */
.db-account-avatar { background-color: var(--db-color-primary); }
.db-account-icon   { font-size: 18px; }

/* ── 액션 버튼 아이콘 (shared/_action_button) ─────────────────────────── */
.db-action-btn__icon { font-size: 16px; line-height: 1; }

/* ── 모달 셸 (shared/_modal) ──────────────────────────────────────────
   ⚠️ `.db-modal-panel` 의 `pointer-events:auto` 는 Tailwind prebuilt 에 그 유틸이 없어서
   인라인으로 주던 것이다(파셜 주석의 실측 결론). 클래스로 내려도 unlayered 라 유틸에 안 진다.
   패널 크기는 여전히 `panel_style` 파라미터로 받는다 — 그건 부채가 아니라 **컴포넌트 API** 다.

   dsv2_clients 의 `.dc-modal-overlay`·`.dc-modal-panel` 은 같은 값의 복제였다(2026-08-05
   직전 슬라이스에서 내가 만든 것) — 이번에 이 둘로 합치고 그쪽 정의는 지웠다. */
.db-modal-overlay { background: rgba(15, 23, 42, 0.45); }
.db-modal-panel   { pointer-events: auto; }

/* ── 검색바 아이콘 (shared/_search_bar) ───────────────────────────────── */
.db-search-icon {
  position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); pointer-events: none;
}

/* ── 날짜 입력 (shared/_date_field) ───────────────────────────────────── */
.db-date-label  { font: var(--db-text-caption-1); color: var(--db-color-text-sub); }
.db-date-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
}
.db-date-icon { width: 14px; height: 14px; color: var(--db-color-text-sub); }

/* ── 기간 필터 (shared/_date_filter) ──────────────────────────────────── */
.db-date-filter       { display: flex; align-items: center; gap: var(--db-space-2); flex: 0 0 auto; }
.db-date-filter-label { font: var(--db-text-label-2); color: var(--db-color-text-sub); }
.db-date-filter-label--nowrap { white-space: nowrap; }

/* ── 주소 재조회 바 (shared/_addr_retry_bar) ──────────────────────────
   뷰의 `<style>` 블록(@media print 한 줄)도 여기로 걷었다 — 그 파셜의 인라인 <style> 은 0이 됐다. */
.db-addr-bar {
  max-width: 720px; margin: 0 auto 12px;
  font-family: -apple-system, "Malgun Gothic", sans-serif;
}
.db-addr-row {
  display: flex; gap: 8px; align-items: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px;
}
.db-addr-label { font-size: 12px; color: var(--db-color-primary); font-weight: 700; white-space: nowrap; }
.db-addr-input { flex: 1; min-width: 0; margin-top: 0; }
.db-addr-hint  {
  font-size: 12px; font-weight: 500; color: #6b7280;
  margin-top: 6px; padding-right: 2px; text-align: right;
}
@media print {
  .addr-retry-bar { display: none !important; }
}