/* 이펙터 · 2026-10 제작 · 사이트 검색 결과 스타일 */

.sr-wrap { max-width: 56.25rem; margin: 2rem auto 0; }
@media (min-width: 992px) { .sr-wrap { margin-top: 3rem; } }

.sr-form { display: flex; align-items: center; gap: .75rem; max-width: 26.25rem; margin-inline: auto; padding-bottom: .5rem; border-bottom: 1px solid var(--ss-weak); }
.sr-form .ss-ico { width: 1.25rem; height: 1.25rem; color: var(--ss-muted); }
.sr-form input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: 600 1.125rem/2.5rem var(--ss-font); color: var(--ss-ink); }
.sr-form input::placeholder { color: var(--ss-muted); }
.sr-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sr-form:focus-within { border-bottom-color: var(--ss-ink); }
@media (min-width: 992px) { .sr-form { gap: 1.25rem; padding-bottom: .75rem; } .sr-form input { font-size: 1.375rem; } }

.sr-msg { margin: 2rem 0 0; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--ss-muted); }
.sr-msg:empty { display: none; }
.sr-msg b { font-weight: 700; color: var(--ss-ink); }
.sr-msg-count { margin: 2.5rem 0 0; padding-bottom: 1rem; border-bottom: 2px solid var(--ss-ink); text-align: left; color: var(--ss-text); }
@media (min-width: 992px) { .sr-msg { margin-top: 2.5rem; font-size: 1.125rem; } .sr-msg-count { margin-top: 3.5rem; } }
.sr-msg-count + .sr-list:not(:empty) { margin-top: 0; }

.sr-list { margin: 0; padding: 0; list-style: none; }
.sr-list:not(:empty) { margin-top: 2rem; }
.sr-item { border-bottom: 1px solid var(--ss-line); }
.sr-item-a { display: block; padding: 1.5rem .25rem; color: inherit; }
.sr-item-a:hover { color: inherit; }
.sr-item-title { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); word-break: keep-all; }
.sr-item-path { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--ss-weak); }
.sr-item-snip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .5rem; font-size: .9375rem; line-height: 1.6; color: var(--ss-text-2); word-break: keep-all; overflow-wrap: anywhere; }
.sr-item mark { padding: 0; background: var(--ss-point-soft); color: var(--ss-ink); font-weight: 600; }
.sr-item-a:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: -2px; }
@media (hover: hover) { .sr-item-a:hover .sr-item-title { text-decoration: underline; text-underline-offset: .25rem; } }
@media (min-width: 768px) { .sr-item-a { padding: 1.75rem .5rem; } .sr-item-title { font-size: 1.375rem; } .sr-item-snip { font-size: 1rem; } }
@media (min-width: 992px) { .sr-list:not(:empty) { margin-top: 2.5rem; } .sr-item-a { padding: 2rem .5rem; } .sr-item-title { font-size: 1.5rem; } .sr-item-path { font-size: .9375rem; } }

.sr-reco { margin-top: 2.5rem; text-align: center; }
.sr-reco[hidden] { display: none; }
.sr-reco-t { margin: 0 0 1rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ss-muted); }
.sr-reco-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.sr-reco-list a { display: inline-block; padding: .25rem 0; font-size: 1rem; line-height: 1.5; color: var(--ss-ink); border-bottom: 1px solid transparent; }
.sr-reco-list a:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
@media (hover: hover) { .sr-reco-list a:hover { border-bottom-color: var(--ss-ink); } }
@media (min-width: 992px) { .sr-reco { margin-top: 3rem; } .sr-reco-t { font-size: 1rem; } .sr-reco-list a { font-size: 1.125rem; } }

.sr-page .cm-pg[hidden] { display: none; }