/* 画面全体の基本スタイル（グレー背景で没入感を出す） */
body {
    margin: 0;
    padding: 0;
    background-color: #333;
    color: #fff;
    font-family: "MS Gothic", sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

/* 上部コントロールパネル */
header {
    background-color: #222;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #444;
}

select, button {
    padding: 6px 12px;
    background-color: #555;
    color: white;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
}

button:disabled {
    background-color: #333;
    color: #777;
    cursor: not-allowed;
}

/* 音楽情報表示パネル */
#music-panel {
    background-color: #1a2a3a;
    color: #4da6ff;
    padding: 5px 15px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* メイン表示エリア（無駄なパディングを排除して領域を最大化） */
#viewer-container {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    touch-action: none;
    background-color: #2b2b2b; /* 画像の外側を少し暗くして境界を分かりやすく */
    padding: 0; /* 余白を0にして画面を広く使う */
    width: 100%;
    height: 100%;
}

#page-image {
    /* 通常表示時の最大サイズをコンテナの100%に固定 */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 25px rgba(0,0,0,0.7);
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

/* 下部エリア：右開きシークバーパネル（最下部に配置） */
footer {
    background-color: #222;
    padding: 10px 20px;
    border-top: 1px solid #444;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#seekbar-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ★右開き（右が1、左が最大）にするためにスライダーの向きを左右反転させるCSS */
input[type="range"] {
    flex: 1;
    transform: scaleX(-1); /* スライダーを鏡のように左右反転 */
    cursor: pointer;
}

#current-page-lbl {
    color: #2ecc71;
    font-weight: bold;
    font-size: 14px;
}

#footer-top {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

#user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
}

#user-area a {
    color: #2ecc71;
    text-decoration: none;
}

/* ★F11状態（ページ全体が全画面モード）になったときの全体の見た目調整 */
:fullscreen body {
    background-color: #222; /* 全画面時も暗めの背景を維持 */
}

/* ★【巨大化バグ修正】全画面モードの際、画像が高解像度でもはみ出さないように制御 */
:fullscreen #page-image {
    /* ブラウザ画面の縦横（100vw/100vh）から、上下ヘッダー・フッターのサイズ分を引いた領域に収まるように極限制限 */
    max-width: 100vw;
    max-height: calc(100vh - 180px); /* 上下のメニューパネルを考慮した最適な高さ */
    width: auto;
    height: auto;
    box-shadow: none; /* 全画面時は影を消してすっきりさせる */
}
