/* ======================================================================
   01-base.css | Reset & Base
====================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans JP', sans-serif;
    background: var(--app-bg);
    color: var(--color-text);
    display: flex;
    justify-content: center;

    height: 100dvh;
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

button {
    font: inherit;
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* ===== Lightbox UX helpers ============================================== */
/* ドラッグ中にテキスト選択させない（JSが body に付与） */
.lb-noselect {
    user-select: none !important;
}

/* 横方向のオーバースクロールを遮断して、履歴スワイプを無効化（LBオープン中のみ） */
.lb-open {
    overscroll-behavior-x: none;
}

/* =========================================================
   Global Scrollbar Style（全スクロールバー共通デザイン）
   ========================================================= */

/* Firefox 用（細く＆ダーク系カラー） */
html {
    scrollbar-width: thin;
    /* 細く */
    scrollbar-color: #3a3f4a transparent;
    /* thumb / track */
}

/* WebKit系（Chrome / Edge / Safari）用 */
::-webkit-scrollbar {
    width: 8px;
    /* 縦スクロールバーの太さ */
    height: 8px;
    /* 横スクロールバーの太さ */
}

/* 背景（トラック） */
::-webkit-scrollbar-track {
    background: transparent;
    /* ほぼ見えないように */
}

/* つまみ（サム） */
::-webkit-scrollbar-thumb {
    background: #3a3f4a;
    border-radius: 999px;
    border: 2px solid transparent;
    /* ちょっと細く見せる */
    background-clip: padding-box;
    /* 角を丸く保ったまま */
}

/* ホバー時：少しだけ明るく */
::-webkit-scrollbar-thumb:hover {
    background: #5a6270;
}