/* カスタムスタイル */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* スクロールバーのスタイル */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}
/* datetime-localのプレースホルダー表示 */
input[type="datetime-local"]:not(:valid):before,
input[type="date"]:not(:valid):before {
    content: attr(placeholder);
    color: #9ca3af;
}

/* ダークモード対応 */
body.dark {
    background-color: #18181b;
    color: #f1f5f9;
}
body.dark .bg-white {
    background-color: #232329 !important;
}
body.dark .text-slate-800 {
    color: #f1f5f9 !important;
}
body.dark .text-slate-500 {
    color: #a1a1aa !important;
}
body.dark .border-slate-200 {
    border-color: #27272a !important;
}
body.dark .bg-slate-50 {
    background-color: #27272a !important;
}
body.dark .bg-slate-200 {
    background-color: #3f3f46 !important;
}
body.dark .bg-slate-300 {
    background-color: #52525b !important;
}
body.dark .bg-slate-800 {
    background-color: #18181b !important;
}
body.dark .text-slate-600 {
    color: #d1d5db !important;
}
body.dark .border-dashed {
    border-color: #27272a !important;
}
body.dark input,
body.dark textarea,
body.dark select {
    background-color: #232329 !important;
    color: #f1f5f9 !important;
    border-color: #27272a !important;
}
body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    background-color: #18181b !important;
    color: #f1f5f9 !important;
}
body.dark ::-webkit-scrollbar-track {
    background: #232329;
}
body.dark ::-webkit-scrollbar-thumb {
    background: #52525b;
}
body.dark ::-webkit-scrollbar-thumb:hover {
    background: #71717a;
}

/* ダークモード時のダークモード切り替えボタンを明るく */
body.dark #darkmode-toggle-btn {
    background: #fbbf24 !important; /* 明るい黄色 */
    color: #232329 !important;
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 12px 0 #0006;
}
body.dark #darkmode-toggle-btn:hover {
    background: #fde68a !important;
    color: #18181b !important;
    border-color: #fde68a;
}
body.dark #darkmode-toggle-btn svg {
    stroke: #232329 !important;
    fill: none;
}