/* 共通全体 */
body {
    font-family: sans-serif;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#f5f5f5;
}

/* フリップブック */
#flipbook-container {
    margin-top:60px;
    overflow:hidden;
    transition: transform 0.25s ease;
    transform-origin:center top;
    visibility:hidden;
}

.page img {
    width:100%;
    height:auto;
    display:block;
    cursor:pointer;
}

#flipbook .page {
    box-sizing:border-box;
    padding:0 2px;
    border:none;
    background:#fff;
}

.page.hard {
    border:2px solid #333;
    background:#ddd;
}

/* 上部コントロール PC版 */
.controls {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
    padding:5px 10px;
    border-radius:5px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    z-index:999;
}

/* 下部ページ確認（スマホ版のみ） */
.mobile-top {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    padding:5px 30px 5px 10px;
    border-radius:5px;
    display:none;
    align-items:center;
    gap:5px;
    z-index:9999;
}

/* 下部バー */
.bottom-bar {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    display: flex;
    align-items:center;
    gap:10px;
    background: rgba(255,255,255,0.95);
    padding:5px 10px;
    border-radius:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
    z-index:999;
}

/* 下部バー進捗 */
#progressBar {
    flex:1;
    position:relative;
    height:15px;
    margin:0 10px;
    background:#ccc;
    border-radius:15px;
}

#progressBar .filled {
    position:absolute;
    height:100%;
    width:0%;
    background:#4285f4;
    border-radius:15px;
    transition: width 0.2s ease;
}

#progressHandle {
    position:absolute;
    top:50%;
    transform: translate(-50%,-50%);
    width:18px;
    height:18px;
    background:#fff;
    border:2px solid #4285f4;
    border-radius:50%;
    cursor:pointer;
}

/* ページジャンプ PC版 */
.page-jump {
    display:flex;
    align-items:center;
    gap:5px;
}

.page-jump input[type="number"]{
    width:50px;
    text-align:center;
    -moz-appearance: textfield;
}
.page-jump input[type="number"]::-webkit-outer-spin-button,
.page-jump input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}

/* 読み込み中オーバーレイ */
#loading-overlay{
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background: rgba(255,255,255,0.95);
    font-size: 24px;
    font-weight: bold;
    z-index: 9999;
}
#loading-overlay .spinner{
    width:50px;
    height:50px;
    border:5px solid #ccc;
    border-top:5px solid #4285f4;
    border-radius:50%;
    animation: spin 1s linear infinite;
    margin-bottom:10px;
}
@keyframes spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/* スマホ用表示調整 */
@media(max-width:600px){
    /* 上部 PCズーム非表示 */
    .controls { display:none; }

    /* 下部ページ確認表示 */
    .mobile-top { display:flex; }

    /* 下部 PC専用ボタン非表示 */
    .bottom-bar .desktop-only { display:none; }

    /* スマホ版ページ入力幅調整 + 矢印非表示 */
    .mobile-top input[type="number"] {
        width:30px !important; /* お好みで調整 */
        padding-top: 3.5px;
        text-align:right;
        font-size: medium;
        border: none;
        margin:0;
    }
    .mobile-top input[type="number"]::-webkit-inner-spin-button,
    .mobile-top input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin:0;
    }
}