/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700;900&display=swap');

/* 基本設定 */
body {
    background-color: #050505;
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 24px 24px;
    /* フォント設定はTailwind側でも指定していますが、念の為ここでも適用 */
    font-family: 'Noto Serif JP', serif;
    color: #e5e5e5;
}

/* スクロールバーのカスタマイズ (Chrome/Safari/Edge) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050505; 
}
::-webkit-scrollbar-thumb {
    background: #bf9846; 
    border-radius: 4px;
}

/* 画像生成エリアのテクスチャ */
.texture-receipt {
    /* もし images/texture.jpg があればそれを優先 */
    background-image: url('../images/texture.jpg'), url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23d1c4a7' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-blend-mode: overlay; /* 画像と色を合成 */
    background-size: cover, auto;
}

/* Vue.js トランジションアニメーション */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}