.catalog-search { position: relative; }
.diary-search-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 40;
display: none;
box-sizing: border-box;
padding: 6px;
max-height: 380px; overflow-y: auto;
overscroll-behavior: contain;
background: #fffdf8;
border: 1px solid #ddd5c7;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(80, 50, 20, .16), 0 2px 6px rgba(0, 0, 0, .06);
text-align: left;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, .18) transparent;
}
.diary-search-panel.on { display: block; }
.diary-search-panel::-webkit-scrollbar { width: 4px; background: transparent; }
.diary-search-panel::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .18);
border-radius: 4px;
} .ds-item {
display: block;
padding: 8px 10px;
border-radius: 7px;
border-bottom: 1px solid #f2ebdd;
text-decoration: none !important;
color: inherit;
transition: background .12s;
}
.ds-item:last-of-type { border-bottom: none; }
.ds-item:hover,
.ds-item.on { background: #f6efe2; }
.ds-title {
display: block;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
color: #4a3826;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-meta {
display: block;
margin-top: 1px;
font-size: 11px;
line-height: 1.4;
letter-spacing: .5px;
color: #a08a6a;
} .ds-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 3px;
font-size: 12px;
line-height: 1.6;
color: #6b6252;
}
.ds-title mark,
.ds-excerpt mark {
padding: 0 1px;
background: #ffe9a8;
color: inherit;
border-radius: 2px;
} .ds-foot {
display: block;
margin-top: 4px;
padding: 7px 4px 3px;
border-top: 1px dashed #e6ddcc;
font-size: 11.5px;
letter-spacing: .5px;
text-align: center;
color: #8b6b4a;
text-decoration: none !important;
}
.ds-foot:hover {
color: #6b4a28;
border-bottom: none;
} .ds-state {
padding: 12px 10px;
font-size: 12px;
text-align: center;
color: #a08a6a;
} .ds-spin {
display: inline-block;
width: 26px;
height: 2px;
margin-right: 7px;
vertical-align: middle;
border-radius: 2px;
background: linear-gradient(90deg, #8b6b4a 0%, #d8c39a 50%, #8b6b4a 100%);
background-size: 200% 100%;
animation: ds-flow 1s linear infinite;
}
@keyframes ds-flow {
from { background-position: 0 0; }
to   { background-position: -200% 0; }
} @media (max-width: 768px) {
.diary-search-panel {
top: calc(100% + 4px);
padding: 4px;
max-height: 60vh;
border-radius: 8px;
}
.ds-item       { padding: 7px 9px; }
.ds-title      { font-size: 12.5px; }
.ds-excerpt    { font-size: 11.5px; }
.ds-foot       { font-size: 11px; }
}