/**
 * SearchSyntaxHint — 검색창에 AND/OR 문법을 알려주는 말풍선.
 *
 * 패널은 document.body 에 붙고 좌표로만 배치된다. 검색창을 감싼 래퍼가 화면마다
 * 제각각(.search-wrapper, .input-group, d-flex 폼, .toolbar …)이라 그 안에 요소를
 * 끼워 넣으면 어딘가는 반드시 줄이 깨진다.
 *
 * 안쪽 선택자를 전부 `.solis-search-syntax` 아래로 스코프한 이유 — dark-mode.css 가
 * `[data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] div …` 로
 * 색을 광범위하게 지정한다. 클래스 하나짜리 선택자(0,1,0)는 그 (0,1,1) 규칙에
 * 밀려 글자색이 통째로 회색이 된다. <code> 를 쓰지 않는 것도 같은 이유로,
 * dark-mode.css 가 `[data-theme="light"] code` 에 !important 를 박아 두었다.
 *
 * 소스는 common/web/css/search-syntax-hint.css — 수정 후 frontend/web/css,
 * backend/web/css 양쪽에 복사한다.
 */

.solis-search-syntax {
    position: absolute;
    z-index: 1080; /* Bootstrap modal(1055) 위, tooltip 과 같은 층 */
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.5;
    color: #212529;
}

.solis-search-syntax[hidden] {
    display: none !important;
}

.solis-search-syntax .solis-search-syntax-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #495057;
}

.solis-search-syntax .solis-search-syntax-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.solis-search-syntax .solis-search-syntax-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

/* 색은 배경 대비 4.5:1 을 넘겨야 ContrastFixer 가 다시 칠하지 않는다. */
.solis-search-syntax .solis-search-syntax-code {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f3f5;
    color: #0a58ca;
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11.5px;
    white-space: nowrap;
}

.solis-search-syntax .solis-search-syntax-desc {
    color: #6c757d;
}

.solis-search-syntax .solis-search-syntax-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eef0f2;
    color: #868e96;
    font-size: 11px;
}

.solis-search-syntax .solis-search-syntax-dismiss {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: #868e96;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.solis-search-syntax .solis-search-syntax-dismiss:hover {
    color: #495057;
}

/* 좁은 화면에서는 말풍선이 화면 밖으로 밀려나지 않게 폭을 줄인다. */
@media (max-width: 575.98px) {
    .solis-search-syntax {
        width: calc(100vw - 24px);
    }
}

/* ==================== 다크 모드 ==================== */

[data-theme="dark"] .solis-search-syntax,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax {
    border-color: #444;
    background: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .solis-search-syntax .solis-search-syntax-title,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-title {
    color: #ffffff;
}

[data-theme="dark"] .solis-search-syntax .solis-search-syntax-code,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-code {
    background: #2d2d2d;
    color: #4a9eff;
}

[data-theme="dark"] .solis-search-syntax .solis-search-syntax-desc,
[data-theme="dark"] .solis-search-syntax .solis-search-syntax-foot,
[data-theme="dark"] .solis-search-syntax .solis-search-syntax-dismiss,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-desc,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-foot,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-dismiss {
    color: #adb5bd;
}

[data-theme="dark"] .solis-search-syntax .solis-search-syntax-foot,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-foot {
    border-top-color: #333;
}

[data-theme="dark"] .solis-search-syntax .solis-search-syntax-dismiss:hover,
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto .solis-search-syntax .solis-search-syntax-dismiss:hover {
    color: #e0e0e0;
}