/* 선택지 목록 새로 만들기·수정 창(optionListEditor.js, 원장 261008 미리보기 확정). 창 틀·단계·입력란·버튼은 ui-kit.css, 여기는 항목 트리와 가져오기 상자.
 * 입력란은 theme.dark.css 의 body[data-theme="dark"] input (0,1,2) 이 테두리·바탕을 덧씌운다 — .ui-modal .ole-tree .ole-input (0,3,0) 으로 누른다. */

.ui-modal .ui-modal-card.ole-card { width: 640px; }
/* 단계 높이 상한 — 넘치면 단계 안에서 스크롤(머리·단계 표시·하단 줄을 뺀 나머지). 세로 스크롤은 syncHeight 가 지금 단계가 상한을 넘을 때만 켠다 */
.ui-modal .ole-viewport { max-height: calc(92vh - 170px); overflow-x: hidden; }

/* 가져오기 버튼 둘 — 반씩, 높이는 하단 버튼과 같은 32px */
.ole-import { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 14px; }
.ole-import[hidden] { display: none; }
.ole-import .ui-text-button.ui-text-button { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 .9rem; border-radius: 8px; font-size: 13px; }
.ole-import i { margin-right: 6px; font-size: 12px; color: var(--ui-soft); }

.ole-items-head { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.ole-items-head .ui-modal-label { margin: 0; }
.ole-count { font-size: 12px; color: var(--ui-soft); }

/* 항목 트리 */
/* 틀 위 안쪽 여백 8px(틀 안쪽 반지름 9px)은 첫 행 바탕이 둥근 모서리에 잘리지 않게 한다. 첫 행 위에도 행 구분선을 그어 여백이 첫 행 높이로 보이지 않게 한다(원장 261029 미리보기 승인) */
.ole-tree { padding-top: 8px; border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; }
.ole-tree > .ole-row:first-child, .ole-tree > .ole-cat:first-child > .ole-row { border-top: 1px solid var(--ui-border); }
.ole-row { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px 0 calc(4px + var(--ole-depth, 0) * 24px); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); transition: background .8s ease; }
.ole-row:hover { background: var(--ui-hover); }
.ole-row.is-new { background: var(--ui-add-bg); }
.ole-row.is-new.is-fading { background: var(--ui-surface); }
.ole-grip { width: 20px; flex-shrink: 0; text-align: center; color: var(--ui-soft); font-size: 11px; cursor: grab; opacity: 0; }
/* 손잡이 점 6개는 글리프가 위로 치우쳐 글자 중심(행 중심 아래 0.8~1.0px)·펼침 화살표(0.6px)보다 1px 높다(원장 261029 「행 손잡이의 높이 정렬」) */
.ole-grip i { transform: translateY(1px); }
.ole-row:hover .ole-grip { opacity: 1; }
.ole-caret { width: 18px; flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--ui-muted); font-size: 11px; cursor: pointer; }
.ui-modal .ole-tree .ole-input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ui-text); font: inherit; font-size: 13.5px; }
.ui-modal .ole-tree .ole-input:focus { outline: none; border-color: var(--ui-border-2); background: var(--ui-surface); }
.ui-modal .ole-tree .ole-cat-row .ole-input { font-weight: 600; }
.ole-n { margin-right: 4px; font-size: 12px; color: var(--ui-soft); white-space: nowrap; }
/* 행 동작은 마우스를 올리거나 입력 중인 행에만 */
.ole-acts { display: flex; opacity: 0; }
.ole-row:hover .ole-acts, .ole-row:focus-within .ole-acts { opacity: 1; }
.ole-acts button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-soft); font-size: 12px; cursor: pointer; }
.ole-acts button:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--ui-text); }
.ole-acts button.is-danger:hover { background: var(--ui-danger-bg); color: var(--ui-danger); }
.ole-empty { padding: 14px 12px; font-size: 13px; color: var(--ui-soft); border-bottom: 1px solid var(--ui-border); }
.ole-add { display: flex; gap: 2px; padding: 4px 6px; }
.ole-add .ui-text-button.ui-text-button { font-size: 12.5px; padding: .3rem .7rem; }
.ole-add i { margin-right: 5px; font-size: 11px; }

/* 끌어 옮기기 — 놓을 자리를 주색 선(앞·뒤)·옅은 바탕(안)으로 */
.ole-row.is-drop-before { box-shadow: inset 0 2px 0 var(--color-primary); }
.ole-row.is-drop-after { box-shadow: inset 0 -2px 0 var(--color-primary); }
.ole-row.is-drop-into { background: color-mix(in srgb, var(--color-primary) 12%, var(--ui-surface)); }
.ole-row.is-dragging, .ole-cat.is-dragging { opacity: .45; }

/* 붙여넣기·파일에서 가져오기 상자 */
.ole-panel { margin: 2px 0 14px; padding: 12px; border: 1px solid var(--ui-border-2); border-radius: 10px; background: var(--ui-surface); }
.ole-panel[hidden] { display: none; }
.ole-panel-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ui-text); }
.ole-panel-head i { font-size: 12px; color: var(--ui-soft); }
.ui-modal .ole-panel .ole-panel-note { margin: 0 0 8px; }
.ui-modal .ole-panel textarea.ole-paste { display: block; width: 100%; height: auto; min-height: 150px; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical; }
.ui-modal .ole-panel .ole-panel-hint { display: block; margin: 6px 0 0; font-size: 12px; color: var(--ui-soft); }
.ole-panel .ole-merge { margin-top: 12px; font-size: 12.5px; line-height: 1.6; }
.ole-panel .ole-merge[hidden] { display: none; }
.ole-panel-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ole-panel-foot .ui-segment { margin-right: auto; }
.ole-panel-foot .ui-text-button.ui-text-button { font-size: 13px; }

/* 하단 저장 안내 — 2단계에만 */
.ui-modal .ole-card .ui-modal-foot { align-items: center; gap: 8px; }
.ole-foot-note { margin: 0 auto 0 0; max-width: 380px; font-size: 12px; line-height: 1.5; color: var(--ui-muted); word-break: keep-all; }
.ole-foot-note[hidden] { display: none; }

/* 확인 창(작업이 날아가는 동작) — 편집 창 위에 겹친다. 버튼은 반씩(261003). 빨간 채움·경고 아이콘은 공용 .ui-modal-main.is-danger(ui-kit) */
.ui-modal.ole-confirm { z-index: 1250; }
.ui-modal.ole-confirm .ui-modal-card { width: 400px; }
.ui-modal.ole-confirm .ui-modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: auto; margin-left: 0; }
.ui-modal.ole-confirm .ui-modal-foot button { width: 100%; }

/* 조회 창(optionListViewer.js) — 편집 창 트리 행을 읽기 전용으로(원장 261008 미리보기 승인) */
.ui-modal .ui-modal-card.olv-card { width: 640px; }
.olv-card .ui-modal-body { padding-top: 6px; max-height: calc(92vh - 150px); }
.olv-card .ui-modal-lead { margin: 0 0 4px; }
.olv-meta { margin: 0 0 14px; font-size: 12.5px; color: var(--ui-soft); }
.olv-tree .ole-row { padding-left: calc(10px + var(--ole-depth, 0) * 24px); }
.olv-name { flex: 1; min-width: 0; padding: 0 8px; font-size: 13.5px; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olv-tree .ole-cat-row .olv-name { font-weight: 600; }
.olv-tree .ole-cat-row { cursor: pointer; }
.olv-tree .olv-item .olv-name { padding-left: 26px; }
/* 하위 항목이 있는 항목: 화살표 뒤 이름을 옆 항목 이름과 동일한 위치에(원장 261029 미리보기 승인) */
.olv-tree .olv-parent { cursor: pointer; }
.olv-tree .olv-parent .olv-name { padding-left: 4px; }
.olv-tree .ole-row:last-child, .olv-tree > :last-child .ole-row:last-child { border-bottom: 0; }