/* =========================================================
   SFN Common UI & Attendance
   ========================================================= */

/* --- 全域：iOSズーム防止 --- */
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], select, textarea {
    font-size: 16px !important;
}

/* スピンボタン削除 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* --- コンテナ基本 --- */
.sfn-view-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 15px;
    font-family: sans-serif;
}

.sfn-view-title {
    font-size: 1.6rem;
    border-left: 8px solid #002D58;
    padding-left: 15px;
    margin: 20px 0 25px;
    font-weight: bold;
    color: #333;
}

.sfn-view-title-sub {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 6px solid #002D58;
    padding-left: 12px;
    margin: 30px 0 15px;
    color: #333;
}

/* --- 名簿 & カード --- */
.sfn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
@media (min-width: 600px) { .sfn-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 900px) { .sfn-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; } }

.sfn-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.08); display: flex; flex-direction: column; }
.sfn-card-img-wrap { width: 100%; aspect-ratio: 145 / 180; overflow: hidden; background: #f7f7f7; border-bottom: 2px solid #002D58; }
.sfn-card-img { width: 100%; height: 100%; object-fit: cover; }
.sfn-card-body { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }

/* スコア表示用追加UI */
.back-link { display: inline-block; margin-bottom: 20px; text-decoration: none; color: #666; font-size: 0.9rem; font-weight: bold; }


.sfn-view-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 15px;
    font-family: sans-serif;
}
.sfn-view-title {
    font-size: 1.6rem;
    border-left: 8px solid #002D58;
    padding-left: 15px;
    margin: 20px 0 25px;
    font-weight: bold;
    color: #333;
}
.back-link { display: inline-block; margin-bottom: 20px; text-decoration: none; color: #666; font-size: 0.9rem; font-weight: bold; }