/* =============================================================
   공용 드롭다운. js/dropdown.js 와 짝이다. 화면의 모든 펼침 목록이 이것 하나를 쓴다.
   ============================================================= */
/* ---- 공용 드롭다운 ----
   팝업은 absolute 다. 흐름에 두면 여는 순간 아래 칸이 통째로 밀려 아코디언처럼 보인다. */
.dd { position: relative; }
.dd-head { display: flex; align-items: center; gap: 6px; }

.dd-btn {
  flex: 1; min-width: 0; height: 34px; padding: 0 11px; text-align: left;
  border: 1px solid var(--btn-bd); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-btn:hover { border-color: var(--btn-bd-s); }
.dd-btn.empty { color: var(--faint); }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dd-pop {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-3); overflow: hidden;
}
/* 팝업 안의 검색칸은 테두리가 없다. 팝업이 이미 테두리를 갖고 있다. */
.dd-pop > .dd-q {
  width: 100%; height: 33px; padding: 0 11px; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; font-size: 12.5px; background: var(--bg); color: var(--text); outline: 0;
}
/* 칸 자체가 검색창인 꼴. 다른 입력칸과 같은 모습이어야 한다. */
.dd-head > .dd-q {
  flex: 1; min-width: 0; height: 34px; padding: 0 11px;
  border: 1px solid var(--btn-bd); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; outline: 0;
}
.dd-head > .dd-q:focus { border-color: var(--accent); }
.dd-head > .dd-q::placeholder { color: var(--faint); }
/* 고른 값이 들어가는 칸에는 펼침 표시를 둔다. 그냥 글자칸으로 보이면 눌러 볼 생각을 안 한다. */
.dd-head.combo { position: relative; }
.dd-head.combo > .dd-q { padding-right: 26px; }
.dd-head.combo::after {
  content: '⌄'; position: absolute; right: 10px; top: -3px;
  font-size: 13px; color: var(--faint); pointer-events: none;
}

/* ⭐ 단추가 곧 머리인 목록 (2026-08-04) — 툴바 단추 밑에 걸린다.
   칸이 아니라 단추라 폭을 머리에 맞출 수 없다: **글이 폭을 정하고 오른쪽 끝만 맞춘다.**
   왼쪽에 맞추면 툴바 오른쪽 끝의 단추에서 목록이 화면 밖으로 나간다. */
.dd-pop.menu { left: auto; right: 0; min-width: 168px; }

.dd-l { max-height: 264px; overflow: auto; padding: 4px; }
/* 칸보다 팝업이 넓어도 된다. 분류 경로는 세 마디라 칸 폭에 맞추면 줄줄이 잘린다. */
.dd-wide .dd-pop { min-width: 330px; }
.dd-none { padding: 12px; font-size: 11.5px; color: var(--faint); text-align: center; }
/* 갈래 머리 (AZ.dropGroup) — **안 눌리는 글자**라 줄보다 작고 흐리다.
   위에 금을 그어 앞 갈래와 끊는다. 첫 줄에는 금도 여백도 없다. */
.dd-g {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; color: var(--faint);
  margin-top: 4px; border-top: 1px solid var(--line);
}
.dd-l > .dd-g:first-child { margin-top: 0; border-top: 0; padding-top: 4px; }

.dd-r {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.dd-r:hover { background: var(--hover); }
.dd-r.on { background: var(--sel-row); }
.dd-m { display: flex; flex-direction: column; min-width: 0; }
.dd-m b { font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-m span { font-size: 10.5px; color: var(--faint); }
.dd-r.l1 .dd-m b { font-weight: 700; }
.dd-r.l2 .dd-m b { font-weight: 500; color: var(--muted); }
.dd-x {
  flex: none; width: 15px; height: 15px; line-height: 14px; text-align: center;
  border-radius: 4px; background: var(--sunk); color: var(--muted); font-size: 11px;
}
/* 자식은 왼쪽 선 하나로 어디에 붙는지 보인다. 들여쓰기만으로는 3단이 헷갈린다. */
.dd-k { margin-left: 11px; padding-left: 8px; border-left: 1px solid var(--line); }

/* 수정·복사는 올렸을 때만 나온다. 늘 보이면 목록이 단추밭이 된다.
   닿기 어려운 기기에서는 줄을 그냥 누르면 첫 동작으로 간다. */
.dd-a { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .1s; }
.dd-r:hover .dd-a, .dd-r:focus-within .dd-a { opacity: 1; }
.dd-a .btn { height: 24px; padding: 0 9px; font-size: 11px; }
@media (hover: none) { .dd-a { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dd-a { transition: none; } }

/* 목록 발치의 길 — 운영정보로 건너가는 자리 */
.dd-foot {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--line);
  background: var(--head); color: var(--muted); font: inherit; font-size: 11.5px;
  text-align: left; cursor: pointer;
}
.dd-foot:hover { color: var(--text); background: var(--hover); }

/* 찾는 칸 — 고르는 칸과 생김새를 갈라 둔다. 하는 일이 다르다.
   바탕을 눕히고 돋보기를 앞에 두면 "여기에 쳐 넣는 곳"이 한눈에 보인다. */
.dd-head.search { position: relative; }
.dd-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--faint); pointer-events: none;
}
.dd-ic svg { width: 13px; height: 13px; display: block; }
.dd-head.search > .dd-q { padding-left: 32px; background: var(--sunk); border-color: transparent; }
.dd-head.search > .dd-q:focus { background: var(--surface); border-color: var(--accent); }
.dd-head.search:focus-within .dd-ic { color: var(--muted); }

/* 툴바의 품목 찾기. 화면 위쪽이라 결과가 길면 아래를 다 덮는다 — 짧게 보인다. */
.itm-find { flex: 1; min-width: 240px; max-width: 380px; }
.itm-find .dd-l { max-height: 196px; }
.itm-find .dd-r { padding: 5px 8px; }