/**
 * 共有アプリ表示用CSS
 */

.share-app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.seito-info {
    margin-top: 20px;
    margin-bottom: 0;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 327px;
    margin-left: auto;
    margin-right: auto;
}

.seito-info span {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.button-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 327px;
    margin-left: auto;
    margin-right: auto;
}

#btnCodeShowBox,
#btnDataBaseShowBox {
    margin-top: 0;
    display: inline-block;
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

.btn-code-show,
.btn-scenario-show {
    margin: 5px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-code-show:hover,
.btn-scenario-show:hover {
    background-color: #0056b3;
}

.preview-container {
    margin-top: 0px;
    width: 100%;
    max-width: 327px; /* デスクトップでの最大幅 */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 192.66%; /* 630/327 = 1.9266... アスペクト比を維持 */
    height: 0;
    overflow: hidden;
    max-height: calc(100vh - 250px); /* ビューポートの高さから他の要素分を引いた最大高さ */
}

/* aspect-ratioがサポートされている場合は使用（フォールバック） */
@supports (aspect-ratio: 1) {
    .preview-container {
        aspect-ratio: 327 / 630;
        padding-bottom: 0;
        height: auto;
    }
}

.preview-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid 1px lightgray;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* コード表示モーダル */
.code-tabs {
    margin-top: 10px;
}

.code-textarea {
    width: 100%;
    min-height: 400px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

/* シナリオテーブル */
#scenarioTableContainer {
    max-height: 500px;
    overflow-y: auto;
}

#scenarioTableContainer table {
    width: 100%;
    margin-top: 10px;
}

#scenarioTableContainer th {
    background-color: #f8f9fa;
    font-weight: bold;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

#scenarioTableContainer td {
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

#scenarioTableContainer tr:hover {
    background-color: #f8f9fa;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .share-app-container {
        padding: 0; /* スマホでは余白を削除 */
        min-height: 100vh;
    }
    
    .preview-container {
        margin-top: 0; /* スマホでは上マージンを削除 */
        max-width: 100%; /* スマホでは画面幅いっぱいに */
        width: 100%; /* 画面幅いっぱいに */
        padding-bottom: 0; /* アスペクト比の制約を外す */
        height: 100vh; /* 画面の高さに合わせる */
        height: 100dvh; /* Dynamic Viewport Height（スマホのブラウザUIを考慮） */
        max-height: none; /* 最大高さの制限を外す */
    }
    
    /* aspect-ratioがサポートされている場合も無効化 */
    @supports (aspect-ratio: 1) {
        .preview-container {
            aspect-ratio: unset;
            padding-bottom: 0;
            height: 100vh;
            height: 100dvh; /* Dynamic Viewport Height */
        }
    }
    
    .preview-container iframe {
        border-radius: 0; /* スマホでは角丸を削除 */
        border: none; /* スマホではボーダーを削除 */
    }
    
    /* スマホでは生徒名とボタンのスタイル調整 */
    .seito-info {
        margin-top: 0;
        border-radius: 0;
    }
    
    .button-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .seito-info {
        max-width: 100%; /* スマホでは画面幅いっぱいに */
    }
    
    .button-container {
        max-width: 100%; /* スマホでは画面幅いっぱいに */
        flex-wrap: wrap; /* ボタンがはみ出る場合は折り返し */
    }
    
    .code-textarea {
        min-height: 300px;
    }
}

/* タブレット対応 */
@media (min-width: 768px) and (max-width: 1024px) {
    .preview-container {
        max-width: 400px; /* タブレットでは少し大きく */
    }
    
    .seito-info {
        max-width: 400px; /* タブレットではiFrameと同じ幅に */
    }
    
    .button-container {
        max-width: 400px; /* タブレットではiFrameと同じ幅に */
    }
}

/* デスクトップ対応 */
@media (min-width: 1025px) {
    .preview-container {
        padding-bottom: 0; /* アスペクト比の制約を外す */
        height: 100vh; /* ウィンドウの上下いっぱいに */
        max-height: 1000px; /* 最大高さ1000px */
    }
    
    /* aspect-ratioがサポートされている場合も無効化 */
    @supports (aspect-ratio: 1) {
        .preview-container {
            aspect-ratio: unset;
            padding-bottom: 0;
            height: 100vh;
            max-height: 1000px;
        }
    }
}

/* cf=finalのとき、全体をウィンドウの上下いっぱいに */
.final-mode .share-app-container {
    height: 100vh;
    max-height: 100vh;
}

.final-mode .preview-container {
    flex: 1;
    padding-bottom: 0; /* アスペクト比の制約を外す */
    height: auto;
    max-height: none;
    min-height: 0; /* flexアイテムが縮小できるように */
}

.final-mode .preview-container iframe {
    position: relative; /* absoluteから変更 */
    height: 100%;
}

.final-mode .seito-info {
    margin-top: 0;
    flex-shrink: 0; /* 縮小しない */
}

.final-mode .button-container {
    margin-top: 10px;
    flex-shrink: 0; /* 縮小しない */
}

/* デスクトップ向け: cf=finalのときもmax-height: 1000pxを適用 */
@media (min-width: 1025px) {
    .final-mode .share-app-container {
        max-height: 1000px;
    }
    
    .final-mode .preview-container {
        max-height: calc(1000px - 120px); /* seitoInfoとbutton-containerの高さを考慮 */
    }
}