/**
 * ファイル名: auth_style.css
 * 役割: 認証色の反映とアニメーション制御
 *
 */

:root {
    /* デフォルトの認証色（初期値は白） */
    --auth-color: #ffffff;
}

/* 発行証（パスポート）のメインカードエリア */
.auth-passport-card {
    background-color: var(--auth-color);
    transition: background-color 1.5s ease-in-out, border-color 1.5s ease-in-out;
    border: 8px solid var(--auth-color);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    border-radius: 24px;
    padding: 5vmin;
    margin: auto; /* 上下左右中央に配置 */
    
    /* 形状の固定：画面の短い方の辺（vmin）を基準にサイズを決定 */
    width: 80vmin; 
    aspect-ratio: 1 / 1.25; /* 正方形に近い長方形を維持 */
    
    /* 内部テキストの中央揃え */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    color: #333;
    box-sizing: border-box;
}

/* 発行証内のアクセントテキスト（日付やユーザーIDなど） */
.auth-passport-accent {
    /* 背景色と同期しつつ、少し暗くして視認性を確保 */
    color: var(--auth-color);
    filter: brightness(0.6);
    transition: color 1.5s ease-in-out;
    font-weight: bold;
}

/* 同期中であることを示すインジケーター（必要に応じて） */
.auth-sync-indicator {
    font-size: 0.8rem;
    color: #888;
    text-align: right;
    margin-top: 10px;
}