/* Google Fontsのインポート */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* --- ベーススタイルとフォント --- */
body {
    /* 背景色を透明にし、波模様を見せる */
    background-color: transparent; 
    /* フォント: RobotoとNoto Sans JPを適用 */
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    
    /* ログインカード (.login-wrapper) を画面中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- 画面全体を覆う波模様の背景 (.wave-decoration) --- */
.wave-decoration {
    /* 画面全体を覆うように設定 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1; /* 最背面に配置 */
}

/* 擬似要素を使ってカラフルな波を作成・拡大 */
.wave-decoration:after {
    content: '';
    position: absolute;
    top: -50%; 
    left: -50%; 
    width: 200vw; 
    height: 200vh; 
    /* 抽象的な波のカーブ */
    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
    
    /* カラフルなグラデーション */
    background: linear-gradient(
        45deg,
        #ffc107 0%,   /* 黄 */
        #ff6347 33%,  /* 赤/オレンジ */
        #4CAF50 66%,  /* 緑 */
        #007bff 100%  /* 青 */
    );
    
    opacity: 0.8; 
    /* 動きをつける */
    animation: wave-motion 20s linear infinite; 
}

/* 波の動きを定義 */
@keyframes wave-motion {
    0% { transform: translate3d(-20%, 0, 0) rotate(0deg); }
    100% { transform: translate3d(20%, 0, 0) rotate(360deg); }
}


/* --- ログインコンテナのラッパー（外枠の装飾用） --- */
.login-wrapper {
    position: relative;
    max-width: 440px; 
    width: 90%;
    padding: 20px; 
    z-index: 20; 
    border-radius: 16px;
    /* 外側の薄い白い光 */
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1); 
}

/* 擬似要素を使ってカラフルなアニメーションボーダーを作成 */
.login-wrapper:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 20px; 
    
    /* 複数の色で構成されるグラデーション */
    background: linear-gradient(
        45deg,
        #ffc107, 
        #ff6347, 
        #4CAF50, 
        #007bff, 
        #9b59b6 
    );
    
    background-size: 400% 400%; 
    z-index: -1;
    opacity: 0.8;
    /* ぼかしてネオンのような光を表現 */
    filter: blur(8px); 
    animation: colorful-border-animation 15s ease infinite;
}

/* グラデーションを動かすアニメーション */
@keyframes colorful-border-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- コンテナとカード (ログインボックス本体) --- */
.container {
    max-width: 400px;
    width: 100%; /* ラッパー内で幅を100%に */
    padding: 30px;
    background-color: #ffffff; /* 白いカード背景 */
    border-radius: 12px;
    /* 背景と分離するために影を濃くする */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); 
    text-align: center;
    position: relative;
    z-index: 10;
    border-top: none; /* ボーダー削除 */
}

/* --- サービス名ヘッダー --- */
h1 {
    font-size: 28px;
    color: #333333;
    margin-bottom: 5px;
    font-weight: 700;
}
.service-title {
    color: #4CAF50; /* カラフルなアクセントカラー */
}
.login-header {
    font-size: 20px;
    color: #666666;
    margin-bottom: 25px;
    border-bottom: 2px solid #ffc107; /* カラフルなアクセント */
    display: inline-block;
    padding-bottom: 5px;
}

/* --- フォームグループ --- */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #555555;
    font-size: 14px;
}
input[type="email"], 
input[type="password"], 
input[type="text"] {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s;
}
input:focus {
    border-color: #007bff;
    outline: none;
}

/* --- ボタン --- */
button {
    width: 100%;
    padding: 12px 15px;
    background-color: #007bff; 
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.1s;
}
button:hover:not(:disabled) {
    background-color: #0056b3;
    transform: translateY(-1px);
}
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

/* --- エラー表示 --- */
#error-message {
    margin-top: 20px;
    padding: 10px;
    background-color: #fce4e4; 
    color: #cc0000; 
    border: 1px solid #fcc;
    border-radius: 4px;
    text-align: center;
    font-weight: 700;
}
.hidden { display: none; }


/* --- ログコンテナ (開発中のみ) --- */
#log-container {
    margin-top: 30px; 
    text-align: left; 
    padding: 15px; 
    background-color: #eeeeee; 
    border-radius: 8px;
    margin-bottom: 0; /* フッター画像を近づける */
}
#log-container h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    border-bottom: none;
    padding-bottom: 0;
}
#log { 
    white-space: pre-wrap; 
    word-break: break-all; 
    font-size: 12px; 
    margin: 0;
    height: 150px; /* ログ出力の高さ */
    overflow-y: scroll;
    background-color: #fff;
    padding: 5px;
    border-radius: 4px;
}

/* --- フッター画像 --- */
#footer-image {
    /* 修正: ファイル名を 'footerimg.png' に変更 */
    background-image: url('footerimg.png'); 
    background-size: cover;       /* 画像がコンテナ全体を覆うように拡大・縮小 */
    background-position: center;  /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 繰り返しを防止 */
    
    /* containerのpadding 30px分を打ち消し、幅をコンテナいっぱいに広げる */
    margin-top: 20px;
    margin-left: -30px; 
    margin-right: -30px; 
    
    width: auto;
    /* ログ出力と同じ高さに設定 */
    height: 150px; 
    
    /* カードの角に合わせる */
    border-radius: 0 0 12px 12px; 
    /* ログエリアとの境界線にアクセントカラーを入れる */
    border-top: 5px solid #ffc107; 
}


/* ========================================= */
/* --- アップロード画面のデザイン --- */
/* ========================================= */

/* --- アップロード画面のヘッダー --- */
.upload-header {
    font-size: 24px;
    color: #333333;
    margin-bottom: 25px;
    border-bottom: 2px solid #4CAF50; /* 緑のアクセント */
    display: inline-block;
    padding-bottom: 5px;
}

/* --- ファイル選択エリアのデザイン --- */
#fileSelectArea {
    position: relative;
    padding-top: 5px; /* 上部の隙間 */
}
#photoFile {
    /* 標準のファイル選択ボタンを完全に非表示にする */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#fileSelectLabel {
    /* ファイル選択エリアを大きく、クリックしやすいデザインにする */
    display: block;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border: 2px dashed #007bff;
    border-radius: 8px;
    background-color: #f0f8ff; /* 薄い青の背景 */
    color: #007bff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
}
#fileSelectLabel:hover {
    background-color: #e6f0ff;
}
/* 修正: 上限到達時のスタイル */
#fileSelectLabel.disabled-limit {
    background-color: #fff9e6; /* 薄い黄色 */
    color: #ffc107; /* 黄色の文字 */
    border-color: #ffc107;
    cursor: not-allowed;
}


/* --- 上限メッセージ --- */
#limitMessage {
    color: #888888;
    font-size: 14px;
    margin-top: -10px; /* ファイル選択エリアに近づける */
    margin-bottom: 25px;
    text-align: left;
}


/* --- 選択されたファイルリスト --- */
#fileListContainer {
    margin-top: -5px; /* ファイル選択エリアに近づける */
}
.list-title {
    font-weight: 700;
    color: #555555;
    margin-bottom: 5px;
    font-size: 14px;
}
#fileList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 200px; /* スクロール可能にする */
    overflow-y: auto;
    border: 1px solid #dddddd;
    border-radius: 4px;
}
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
}
.file-item:last-child {
    border-bottom: none;
}
.delete-button {
    /* 修正: 削除ボタンを小さく、バツ印としてデザイン */
    padding: 0 5px; 
    background-color: transparent; 
    color: #cc0000; 
    border: none;
    border-radius: 4px;
    font-size: 16px; 
    font-weight: 700;
    width: auto;
    /* ボタンのトランジションを削除して素早く反応させる */
    transition: background-color 0.1s; 
}
.delete-button:hover {
    background-color: #ffeaea; /* ホバー時に薄い赤の背景 */
}