/* static/css/style.css */

/* ==========================================
   全体レイアウト (縦画面 9:16 絶対座標スケーリング)
========================================== */
body {
    margin: 0; padding: 0;
    background-color: #f4f4f9; /* ★ベースはUIと同じ白（薄グレー）に統一 */
    height: 100vh; width: 100vw; overflow: hidden; position: relative;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: #333; user-select: none;
}

#app-container {
    width: 1080px; height: 1920px;
    background-color: #f4f4f9;

    /* ★魔法の黒枠！画面外の余白をすべて真っ黒な影で塗りつぶす */
    box-shadow: 0 0 0 100vmax #000000;

    display: flex; flex-direction: column;
    padding: 25px; box-sizing: border-box;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center; overflow: hidden;
} 

#app-container.demo-active { outline: 12px solid #e53e3e; outline-offset: -12px; }

/* ==========================================
   画面出し分け用クラス
========================================== */
.view-panel {
    display: none; flex-direction: column; width: 100%; height: 100%;
    opacity: 0;
}

.view-panel.active {
    display: flex;
    animation: fadeInPanel 0.8s ease-in-out forwards;
}

@keyframes fadeInPanel {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* --- 簡易モード・詳細モードのUI制御 --- */
#input-view.simple-mode .detailed-only { display: none !important; }
#input-view.simple-mode #end-time-group { grid-column: 1 / -1; }
#input-view.detailed-mode .simple-only { display: none !important; }
#input-view.simple-mode #scroll-indicator { display: none !important; }

/* ==========================================
   トップ・PIN・管理画面
========================================== */
#view-top { align-items: center; justify-content: center; position: relative; }
.top-title { font-size: 80px; color: #2c3e50; margin-bottom: 80px; text-align: center; }
.btn-giant { background-color: #3498db; color: white; border: none; padding: 40px 120px; font-size: 56px; font-weight: bold; border-radius: 20px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: transform 0.1s; }
.btn-giant:active { transform: scale(0.95); }

.secret-btn { position: fixed; width: 150px; height: 150px; background: transparent; z-index: 100; }
#secret-tl { top: 0; left: 0; }
#secret-tr { top: 0; right: 0; }
#secret-bl { bottom: 0; left: 0; }
#secret-br { bottom: 0; right: 0; }

#view-pin { align-items: center; justify-content: center; background-color: #2c3e50; }
.pin-container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: center; width: 400px; }
.pin-title { font-size: 24px; color: #333; margin-bottom: 20px; font-weight: bold; }
.pin-display { font-size: 48px; letter-spacing: 15px; margin-bottom: 30px; height: 60px; border-bottom: 3px solid #cbd5e0; color: #2b6cb0; display: flex; align-items: center; justify-content: center;}
.pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.pin-btn { background: #edf2f7; border: none; border-radius: 12px; font-size: 32px; font-weight: bold; color: #2d3748; padding: 20px 0; cursor: pointer; transition: 0.1s; display: flex; align-items: center; justify-content: center; }
.pin-btn:active { background: #cbd5e0; transform: scale(0.95); }
.pin-btn.action { font-size: 28px; }
.pin-btn.delete { background: #e2e8f0; color: #e53e3e; }
.pin-btn.enter { background: #3498db; color: white; }
.pin-btn.enter:active { background: #2980b9; }

.admin-grid { display: grid; grid-template-columns: 1fr; gap: 40px; width: 80%; max-width: 800px; margin: auto; }
.btn-admin { background-color: #fff; border: 3px solid #cbd5e0; border-radius: 16px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 15px rgba(0,0,0,0.05); transition: 0.1s; font-size: 32px; font-weight: bold; color: #4a5568; }
.btn-admin:active { transform: scale(0.95); }
.btn-admin.demo { border-color: #e53e3e; color: #e53e3e; }

#view-mode-select { align-items: center; justify-content: center; position: relative; }
.mode-container { display: flex; flex-direction: column; gap: 50px; margin-top: 50px; }
.btn-mode { background-color: #fff; border: 4px solid #3498db; border-radius: 16px; width: 550px; height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 15px rgba(0,0,0,0.1); transition: 0.1s; }
.btn-mode:active { transform: scale(0.95); }
.mode-title { font-size: 42px; font-weight: bold; color: #2c3e50; margin-bottom: 20px; }
.mode-desc { font-size: 22px; color: #7f8c8d; line-height: 1.5; text-align: center; padding: 0 20px; }
.btn-back-home { margin-top: 60px; padding: 20px 40px; font-size: 24px; border: none; background: #ecf0f1; border-radius: 10px; cursor: pointer; font-weight: bold; color: #2c3e50; }

/* ==========================================
   メイン（条件入力）画面
========================================== */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.header h1 { color: #2c3e50; margin: 0; font-size: 28px; }
.btn-header-back { background: #ecf0f1; border: none; padding: 15px 30px; font-size: 20px; border-radius: 8px; cursor: pointer; font-weight: bold; color: #2c3e50; }

.info-ticker { flex-shrink: 0; background: #2c3e50; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 16px; margin-bottom: 15px; overflow: hidden; white-space: nowrap; box-sizing: border-box; font-weight: bold; }
.info-ticker p { display: inline-block; padding-left: 100%; animation: marquee 25s linear infinite; margin: 0; }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

#input-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#form-col-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
#form-col { flex: 1; background: #fff; padding: 35px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow-y: auto; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 25px; }
.full-width { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; }
label.section-label { font-size: 22px; font-weight: bold; margin-bottom: 10px; color: #555; border-bottom: 2px solid #eee; padding-bottom: 4px; }

input[readonly] { background-color: #e9ecef; color: #666; cursor: default; padding: 0 20px; border: 2px solid #ccc; border-radius: 8px; font-size: 22px; height: 60px; box-sizing: border-box; font-weight: bold; }

.touch-counter { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 2px solid #ccc; border-radius: 8px; overflow: hidden; height: 60px; box-sizing: border-box; }
.touch-counter button { background: #ecf0f1; border: none; width: 80px; height: 100%; font-size: 30px; font-weight: bold; cursor: pointer; color: #2c3e50; transition: 0.2s; }
.touch-counter button:active { background: #bdc3c7; }
.touch-counter .val-display { font-size: 22px; font-weight: bold; flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; }

.calendar-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 10px; cursor: pointer; font-size: 26px; }
.calendar-wrap input[type="date"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 5px; margin-bottom: 20px; }
.checkbox-group label { display: inline-flex; align-items: center; font-size: 20px; background: #f8f9fa; border: 2px solid #ddd; padding: 15px 25px; border-radius: 30px; cursor: pointer; transition: 0.2s; margin: 0; font-weight: bold; color: #4a5568; }
.checkbox-group label:active { background: #e0e0e0; transform: scale(0.95); }
.checkbox-group input { display: none; }
.checkbox-group label:has(input:checked) { background-color: #3498db; color: white; border-color: #3498db; }

.btn-primary { background-color: #3498db; color: white; border: none; padding: 25px; font-size: 28px; font-weight: bold; border-radius: 12px; cursor: pointer; width: 100%; margin-top: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.2); flex-shrink: 0; }
.btn-primary:active { background-color: #2980b9; transform: scale(0.98); }

@keyframes fadePulse { 0% { opacity: 0.1; } 50% { opacity: 0.9; } 100% { opacity: 0.1; } }

#scroll-indicator {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6); color: white; padding: 12px 25px; border-radius: 20px;
    text-align: center; font-weight: bold; font-size: 18px; line-height: 1.4;
    pointer-events: none; 
    animation: fadePulse 2.0s infinite; 
    transition: opacity 0.3s ease;
}

#scroll-indicator.is-hidden { animation: none !important; opacity: 0 !important; visibility: hidden; }

/* ==========================================
   オプション選択画面
========================================== */
#view-options { background-color: #f4f4f9; }
.options-container { width: 90%; max-width: 850px; background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin: auto; display: flex; flex-direction: column; align-items: center; }
.option-item { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 2px solid #edf2f7; }
.option-item:last-of-type { border-bottom: none; }
.option-title { font-size: 28px; font-weight: bold; color: #2d3748; }
.option-desc { font-size: 18px; color: #718096; margin-top: 8px; font-weight: bold; }
.option-price { font-size: 28px; font-weight: bold; color: #3498db; }

/* ==========================================
   プログレス・生成画面 
========================================== */
#processing-area { display: none; flex: 1; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; min-height: 0; }
.progress-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.progress-status { font-size: 24px; font-weight: bold; color: #3498db; }
.progress-stats { font-size: 18px; color: #7f8c8d; font-family: monospace; }
.progress-bar-bg { flex-shrink: 0; width: 100%; height: 25px; background: #ecf0f1; border-radius: 12px; overflow: hidden; position: relative; }
.progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3498db, #2ecc71); transition: width 0.1s linear; }

.result-layout { display: flex; flex-direction: column; gap: 20px; flex: 1; margin-top: 15px; min-height: 0; height: 100%; }
.result-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; min-height: 0; }
.result-bottom { flex: none; display: flex; height: auto; }

.left-col-wrapper { display: flex; flex-direction: column; gap: 20px; min-height: 0; height: 100%; }
.col { background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.col h3 { flex-shrink: 0; margin: 0; font-size: 18px; color: #2c3e50; text-align: center; border-bottom: 1px solid #ccc; padding: 10px; background: #ecf0f1; }
.col-scrollable { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: block; min-height: 0; position: relative; }

.col-media { width: 100%; aspect-ratio: 4 / 3; background: #f8f9fa; position: relative; overflow: hidden; }

#cm-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8f9fa; }
.cm-element { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; transition: opacity 1s ease-in-out; 
    background-color: #f8f9fa;
}
.cm-element.active { opacity: 1; }
.cm-element video, .cm-element img { width: 100%; height: 100%; object-fit: contain; display: block; border: none; outline: none; }

.loading-pulse { width: 50px; height: 50px; background-color: #3498db; border-radius: 100%; animation: sk-scaleout 2.0s infinite ease-in-out; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
@keyframes sk-scaleout { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1.0); opacity: 0; } }

#print-overlay {
    display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.85); color: #2c3e50; padding: 25px 40px; border-radius: 16px;
    font-size: 32px; font-weight: bold; text-align: center; z-index: 100;
    animation: fadePulse 5.0s infinite; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#btn-reset { flex-shrink: 0; display: none; background: #e74c3c; color: white; border: none; padding: 15px; font-size: 20px; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 15px; }

/* ==========================================
   確認モーダル・決済モーダル
========================================== */
#confirm-modal, #payment-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2000; align-items: center; justify-content: center; }
.modal-content, .payment-content { background: #fff; width: 700px; max-width: 90%; border-radius: 16px; padding: 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); text-align: center; }
#payment-modal { z-index: 3000; background: rgba(0, 0, 0, 0.8); }
.payment-content { width: 500px; padding: 40px; }
.modal-content h2 { margin-top: 0; color: #2c3e50; font-size: 28px; border-bottom: 3px solid #eee; padding-bottom: 15px; }
.payment-content h2 { margin-top: 0; color: #e53e3e; font-size: 32px; border: none; }
.modal-actions { display: flex; gap: 20px; margin-top: 30px; }
.btn-secondary { background-color: #95a5a6; color: white; border: none; padding: 20px; font-size: 24px; font-weight: bold; border-radius: 10px; cursor: pointer; flex: 1; }
.btn-submit-modal { background-color: #e67e22; color: white; border: none; padding: 20px; font-size: 24px; font-weight: bold; border-radius: 10px; cursor: pointer; flex: 1; }
.qr-container { margin: 30px auto; width: 250px; height: 250px; background: #f8f9fa; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center; position: relative; }
.payment-timer { font-size: 24px; font-weight: bold; color: #718096; margin-bottom: 30px; }