/* Native UI subtrees own their styles, including portals and print hosts. */
@scope (:root:not([data-kms-ui="native"])) to ([data-kms-ui="native"]) {
/**
 * 파일명: kmsguidetooltip.css
 * 설명  : 사내 페이지 공용 "사용방법 가이드 + 항목 도움말('?') 툴팁" 모듈 스타일.
 *
 *  [목적]
 *   여러 페이지에서 동일한 CSS/UI/UX 로 가이드 모달과 도움말 툴팁을 쓸 수 있도록 모듈화한 것.
 *   페이지마다 같은 스타일/스크립트를 중복 정의하지 않기 위해 한 곳(ctl)에서 관리한다.
 *
 *  [충돌 방지 — 특수 접두사 규약]
 *   모든 클래스/식별자는 반드시 `kmsguidetooltip-` 접두사를 쓴다.
 *   (일반명 .hint / .modal / .btn / .g-tag 등은 사내 다른 페이지에서 이미 다른 의미로
 *    쓰이고 있어 전역 충돌이 발생한다. 본 모듈은 자체 오버레이/버튼/배지를 가지며
 *    페이지의 .modal·.btn·closeModal 등 어떤 것에도 의존하지 않는다.)
 *   도움말 속성도 네임스페이스: data-kmsguidetooltip-tip="설명문" 사용.
 *   본문 타이포(h3/h4/ul/code 등)는 .kmsguidetooltip-body 하위로 한정되어 외부에 영향 없음.
 *
 *  [사용법] 페이지 <head> 에 아래 두 줄 추가:
 *     <link rel="stylesheet" href="/ctl/kmsguidetooltip.css">
 *     <script src="/ctl/kmsguidetooltip.js"></script>
 *   · '?' 도움말 : <span class="kmsguidetooltip-hint" data-kmsguidetooltip-tip="설명">?</span>
 *   · 안내 열기  : <button class="kmsguidetooltip-btn" onclick="kmsguidetooltip.open('가이드모달ID')">
 *                    <span class="kmsguidetooltip-btn-ico">?</span>사용방법 보기</button>
 *   · 안내 모달  : <div id="가이드모달ID" class="kmsguidetooltip-overlay"> … (kmsguidetooltip.js 주석 참조)
 *
 *  [유지보수 — 공통 규약(중요)]
 *   ★ 이 모듈을 쓰는 각 페이지는, 그 페이지의 코드(검색조건·입력항목·버튼·권한·결재흐름 등)가 바뀌면
 *      해당 항목의 '?' 툴팁(data-kmsguidetooltip-tip)과 「사용방법/작성방법 보기」 가이드 모달 내용을
 *      반드시 함께 갱신해야 한다. (코드와 안내가 어긋나면 사용자가 오해한다.)
 *   · 색상/여백을 바꾸면 본 모듈을 쓰는 모든 페이지에 일괄 반영된다.
 *   · FontAwesome 등 외부 아이콘 폰트에 의존하지 않는다(아이콘은 텍스트 '?').
 */

/* ── 항목별 도움말 '?' 배지 ───────────────────────────────────────────── */
.kmsguidetooltip-hint {
    display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px; border-radius:50%;
    background:#adb5bd; color:#fff; font-size:10px; font-weight:700;
    margin-left:4px; cursor:help; vertical-align:middle;
}
.kmsguidetooltip-hint:hover { background:#4a90e2; }

/* 말풍선 — JS 가 <body> 에 fixed 로 띄운다(모달/스크롤 overflow 에 잘리지 않게).
   z-index 는 페이지 모달(보통 ≤10000)보다 확실히 위. */
.kmsguidetooltip-bubble {
    position:fixed; max-width:270px; background:#2c3e50; color:#fff;
    padding:8px 11px; border-radius:7px; font-size:11.5px; font-weight:400;
    line-height:1.55; z-index:2147483000; box-shadow:0 6px 18px rgba(0,0,0,.3);
    pointer-events:none; white-space:normal;
}

/* ── 「사용방법 보기」 버튼 ─────────────────────────────────────────────── */
.kmsguidetooltip-btn {
    padding:6px 12px; background:#eef4ff; border:1px solid #4a90e2; color:#2c6fc6;
    cursor:pointer; font-size:12px; border-radius:2px; font-weight:bold;
    display:inline-flex; align-items:center; line-height:1.2;
}
.kmsguidetooltip-btn:hover { background:#dbe8ff; }
.kmsguidetooltip-btn-ico {
    display:inline-block; width:15px; height:15px; line-height:15px; border-radius:50%;
    background:#4a90e2; color:#fff; font-size:10px; text-align:center; margin-right:5px; font-weight:700;
}

/* ── 가이드 모달(자체 오버레이) ───────────────────────────────────────── */
.kmsguidetooltip-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:2147482000; align-items:flex-start; justify-content:center;
    padding:24px; overflow:auto;
}
.kmsguidetooltip-overlay.kmsguidetooltip-show { display:flex; }
.kmsguidetooltip-box {
    background:#fff; border-radius:10px; width:100%; max-width:820px;
    box-shadow:0 10px 40px rgba(0,0,0,.25); display:flex; flex-direction:column;
    max-height:calc(100vh - 48px);
}
.kmsguidetooltip-head {
    padding:14px 18px; border-bottom:1px solid #e9ecef; font-size:15px; font-weight:700;
    color:#2c3e50; display:flex; justify-content:space-between; align-items:center;
}
.kmsguidetooltip-head-ico {
    display:inline-block; width:18px; height:18px; line-height:18px; border-radius:50%;
    background:#4a90e2; color:#fff; font-size:12px; text-align:center; margin-right:6px; font-weight:700;
}
.kmsguidetooltip-close { cursor:pointer; color:#888; font-size:22px; line-height:1; }
.kmsguidetooltip-close:hover { color:#000; }
.kmsguidetooltip-foot { padding:12px 18px; border-top:1px solid #e9ecef; display:flex; justify-content:flex-end; gap:8px; }
.kmsguidetooltip-foot-btn { padding:6px 14px; background:#4a90e2; color:#fff; border:none; border-radius:2px; cursor:pointer; font-size:12px; }
.kmsguidetooltip-foot-btn:hover { background:#357abd; }

/* ── 가이드 본문 서식 (모두 .kmsguidetooltip-body 하위로 한정) ──────────── */
.kmsguidetooltip-body { padding:18px; overflow:auto; font-size:13px; line-height:1.7; color:#333; }
.kmsguidetooltip-body h3 {
    font-size:15px; margin:20px 0 8px; padding-bottom:5px;
    border-bottom:2px solid #4a90e2; color:#2c3e50; scroll-margin-top:8px;
}
.kmsguidetooltip-body h3:first-of-type { margin-top:0; }
.kmsguidetooltip-body h4 { font-size:13.5px; margin:12px 0 4px; color:#2c6fc6; }
.kmsguidetooltip-body ul { margin:4px 0 8px; padding-left:20px; }
.kmsguidetooltip-body li { margin:3px 0; }
.kmsguidetooltip-body p { margin:6px 0; }
.kmsguidetooltip-body code { background:#eef2ff; color:#2a4cd0; padding:1px 5px; border-radius:4px; font-size:12px; }

/* 목차(index) */
.kmsguidetooltip-toc { background:#f4f8ff; border:1px solid #cfe0ff; border-radius:8px; padding:12px 14px; margin:0 0 6px; }
.kmsguidetooltip-toc b { display:block; margin-bottom:6px; color:#2c3e50; }
.kmsguidetooltip-toc ol { margin:0; padding-left:20px; columns:2; }
.kmsguidetooltip-toc a { color:#2c6fc6; text-decoration:none; cursor:pointer; }
.kmsguidetooltip-toc a:hover { text-decoration:underline; }

/* 안내 박스 / 강조(주의) 박스 */
.kmsguidetooltip-note { background:#f8f9fb; border:1px solid #e9ecef; border-radius:8px; padding:10px 12px; margin:8px 0; }
.kmsguidetooltip-tip  { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:10px 12px; margin:8px 0; color:#9a3412; }

/* 표 */
.kmsguidetooltip-tbl { width:100%; border-collapse:collapse; margin:6px 0; font-size:12.5px; }
.kmsguidetooltip-tbl th, .kmsguidetooltip-tbl td { border:1px solid #dee2e6; padding:6px 8px; text-align:left; vertical-align:top; }
.kmsguidetooltip-tbl th { background:#f1f3f7; white-space:nowrap; }

/* 컬러 태그(배지) — 의미는 페이지가 정하고 색만 고른다.
   예) 공지=teal, 영상=green, 설문=purple, 평가=orange, 권한=gray, 동작=blue, 주의=red */
.kmsguidetooltip-tag { display:inline-block; padding:1px 7px; border-radius:10px; color:#fff; font-size:11px; font-weight:700; margin-right:4px; white-space:nowrap; }
.kmsguidetooltip-tag-teal   { background:#17a2b8; }
.kmsguidetooltip-tag-green  { background:#0d9488; }
.kmsguidetooltip-tag-purple { background:#6f42c1; }
.kmsguidetooltip-tag-orange { background:#e8590c; }
.kmsguidetooltip-tag-gray   { background:#6c757d; }
.kmsguidetooltip-tag-blue   { background:#4a90e2; }
.kmsguidetooltip-tag-red    { background:#dc3545; }

.kms-guide-search{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px;background:#f8fafc;border-bottom:1px solid #cbd5e1}.kms-guide-search input{height:34px;min-width:160px;flex:1 1 280px;border:1px solid #cbd5e1;border-radius:2px;padding:0 10px}.kms-guide-search-actions,.kms-guide-keywords{display:flex;gap:6px;flex-wrap:wrap}.kms-guide-keywords{flex-basis:100%}.kms-guide-search button{border:1px solid #cbd5e1;border-radius:2px;background:white;color:#334155;min-height:30px;padding:0 9px;cursor:pointer}.kms-guide-keywords button{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.kms-guide-mark{background:#fef08a;color:#0f172a;scroll-margin-top:130px}.kms-guide-mark.is-current{outline:2px solid #2563eb}.kms-guide-dictionary dt{font-weight:700;color:#1e3a8a}.kms-guide-dictionary dd{margin:4px 0 12px;color:#475569}[data-kms-tip-pruned="1"]{display:none!important}

/* Help topics are neutral tags, independent of action-button semantics. */
.kms-guide-keywords .kms-guide-chip{display:inline-flex!important;align-items:center;justify-content:center;height:28px!important;min-height:28px!important;max-height:28px!important;border:1px solid #cbd5e1!important;border-radius:2px!important;background:#f8fafc!important;color:#475569!important;padding:0 9px!important;font-size:12px!important;font-weight:500!important;line-height:1!important;box-shadow:none!important}
.kms-guide-keywords .kms-guide-chip:hover,.kms-guide-keywords .kms-guide-chip.is-active{background:#eff6ff!important;border-color:#2563eb!important;color:#1d4ed8!important}
.kms-guide-keywords .kms-guide-chip:focus-visible{outline:2px solid #2563eb;outline-offset:2px}

/* Shared guide popup chrome; document scrolling keeps both sticky bars together. */
body.kmsguidetooltip-popup{margin:0;background:#fff;color:#1e293b;font:13px/1.7 Pretendard,"Noto Sans KR",system-ui,sans-serif}
.kmsguidetooltip-popup.kmsguidetooltip-popup > .kmsguidetooltip-head{position:sticky;top:0;z-index:20;height:48px;box-sizing:border-box;padding:0 16px;background:linear-gradient(135deg,#16243b 0%,#1e3557 55%,#284773 100%)!important;color:#f8fafc;border-bottom:1px solid #334155}
.kmsguidetooltip-popup .kmsguidetooltip-head-ico{border-radius:2px;background:#2563eb;color:#fff}
.kmsguidetooltip-popup .kmsguidetooltip-head .kmsguidetooltip-close{background:transparent!important;border:none!important;color:#f8fafc!important;cursor:pointer}
.kmsguidetooltip-popup > .kmsguidetooltip-body{overflow:visible;background:#fff;color:#1e293b;min-height:calc(100vh - 110px);box-sizing:border-box}
.kmsguidetooltip-popup .kms-guide-search-bar{position:sticky;top:48px;z-index:15;margin:-18px -18px 12px;padding:10px 18px;background:#f8fafc;border-bottom:1px solid #cbd5e1}
.kmsguidetooltip-popup .kmsguidetooltip-toc{background:#f8fafc;border:1px solid #cbd5e1;border-left:3px solid #2563eb;border-radius:2px}
.kmsguidetooltip-popup .kmsguidetooltip-body :is(code,kbd){background:#eff6ff;color:#1d4ed8;border-radius:2px;padding:2px 5px}
.kmsguidetooltip-popup .kmsguidetooltip-body table{border-collapse:collapse;width:100%;font-size:13px}
.kmsguidetooltip-popup .kmsguidetooltip-body :is(th,td){border:1px solid #cbd5e1;padding:7px 10px}
.kmsguidetooltip-popup .kmsguidetooltip-body th{background:#f1f5f9;color:#1e293b}
.kmsguidetooltip-popup .kmsguidetooltip-note{background:#eff6ff;border:1px solid #bfdbfe;border-left:3px solid #2563eb;border-radius:2px;color:#1e3a8a}
.kmsguidetooltip-popup .kms-guide-dictionary{border:1px solid #cbd5e1;border-left:3px solid #2563eb;border-radius:2px;background:#f8fafc;padding:12px;margin-top:18px}
.kmsguidetooltip-popup .kms-guide-content :is(h2,h3,h4,[id]){scroll-margin-top:180px}
.kmsguidetooltip-popup > .kmsguidetooltip-popup-foot{position:sticky;bottom:0;z-index:15;background:#f8fafc;border-top:1px solid #cbd5e1;padding:10px 18px;display:flex;justify-content:flex-end;box-sizing:border-box}
@media(max-width:480px){.kmsguidetooltip-popup .kms-guide-search-bar input{flex-basis:100%;width:100%;min-width:0}.kmsguidetooltip-popup .kmsguidetooltip-toc ol{columns:1}}

}