body{
    background:#f4f6f9;
    font-family:sans-serif;
}

h1{
    text-align:center;
    margin-top:25px;
}

/* ===== ヘルプボタン（？） ===== */
.helpIcon {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #666; /* 警告の赤と区別するためグレー系 */
    color: white;
    font-weight: bold;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 9999;
    text-decoration: none;
    transition: 0.2s;
}

.helpIcon:hover {
    filter: brightness(0.9);
}

/* ===== PCメニュー ===== */
.menuGrid{
    width:90%;
    max-width:600px;
    margin:30px auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    grid-template-rows:300px 60px 60px;

    gap:20px;
}

.menuBtn{
    border:none;
    border-radius:12px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    color:white;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);

    display:flex;
    align-items:center;
    justify-content:center;
}

/* 手入力 */
.btn-register{
    background:#4CAF50;
}

/* カメラ */
.btn-register:nth-of-type(2){
    background:#43a047;
}

/* 検索 */
.btn-call{
    background:#2196F3;
    grid-column:1 / span 2;
}

/* 更新削除 */
.btn-change{
    background:#ff9800;
}

/* 在庫一覧 */
.btn-expiry{
    grid-column:1 / span 2;
    background:#9c27b0;
    padding:8px;
}

/* ===== モーダル ===== */
.searchModal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modalBox{
    background:#fff;
    padding:25px;
    border-radius:10px;
    width:300px;
    text-align:center;
    position:relative;
}

.modalClose{
    position:absolute;
    top:10px;
    right:12px;
    font-size:20px;
    cursor:pointer;
    color:#666;
}

.modalClose:hover{
    color:#000;
}

/* ===== 期限警告共通 ===== */

.alertIcon{
    position:fixed;
    top:20px;
    right:20px;
    width:45px;
    height:45px;
    border-radius:50%;
    background:#ff4444;
    color:white;
    font-weight:bold;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
    z-index:9999;
}

.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;

    height:40vh;
    max-height:80vh;

    overflow:hidden;

    background: #fff;
    border: 2px solid #ccc;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    z-index: 9999;
    border-radius: 10px;

    resize: vertical;
}

.popupHeader {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 15px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    display:flex;
    justify-content:space-between;
}

.popupItems{
    overflow-y:auto;
    max-height:calc(100% - 90px);
}

.closeBtn{
    cursor:pointer;
}

.alert-red{
    background:#ffd6d6;
    color:#c40000;
    font-weight:bold;
}

.alert-orange{
    background:#ffe0b3;
    color:#cc6600;
    font-weight:bold;
}

.alert-yellow{
    background:#fff3b0;
    color:#7a6500;
    font-weight:bold;
}

.itemBox{
    margin:12px 15px;
    padding-bottom:8px;
    border-bottom:1px solid #ddd;
}

.itemLink{
    text-decoration:none;
    color:inherit;
    display:block;
}

/* リサイズハンドル (PC用) */
.resizeHandle{
    position:sticky;
    bottom:0;
    left:0;
    width:24px;
    height:24px;
    display:flex; 
    align-items:flex-end;
    justify-content:flex-start;
    font-size:16px;
    cursor:nesw-resize;
    user-select:none;
}

.menuBtn:hover,
button:hover,
a.btn:hover {
    filter: brightness(0.9);
    transition: 0.2s;
}

.itemBox:hover {
    filter: brightness(0.9);
    cursor: pointer;
    transition: 0.2s;
}

/* ===== レスポンシブ設定 ===== */

/* PC・タブレット (701px以上) */
@media (min-width:701px){
    #expiryPopup{
        position:fixed;
        right:20px;
    }

    .popupHeader{
        cursor:move; /* ドラッグ可能であることを示す */
    }
}

/* スマホ (700px以下) */
@media (max-width:700px){

    h1{
        font-size:22px;
        margin-top:18px;
        text-align:center;
    }

    .menuGrid{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        gap:16px;
    }

    /* 手入力非表示 */
    .btn-register:first-of-type{
        display:none;
    }

    /* カメラ登録 */
    .btn-register:nth-of-type(2){
        grid-column:1;
        grid-row:1;
        height:110px;
        font-size:28px;
    }

    /* 検索 */
    .btn-call{
        grid-column:1;
        grid-row:2;
        height:80px;
    }

    /* 在庫一覧 */
    .btn-expiry{
        grid-column:1;
        grid-row:3;
        padding:18px;
        font-size:20px;
    }

    .popup{
        top:auto;
        bottom:0;
        right:0;
        left:0;
        width:100%;
        height:200px;
        max-height:85vh;
        border-radius:15px 15px 0 0;
        animation:popupSlide 0.3s ease;
        transition: height 0.25s ease;
        position: fixed;
    }

    .popupHeader{
        font-size:20px;
        padding:15px;
    }

    /* スマホ用ドラッグハンドル */
    .dragHandle{
        position:sticky;
        top:8px;
        z-index:10;
        width:50px;
        height:6px;
        background:#bbb;
        border-radius:3px;
        margin:8px auto;
    }

    .itemBox{
        font-size:18px;
        padding:10px 0;
    }

    .closeBtn{
        font-size:22px;
    }

    .resizeHandle{
        display:none;
    }
}

@keyframes popupSlide{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}