.snls-box { position: relative; max-width: 560px; width: 100%; }
.snls-form { display: flex; gap: 0; }
.snls-input {
flex: 1; padding: 10px 14px; font-size: 16px;
border: 1px solid #ccc; border-right: 0; border-radius: 6px 0 0 6px;
}
.snls-btn {
padding: 10px 16px; font-size: 16px; cursor: pointer;
border: 1px solid #ccc; border-radius: 0 6px 6px 0; background: #f5f5f5;
}
.snls-drop {
background: #fff; border: 1px solid #ddd; border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 420px; overflow-y: auto;
} .snls-drop-floating {
position: fixed; z-index: 99999;
} .snls-box.snls-dark .snls-input {
background: #141414; color: #f0f0f0; border-color: #3a3a3a;
}
.snls-box.snls-dark .snls-input::placeholder { color: #8a8a8a; }
.snls-box.snls-dark .snls-btn {
background: #1f1f1f; color: #f0f0f0; border-color: #3a3a3a;
}
.snls-box.snls-dark .snls-btn:hover { background: #2b2b2b; }
.snls-drop-floating.snls-dark-drop,
.snls-box.snls-dark .snls-drop {
background: #161616; border-color: #3a3a3a;
box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.snls-drop-floating.snls-dark-drop .snls-item,
.snls-box.snls-dark .snls-item { border-color: #2c2c2c; }
.snls-drop-floating.snls-dark-drop .snls-item:hover,
.snls-box.snls-dark .snls-item:hover { background: #222; }
.snls-drop-floating.snls-dark-drop .snls-title,
.snls-box.snls-dark .snls-title { color: #f0f0f0; }
.snls-drop-floating.snls-dark-drop .snls-meta,
.snls-box.snls-dark .snls-meta { color: #9a9a9a; }
.snls-drop-floating.snls-dark-drop .snls-empty,
.snls-box.snls-dark .snls-empty { color: #9a9a9a; } .snls-dark-page .snls-card-link { border-color: #2c2c2c; }
.snls-dark-page .snls-card-link:hover { background: #1c1c1c; }
.snls-dark-page .snls-title { color: #f0f0f0; }
.snls-dark-page .snls-date { color: #9a9a9a; }
.snls-dark-page .snls-error, .snls-dark-page .snls-hint,
.snls-dark-page .snls-count { color: #9a9a9a; }
.snls-item {
display: flex; gap: 12px; padding: 10px 12px; text-decoration: none; color: inherit;
border-bottom: 1px solid #f0f0f0; align-items: center;
}
.snls-item:hover { background: #f8f8f8; }
.snls-item-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.snls-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snls-sec {
display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: #b00; align-self: flex-start;
}
.snls-item-title { font-size: 14px; line-height: 1.35; }
.snls-date { font-size: 12px; color: #777; }
.snls-empty { padding: 14px; color: #777; font-size: 14px; } .snls-results-page { padding: 24px 16px; }
.snls-results-inner { max-width: 860px; margin: 0 auto; }
.snls-results-heading { font-size: 24px; margin: 0 0 16px; }
.snls-results-page .snls-box { margin-bottom: 20px; }
.snls-count { color: #777; font-size: 14px; }
.snls-list { display: flex; flex-direction: column; gap: 4px; }
.snls-card-link { display: flex; gap: 14px; padding: 12px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid #eee; }
.snls-card-link:hover { background: #fafafa; }
.snls-thumb { width: 160px; height: 100px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.snls-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.snls-title { font-size: 17px; margin: 0; line-height: 1.4; }
.snls-error, .snls-hint { color: #666; padding: 20px 0; }
@media (max-width: 560px) {
.snls-thumb { width: 110px; height: 72px; }
.snls-title { font-size: 15px; }
}