@charset "UTF-8";

/* Moodleのテーマをねじ伏せて、画面横幅の50%サイズで浮き上がる警告ポップアップ */
#simple-space-warning-banner {
    position: fixed !important;
    
    /* 画面の真ん中にジャスト配置 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 【サイズ調整】PC等では画面の50%サイズ、スマホでは画面幅に合わせて可変 */
    width: 50% !important;       /* 基本は画面横幅の50% */
    min-width: 320px !important;  /* スマホ縦持ちでも文字が潰れないよう最低幅をキープ */
    max-width: 700px !important;  /* 超ワイドモニターでも広がりすぎない上限 */
    min-height: 150px !important; /* フォント縮小に合わせて最低の高さを微調整 */
    
    /* 上下左右中央に綺麗に配置するためのフレックスボックス構造 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* ポップアップらしい丸みと強烈な存在感の赤 */
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 3px solid #f5c6cb !important;
    border-radius: 16px !important;
    
    /* 【配置・インデント調整】 */
    box-sizing: border-box !important;
    padding: 30px 32px !important;       /* 左右の余白にゆとりを持たせる */
    text-align: left !important;         /* 【修正】テキストを左端揃えに */
    
    /* 2行目ぶら下げインデント（3文字分）の魔法のセット */
    padding-left: calc(32px + 3em) !important; /* 通常の左余白に3文字分(3em)を上乗せ */
    text-indent: -3em !important;              /* 1行目だけを3文字分(3em)左に突き出させる */
    
    /* 【文字サイズ調整】少し小さく、かつ読みやすく */
    font-weight: 700 !important;          /* 視認性の高いボールド */
    font-size: 18px !important;           /* 【修正】22pxから使いやすい18pxへ一回り縮小 */
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    
    /* 絶対に最前面を死守する設定 */
    z-index: 2147483647 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
    
    /* 初期状態は非表示（JS側でコントロール） */
    display: none;
}

/* 【スマホ用の微調整】画面幅が640px以下のデバイス（スマホなど）では幅を広くする */
@media (max-width: 640px) {
    #simple-space-warning-banner {
        width: 85% !important; /* スマホ画面で50%だと小さすぎるため、自動で85%に切り替えます */
        padding-left: calc(20px + 3em) !important; /* スマホ用の余白に合わせたぶら下げ調整 */
    }
}