/* ========================================
   基本
======================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 10px;

    font-family: sans-serif;

    background: #f5f5f5;

}


/* ========================================
   メインレイアウト
======================================== */

.app {

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 10px;

}


/* ========================================
   左：操作パネル
======================================== */

.control-panel {

    width: 45%;

    flex-shrink: 0;

    background: white;

    border-radius: 10px;

    padding: 10px;

}


.control-panel h1 {

    font-size: 20px;

    margin: 0 0 10px 0;

}


/* ========================================
   写真 / 動画モード
======================================== */

.mode-switch {

    display: flex;

    gap: 5px;

    margin-bottom: 8px;

}


.mode-button {

    flex: 1;

    margin: 0;

    font-size: 14px;

}


.mode-button.active {

    background: #007aff;

    color: white;

}


/* ========================================
   ボタン
======================================== */

button {

    width: 100%;

    padding: 10px 5px;

    margin-bottom: 8px;

    font-size: 16px;

    border: none;

    border-radius: 8px;

    background: #eeeeee;

    cursor: pointer;

}


button:active {

    transform: scale(0.98);

}


button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}


/* ========================================
   録画ボタン
======================================== */

.record-button {

    background: #ffe5e5;

}


.record-button.recording {

    background: #ff3b30;

    color: white;

}


/* ========================================
   録画時間
======================================== */

.recording-time {

    display: none;

    text-align: center;

    font-size: 22px;

    font-weight: bold;

    padding: 5px;

    color: #ff3b30;

}


.recording-time.visible {

    display: block;

}


/* ========================================
   スライダー
======================================== */

.control-group {

    margin-top: 10px;

    padding: 10px;

    background: #f5f5f5;

    border-radius: 8px;

}


.control-group label {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    margin-bottom: 8px;

}


.control-group input[type="range"] {

    width: 100%;

}


/* ========================================
   選択操作
======================================== */

.selection-controls {

    margin-top: 12px;

    padding: 8px;

    background: #f5f5f5;

    border-radius: 8px;

}


.selection-controls button {

    margin-bottom: 6px;

    font-size: 13px;

    padding: 9px 4px;

}


.selection-controls button:last-child {

    margin-bottom: 0;

}


/* ========================================
   情報
======================================== */

.info {

    margin-top: 12px;

    font-size: 11px;

    line-height: 1.5;

    word-break: break-word;

}


.info p {

    margin: 5px 0;

}


#message {

    font-weight: bold;

}


/* ========================================
   右：カメラ
======================================== */

.camera-panel {

    flex: 1;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}


#camera {

    width: 50%;

    height: auto;

    display: block;

    background: black;

    border-radius: 8px;

}


/* ========================================
   メディア一覧
======================================== */

#mediaArea {

    width: 100%;

    max-width: 700px;

    margin: 20px auto;

    padding: 15px;

    background: white;

    border-radius: 10px;

}


.media-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}


.media-header h2 {

    margin: 0;

    font-size: 20px;

}


#mediaCountHeader {

    font-size: 14px;

    color: #666;

}


/* ========================================
   一覧
======================================== */

#mediaList {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

}


/* ========================================
   メディアカード
======================================== */

.media-card {

    position: relative;

    border: 1px solid #ddd;

    border-radius: 10px;

    overflow: hidden;

    background: #fafafa;

}


.media-card.selected {

    border: 3px solid #007aff;

}


/* ========================================
   選択チェックボックス
======================================== */

.media-select {

    position: absolute;

    top: 8px;

    left: 8px;

    z-index: 10;

    width: 28px;

    height: 28px;

    margin: 0;

    accent-color: #007aff;

}


/* ========================================
   写真・動画
======================================== */

.media-card img,
.media-card video {

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    display: block;

    background: black;

}


/* ========================================
   メディア情報
======================================== */

.media-card-info {

    padding: 8px;

    font-size: 12px;

}


.media-number {

    font-weight: bold;

    margin-bottom: 5px;

}


.media-type {

    color: #555;

    margin-bottom: 3px;

}


.media-resolution {

    color: #555;

}


.media-duration {

    color: #555;

}


/* ========================================
   保存済み
======================================== */

.saved {

    color: #16823b;

    font-weight: bold;

    margin-top: 3px;

}


/* ========================================
   ボタン
======================================== */

.media-buttons {

    display: flex;

    gap: 5px;

    padding: 8px;

}


.media-buttons button {

    margin: 0;

    font-size: 13px;

    padding: 8px 4px;

}


.save-media {

    flex: 1;

}


.delete-media {

    width: 40px;

    flex-shrink: 0;

}


/* ========================================
   Canvas
======================================== */

#canvas {

    display: none;

}


/* ========================================
   空の一覧
======================================== */

.empty-message {

    grid-column: 1 / -1;

    text-align: center;

    padding: 30px 10px;

    color: #888;

}


/* ========================================
   スマートフォン
======================================== */

@media (max-width: 500px) {

    body {

        padding: 6px;

    }


    .app {

        gap: 6px;

    }


    .control-panel {

        width: 45%;

        padding: 8px;

    }


    .control-panel h1 {

        font-size: 17px;

    }


    button {

        font-size: 14px;

        padding: 9px 3px;

    }


    .mode-button {

        font-size: 12px;

    }


    .control-group {

        padding: 7px;

    }


    .control-group label {

        font-size: 12px;

    }


    .selection-controls {

        padding: 6px;

    }


    .selection-controls button {

        font-size: 11px;

    }


    .info {

        font-size: 10px;

    }


    #mediaList {

        grid-template-columns:
            repeat(2, 1fr);

    }

}