/* ベーススタイル */
:root {
    /* レイアウト */
    --sidebar-width: 210px;
    --sidebar-width-collapsed: 40px;

    /* フォント */
    --font-fallback: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* できなかった場合のフォント */

    --font-base: "M PLUS Rounded 1c", var(--font-fallback);  /* ベースフォント */
    --font-jp: "Kosugi Maru", var(--font-fallback);

    /* カラーシステム */
    --color-soft-white: #FAFAFA;
    --color-soft-black: #0A0A0A;
    --color-basic-white: #FFFFFF;
    --color-basic-black: #000000;

    --color-main-pink: #FF6E6E;
    --color-main-purple: #D382E6;
    --color-pink-purple-mid: #E978AA;
    --color-pink-purple-mid-light: #F8F0F4;
    --color-grad-pink-purple: linear-gradient(106deg, var(--color-main-pink) 13.77%, var(--color-main-purple) 86.23%);

    --color-main-pink-hover: #F76767;
    --color-main-purple-hover: #C373E0;
    --color-pink-purple-mid-hover: #E06FA6;
    --color-grad-pink-purple-hover: linear-gradient(106deg, var(--color-main-pink-hover) 13.77%, var(--color-main-purple-hover) 86.23%);

    --color-gray-800: #333333;
    --color-gray-600: #7F7F7F;
    --color-gray-500: #9A9DA0;
    --color-gray-400: #C1C2C7;
    --color-gray-200: #D7D9DD;
    --color-gray-100: #E7E8EB;
    --color-gray-50: #F3F4F6;

    --color-emphasis-red: #E53935;
    --color-error-red: #8F2D2D;

    --color-blue: #1D4ED8;
    --color-blue-light: #3B82F6;
    --color-timeline-text-accent: #DEAD2B;
    --color-timeline-text-bg: #F5ECD4;
    --color-timeline-audio-accent: #89A9D9;
    --color-timeline-audio-bg: #D3E0F3;
    --color-timeline-music-accent: #C28BD1;
    --color-timeline-music-bg: #EDD1F4;
}


* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-soft-black);
    background: var(--color-gray-50);
}


/* 非表示 */
.hidden { display: none !important; }


/* スクロールバースタイル */
.custom-scroll {
    /* FirefoxとIE/Edgeの設定 */
    scrollbar-width: thin; /* Firefox - スクロールバーを表示するが、薄くする */
    -ms-overflow-style: auto; /* IE and Edge - 基本スタイル使用 */
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* すべてのスクロールバーコンポーネントを明示的にオーバーライドする */
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
    border: none;
    box-shadow: none;
}

.custom-scroll::-webkit-scrollbar-track-piece {
    background: transparent;
    border: none;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: 3px;
    transition: background 0.2s ease;
    border: none;
    box-shadow: none;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

.custom-scroll::-webkit-scrollbar-corner {
    background: transparent;
    border: none;
}

/* スクロールバーの矢印ボタンを完全に削除する - 最も簡単で確実な方法 */
.custom-scroll::-webkit-scrollbar-button:single-button {
    height: 0px;
    width: 0px;
}

/* Firefox カラー設定 */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) transparent;
}


/* テキスト選択を無効化するユーティリティ */
.noselect {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* 標準 */
}


/* 長いテキストを省略記号で切り詰めるユーティリティ */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* サイドバーを非表示にする */
.hide-sidebar {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
}