/*
 * 원내 처방 추가·수정 모달 (PLAN 260920 만드는 자리 §11, 원장 261003 미리보기 확정).
 * 규칙: docs/30_Architecture/모달 단계 흐름과 하단 버튼 — 단계 표시·이동·하단 버튼.
 *
 * 틀(머리·단계 표시·입력란·하단·배경막)은 공용 ui-kit.css .ui-modal-* (PLAN 261005-2 W2).
 * 이 모달만의 규칙은 #addModal 아래에 둔다. 다크 전역 `body[data-theme="dark"] *`·`input`·`button` 이
 * 테두리·글자색을 덮는다(특이도 0,1,1) — id 하나로 이긴다(미리보기와 같은 범위).
 * 펼친 선택 목록(.fam-pop)도 모달 안(#addModal)에 붙인다.
 * 색은 전부 --color-* 토큰이다(다크·라이트가 토큰에서 갈린다).
 */

#addModal .fam-lock { margin: 8px 24px 0; padding: 8px 12px; border-radius: 8px; font-size: .8rem; line-height: 1.5;
    color: var(--color-warning); background: var(--color-warning-soft); }
#addModal .fam-lock[hidden] { display: none; }

#addModal .fam-body { flex: 1; overflow-y: auto; }
#addModal .fam-lead { margin: 0 0 16px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--color-text-primary); }
#addModal .fam-lead small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--color-text-subtle); }

#addModal .fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 입력란 사이 간격은 격자의 gap 이 맡는다 — 공용 .ui-modal-field + .ui-modal-field 의 위 여백을 쓰지 않는다 */
#addModal .ui-modal-field + .ui-modal-field { margin-top: 0; }
#addModal .fam-span2 { grid-column: 1 / -1; }
#addModal .ui-modal-label .req { margin-left: 2px; color: var(--ui-danger); }
#addModal textarea.ui-modal-input { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* 자체 선택 목록 — 브라우저 기본 목록은 펼친 너비를 입력란에 맞출 수 없다 */
#addModal .fam-select.fam-select { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; cursor: pointer; color: var(--color-text-primary); }
#addModal .fam-select.is-empty.is-empty { color: var(--color-text-subtle); }
#addModal .fam-select i { font-size: .7rem; color: var(--color-text-subtle); transition: transform .15s; }
#addModal .fam-select[aria-expanded="true"] { border-color: var(--color-primary); }
#addModal .fam-select[aria-expanded="true"] i { transform: rotate(180deg); }
#addModal .fam-select:disabled { cursor: default; opacity: .6; }
#addModal .fam-pop {
    position: fixed; z-index: 3000; box-sizing: border-box; max-height: 260px; overflow-y: auto; padding: 4px;
    background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-overlay);
}
#addModal .fam-opt.fam-opt {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 10px;
    border: 0; border-radius: 7px; background: transparent; color: var(--color-text-primary);
    font: inherit; font-size: .86rem; text-align: left; cursor: pointer;
}
#addModal .fam-opt.fam-opt:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
#addModal .fam-opt.is-sel { font-weight: 600; }
#addModal .fam-opt .ck { width: 12px; font-size: .72rem; color: var(--primary-color); }
#addModal .fam-opt.is-new.is-new { color: var(--color-text-muted); }
#addModal .fam-sep { height: 1px; margin: 4px 6px; background: var(--color-border-default); }

/* 구성 약재 표 */
#addModal .fam-list { border: 1.5px solid var(--color-border-default); border-radius: 10px; }
#addModal .fam-list-head,
#addModal .fam-row { display: grid; grid-template-columns: 28px 1fr 96px 128px 32px; align-items: center; column-gap: 8px; padding: 0 8px 0 4px; }
#addModal .fam-list-head { height: 32px; border-bottom: 1px solid var(--color-border-default); font-size: .72rem; font-weight: 600; color: var(--color-text-subtle); }
#addModal .fam-list-head .r { text-align: right; padding-right: 8px; }
#addModal .fam-row { height: 40px; border-bottom: 1px solid var(--color-border-default); }
#addModal .fam-row .num { font-size: .75rem; color: var(--color-text-subtle); text-align: right; }
#addModal .fam-cell {
    width: 100%; height: 30px; box-sizing: border-box; padding: 0 8px;
    border: 1px solid transparent; border-radius: 7px; background: transparent;
    color: var(--color-text-primary); font: inherit; font-size: .86rem;
}
#addModal .fam-cell:hover:not(:disabled) { border-color: var(--color-border-default); }
#addModal .fam-cell:focus { outline: none; border-color: var(--color-primary); }
#addModal .fam-cell::placeholder { color: var(--color-text-subtle); }
#addModal .fam-cell:disabled { cursor: default; }
#addModal .fam-pick { position: relative; }
#addModal .fam-dose { position: relative; }
#addModal .fam-dose .fam-cell { padding-right: 22px; text-align: right; }
#addModal .fam-dose span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .86rem; color: var(--color-text-muted); pointer-events: none; }
#addModal .fam-del.fam-del {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--color-text-subtle); cursor: pointer;
}
#addModal .fam-del.fam-del:hover:not(:disabled) { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 12%, transparent); }
#addModal .fam-del:disabled { visibility: hidden; }
#addModal .fam-add-row.fam-add-row {
    display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center;
    width: 100%; height: 38px; padding: 0 8px 0 4px; border: 0; border-radius: 0 0 8.5px 8.5px;
    background: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
    color: var(--color-text-muted); font: inherit; font-size: .78rem; font-weight: 500; line-height: 1; cursor: pointer;
}
#addModal .fam-add-row.fam-add-row:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); color: var(--color-text-primary); }
#addModal .fam-add-row .ic { display: block; text-align: right; font-size: .7rem; line-height: 1; }
#addModal .fam-add-row .tx { display: block; text-align: left; padding-left: 9px; line-height: 1; }
#addModal .fam-add-row[hidden] { display: none; }

/* 펼친 검색 결과 — 약재·출전 */
#addModal .fam-drop {
    position: fixed; z-index: 3000; box-sizing: border-box; padding: 4px;
    max-height: 260px; overflow-y: auto;
    background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-overlay);
}
#addModal .fam-drop[hidden] { display: none; }
#addModal .fam-drop-empty { padding: 8px 10px; font-size: .8rem; color: var(--color-text-subtle); }
#addModal .fam-drop-group { display: flex; align-items: center; gap: 6px; padding: 6px 10px 4px; font-size: .72rem; color: var(--color-text-subtle); }
#addModal .fam-drop-item.fam-drop-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
    color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer;
}
#addModal .fam-drop-item.fam-drop-item:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
#addModal .fam-drop-item .t { font-size: .88rem; }
#addModal .fam-drop-item .s { font-size: .75rem; color: var(--color-text-subtle); }
#addModal .fam-drop-item .badge { margin-left: 6px; font-size: .7rem; color: var(--color-text-muted); }
#addModal .fam-drop-item mark,
#addModal .fam-hit mark,
#addModal .fam-ctx-row mark {
    background: color-mix(in srgb, var(--color-warning) 30%, transparent); color: inherit; border-radius: 2px;
}
#addModal .fam-drop-act.fam-drop-act {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 0; border-radius: 7px; background: transparent; color: var(--color-text-muted);
    font: inherit; font-size: .84rem; text-align: left; cursor: pointer;
}
#addModal .fam-drop-act.fam-drop-act:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); color: var(--color-text-primary); }
#addModal .fam-drop-act i { font-size: .75rem; }
#addModal .fam-link-item.fam-link-item {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; box-sizing: border-box; padding: 10px;
    border: 0; border-radius: 7px; background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer;
}
#addModal .fam-link-item.fam-link-item:hover { background: color-mix(in srgb, var(--color-text-primary) 12%, transparent); }
#addModal .fam-link-item .t { font-size: .88rem; }
#addModal .fam-link-item .s { margin-left: 6px; font-size: .75rem; color: var(--color-text-subtle); }
#addModal .fam-link-item .loc { font-size: .72rem; color: var(--color-text-subtle); }
#addModal .fam-link-item .q { display: block; padding: 8px 10px; border-radius: 7px; background: var(--color-surface-raised); }
#addModal .fam-link-item .act { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--color-text-muted); }

/* 검색창 — 돋보기·지우기 × 하나(브라우저 자체 × 는 감춘다) */
#addModal .fam-search { position: relative; }
#addModal .fam-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .82rem; color: var(--color-text-subtle); pointer-events: none; }
#addModal .fam-search .ui-modal-input { padding: 0 34px; }
#addModal .fam-search .ui-modal-input.is-link { font-size: .8rem; color: var(--color-text-muted); }
/* 휴대폰 폭은 공용 입력란과 같이 16px(아이폰 사파리 입력란 확대 방지, 원장 261016) */
@media (max-width: 640px) { #addModal .fam-search .ui-modal-input.is-link { font-size: 16px; } }
#addModal .fam-search input[type="search"]::-webkit-search-cancel-button,
#addModal .fam-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
#addModal .fam-clear.fam-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
    border: 0; border-radius: 7px; background: transparent; color: var(--color-text-subtle); font-size: .8rem; cursor: pointer;
}
#addModal .fam-clear.fam-clear:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--color-text-primary); }
#addModal .fam-clear[hidden] { display: none; }

/* 출전 — 고른 서적 */
#addModal .fam-chosen {
    display: flex; align-items: center; gap: 10px; height: 42px; box-sizing: border-box; padding: 0 2px 0 12px;
    border: 1.5px solid var(--color-border-default); border-radius: 10px;
}
#addModal .fam-chosen .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .88rem; color: var(--color-text-primary); }
#addModal .fam-chosen .t small { margin-left: 6px; font-size: .75rem; color: var(--color-text-subtle); }
#addModal .fam-chosen .lib { font-size: .75rem; color: var(--color-text-muted); white-space: nowrap; }

/* 관련 문구 */
#addModal .fam-serif { font-family: 'Noto Serif KR', serif; }
#addModal .fam-cites { display: flex; flex-direction: column; gap: 8px; }
#addModal .fam-cite {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px 2px 10px 12px;
    border: 1.5px solid var(--color-border-default); border-radius: 10px;
}
#addModal .fam-cite .loc { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--color-text-subtle); }
#addModal .fam-cite .loc a { color: var(--color-text-subtle); text-decoration: none; }
#addModal .fam-cite .loc a:hover { color: var(--color-text-primary); }
#addModal .fam-cite .o,
#addModal .fam-ctx-row .o,
#addModal .fam-link-item .q .o {
    font-size: .84rem; line-height: 1.6; color: var(--color-text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#addModal .fam-cite .o { grid-column: 1; }
#addModal .fam-cite .fam-del { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: -5.8px; }
#addModal .fam-cite-add.fam-cite-add {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px;
    border: 1.5px dashed var(--color-border-default); border-radius: 10px; background: transparent;
    color: var(--color-text-muted); font: inherit; font-size: .78rem; font-weight: 500; cursor: pointer;
}
#addModal .fam-cite-add.fam-cite-add:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); color: var(--color-text-primary); }
#addModal .fam-cite-add[hidden],
#addModal .fam-picker[hidden],
#addModal .fam-cite-field[hidden] { display: none; }

#addModal .fam-picker { border: 1.5px solid var(--color-border-default); border-radius: 10px; overflow: hidden; }
#addModal .fam-picker-head { padding: 10px 10px 8px; }
#addModal .fam-picker-head .ui-modal-input { height: 38px; }
#addModal .fam-picker-res { max-height: 260px; overflow-y: auto; }
#addModal .fam-picker-msg { padding: 10px 12px; font-size: .8rem; color: var(--color-text-subtle); }
#addModal .fam-hit {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .75rem; color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border-default); background: color-mix(in srgb, var(--color-text-primary) 3%, transparent);
}
#addModal .fam-hit b { font-weight: 600; color: var(--color-text-primary); }
#addModal .fam-ctx-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; }
#addModal .fam-ctx-row:hover { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
#addModal .fam-ctx-row input { width: 15px; height: 15px; margin: 4px 0 0; accent-color: var(--color-primary); }
#addModal .fam-ctx-row.is-done { cursor: default; opacity: .55; }
#addModal .fam-picker-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--color-border-default); }
#addModal .fam-picker-foot small { font-size: .75rem; color: var(--color-text-subtle); }
#addModal .fam-picker-btns { display: flex; align-items: center; gap: 6px; }
#addModal .fam-pbtn.fam-pbtn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 64px; height: 30px; margin: 0; padding: 0 14px; border: 0; border-radius: 6px;
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
#addModal .fam-pbtn.is-close.is-close { background: transparent; color: color-mix(in srgb, var(--color-text-primary) 70%, transparent); }
#addModal .fam-pbtn.is-close.is-close:hover { color: var(--color-text-primary); background: color-mix(in srgb, currentColor 10%, transparent); }
#addModal .fam-pbtn.is-cite.is-cite { background: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-surface)); color: var(--color-text-primary); }
#addModal .fam-pbtn.is-cite.is-cite:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-surface)); }
#addModal .fam-pbtn:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    #addModal .fam-grid { grid-template-columns: 1fr; }
    #addModal .fam-list-head,
#addModal .fam-row { grid-template-columns: 22px 1fr 80px 104px 30px; column-gap: 4px; }
}