.kr-directory {
margin: 0 auto var(--wp--preset--spacing--60, 3rem);
max-width: min(90vw, 70rem);
}
.kr-directory__search {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0 auto var(--wp--preset--spacing--40, 2rem);
max-width: min(90vw, 32rem);
}
.kr-directory__label {
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.85rem;
color: #4b5563;
}
.kr-directory__input {
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kr-directory__input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
outline: none;
}
.kr-directory__list {
list-style: none;
margin: 0 auto var(--wp--preset--spacing--60, 3rem);
padding: 0;
display: grid;
gap: var(--wp--preset--spacing--40, 2rem);
max-width: min(90vw, 70rem);
}
.kr-directory__item {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kr-directory__item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.kr-directory__item-title {
margin: 0 0 0.75rem 0;
font-size: clamp(1.3rem, 1.5vw + 1rem, 1.8rem);
}
.kr-directory__item-title a {
color: inherit;
text-decoration: none;
}
.kr-directory__item-title a:hover {
color: #1d4ed8;
}
.kr-directory__item-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.kr-directory__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background-color: #eef2ff;
color: #4338ca;
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}
.kr-directory__item-excerpt {
margin: 0;
color: #4b5563;
line-height: 1.6;
}
.kr-directory__item-actions {
margin-top: 1rem;
}
.kr-directory__item-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
color: #1d4ed8;
text-decoration: none;
}
.kr-directory__item-link:hover {
color: #1e3a8a;
text-decoration: underline;
}
.kr-directory__empty {
padding: 1rem 1.25rem;
border-radius: 8px;
background: #f3f4f6;
color: #4b5563;
font-style: italic;
text-align: center;
}
@media (max-width: 600px) {
.kr-directory__item {
padding: 1.25rem;
}
.kr-directory__item-meta {
flex-direction: column;
align-items: flex-start;
}
.kr-directory__badge {
border-radius: 6px;
}
} a {
color: #2563eb; font-weight: bold; text-decoration: none; padding: 2px 6px; border-radius: 6px; transition: all 0.3s ease; } a:hover {
color: #ffffff; background-color: #1d4ed8; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); text-decoration: none; transform: translateY(-2px); } a:visited {
color: #1e40af; }