/* style.css */
/* Tailwind CSSでほとんどのスタイルを定義しているため、ここは補足的なスタイルです */

body {
    font-family: 'Inter', sans-serif; /* Tailwindのデフォルトに近いフォント */
}

/* ドラッグ中のアイテムの見た目を少し調整 */
.file-item.sortable-ghost {
    background-color: #e0f2fe; /* light-blue-100 */
    border-style: dashed;
}

.file-item.sortable-chosen { /* SortableJSで選択されたアイテム */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
}

/* --- 移植された要素のためのスタイル --- */
.gradient-text {
    background: linear-gradient(to right, #4F46E5, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-content-links {
    max-width: 960px;
    margin: 2rem auto; /* my-8 Tailwind相当 */
    padding: 1.5rem; /* p-6 Tailwind相当 */
    background-color: #fff; /* bg-white Tailwind相当 */
    border-radius: 0.5rem; /* rounded-lg Tailwind相当 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); /* shadow-md Tailwind相当 */
}
.site-content-links h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.25rem; /* mb-5 Tailwind相当 */
    color: #111827; /* text-gray-900 Tailwind相当 */
    font-weight: 500; /* medium Tailwind相当 */
    font-size: 1.5rem; /* text-2xl Tailwind相当 */
}
.site-content-links ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem; /* gap-4 Tailwind相当 */
}
@media (min-width: 640px) { /* sm breakpoint Tailwind相当 */
    .site-content-links ul {
        grid-template-columns: repeat(2, 1fr);
    }
}
.site-content-links li a {
    display: block;
    padding: 1rem; /* p-4 Tailwind相当 */
    background-color: #f3f4f6; /* bg-gray-100 Tailwind相当 */
    border: 1px solid #e5e7eb; /* border-gray-200 Tailwind相当 */
    border-radius: 0.375rem; /* rounded-md Tailwind相当 */
    text-decoration: none;
    color: #1d4ed8; /* text-blue-700 Tailwind相当 */
    font-weight: 500; /* medium Tailwind相当 */
    text-align: center;
    transition: all 0.3s ease;
}
.site-content-links li a:hover {
    background-color: #e5e7eb; /* bg-gray-200 Tailwind相当 */
    border-color: #d1d5db; /* border-gray-300 Tailwind相当 */
    transform: translateY(-2px);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1); /* shadow-sm Tailwind相当 */
}
/* --- 移植スタイルここまで --- */