/* =====================================================
   soccer-player-diagnosis / style.css  v2.0
   フロントエンド + 管理画面共通スタイル
   ===================================================== */

:root {
    --spd-primary:  #2c3e50;
    --spd-bg:       #f8f9fa;
    --spd-white:    #ffffff;
    --spd-radius:   12px;
    --spd-shadow:   0 4px 20px rgba(0,0,0,.10);
    --spd-font:     'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;

    /* タイプカラー */
    --color-c: #c0392b;   /* チャレンジャー */
    --color-g: #27ae60;   /* 職人 */
    --color-a: #2980b9;   /* ハーモニスト */
    --color-l: #8e44ad;   /* オーガナイザー */
    --color-s: #e67e22;   /* クリエイター */
}

/* ── ラッパー ──────────────────────────────────────── */
#spd-wrap {
    max-width: 740px;
    margin: 0 auto;
    font-family: var(--spd-font);
    color: var(--spd-primary);
    font-size: 15px;
    line-height: 1.6;
}
.spd-hidden { display: none !important; }

/* ── ヘッダー ──────────────────────────────────────── */
.spd-header {
    text-align: center;
    padding: 44px 24px 32px;
    background: linear-gradient(135deg, #1a3a5c 0%, #2980b9 100%);
    border-radius: var(--spd-radius) var(--spd-radius) 0 0;
    color: #fff;
}
.spd-ball      { font-size: 56px; margin-bottom: 12px; }
.spd-header h2 { margin: 0 0 12px; font-size: 1.65rem; font-weight: 800; }
.spd-lead      { margin: 0; font-size: 0.95rem; line-height: 1.75; opacity: .9; }

/* ── ステップ共通 ───────────────────────────────────── */
.spd-step {
    background: var(--spd-white);
    border-radius: var(--spd-radius);
    box-shadow: var(--spd-shadow);
    overflow: hidden;
}

/* ── 情報入力フォーム ───────────────────────────────── */
.spd-info-form { padding: 32px 28px 36px; }
.spd-field     { margin-bottom: 20px; }
.spd-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.spd-field input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #dde;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--spd-font);
    box-sizing: border-box;
    transition: border-color .2s;
}
.spd-field input:focus  { outline: none; border-color: #2980b9; }
.spd-field select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #dde;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--spd-font);
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.spd-field select:focus { outline: none; border-color: #2980b9; }

.spd-required { color: #e74c3c; font-size: 0.8rem; font-weight: 700; margin-left: 4px; }

.spd-error-msg {
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 700;
    margin: -12px 0 12px;
    padding: 8px 12px;
    background: #fdf2f2;
    border-radius: 6px;
    border-left: 3px solid #e74c3c;
}

.spd-note {
    font-size: 0.82rem;
    color: #888;
    margin: -8px 0 16px;
}

/* ── ボタン ────────────────────────────────────────── */
.spd-btn {
    display: inline-block;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--spd-font);
    transition: transform .15s, opacity .15s, box-shadow .15s;
    text-decoration: none;
}
.spd-btn:active  { transform: scale(.97); }
.spd-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

.spd-btn-primary {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192,57,43,.35);
}
.spd-btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(192,57,43,.45);
    transform: translateY(-2px);
}
.spd-btn-secondary {
    background: #ecf0f1;
    color: var(--spd-primary);
}
.spd-btn-secondary:hover:not(:disabled) { background: #dde3e8; }

#spd-start-btn { width: 100%; margin-top: 8px; font-size: 1.1rem; }

/* ── プログレスバー ────────────────────────────────── */
.spd-progress-bar-wrap { height: 7px; background: #eee; }
.spd-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f39c12);
    transition: width .3s ease;
    border-radius: 0 4px 4px 0;
}
.spd-progress-text {
    text-align: right;
    padding: 8px 20px 0;
    font-size: 0.82rem;
    color: #999;
    font-weight: 600;
}

/* ── 質問エリア ────────────────────────────────────── */
.spd-question   { padding: 24px 24px 8px; }
.spd-q-text {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.65;
    margin: 0 0 20px;
}

/* ── 選択肢 ────────────────────────────────────────── */
.spd-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.spd-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border: 2px solid #dde;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    background: #fff;
    user-select: none;
}
.spd-option:hover    { border-color: #2980b9; background: #eaf4fd; transform: translateX(3px); }
.spd-option.spd-selected { border-color: #c0392b; background: #fdf2f2; }

.spd-opt-mark {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #c0392b;
    transition: border-color .15s, background .15s;
}
.spd-selected .spd-opt-mark {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
}
.spd-opt-text { font-size: 0.94rem; line-height: 1.6; flex: 1; }

/* ── ナビゲーション ────────────────────────────────── */
.spd-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 28px;
}
.spd-nav .spd-btn { flex: 1; }

/* ── 結果 ──────────────────────────────────────────── */
.spd-result {
    padding: 40px 28px 20px;
    text-align: center;
}
.spd-result-footer { padding: 0 28px 36px; text-align: center; }

.spd-result-icon { font-size: 76px; margin-bottom: 8px; }

.spd-result-badge {
    display: inline-block;
    background: var(--type-color, #2980b9);
    color: #fff;
    padding: 4px 20px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 12px;
    opacity: .9;
    letter-spacing: .04em;
}
.spd-result-name {
    font-size: 1.85rem;
    font-weight: 900;
    margin: 0 0 18px;
    color: var(--type-color, var(--spd-primary));
}
.spd-result-desc {
    font-size: 0.96rem;
    line-height: 1.85;
    color: #555;
    text-align: left;
    background: #f8f9fa;
    padding: 18px 20px;
    border-radius: 10px;
    border-left: 5px solid var(--type-color, #2980b9);
    margin-bottom: 28px;
}

/* スコアバランス */
.spd-score-chart {
    text-align: left;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 28px;
}
.spd-score-chart h4 { margin: 0 0 14px; font-size: 0.88rem; color: #666; font-weight: 700; }
.spd-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.spd-score-label {
    width: 175px;
    flex-shrink: 0;
    font-size: 0.79rem;
    font-weight: 600;
}
.spd-score-bar-wrap {
    flex: 1;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.spd-score-bar {
    height: 100%;
    border-radius: 6px;
    transition: width .7s ease;
}
.spd-score-num {
    width: 32px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    color: #555;
}

/* アドバイスセクション */
.spd-result-sections { text-align: left; margin-bottom: 24px; }
.spd-section {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px 20px;
}
.spd-section h4 {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--spd-primary);
}
.spd-section p {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.75;
    color: #555;
}
.spd-section ul { margin: 0; padding-left: 20px; }
.spd-section li {
    font-size: 0.91rem;
    line-height: 1.75;
    color: #555;
    margin-bottom: 7px;
}

/* 仲間へのメッセージ */
.spd-share-msg {
    margin-top: 4px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa, #ecf0f1);
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #555;
    font-weight: 600;
    text-align: center;
}

/* みんなの結果リンク */
.spd-result-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 28px 36px;
}
.spd-btn-results {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(39,174,96,.35);
    text-decoration: none !important;
}
.spd-btn-results:hover { box-shadow: 0 6px 18px rgba(39,174,96,.45); transform: translateY(-2px); }

/* ── レスポンシブ ───────────────────────────────────── */
@media (max-width: 540px) {
    .spd-header h2  { font-size: 1.3rem; }
    .spd-result-name { font-size: 1.4rem; }
    .spd-q-text     { font-size: 0.97rem; }
    .spd-score-label { width: 120px; font-size: 0.72rem; }
    .spd-info-form, .spd-question, .spd-result, .spd-result-footer { padding-left: 16px; padding-right: 16px; }
    .spd-nav        { padding: 16px 16px 22px; }
    .spd-btn        { padding: 12px 16px; font-size: 0.92rem; }
}

/* =====================================================
   管理画面スタイル
   ===================================================== */
.spd-admin { max-width: 1100px; }
.spd-admin h1 { font-size: 1.35rem; margin-bottom: 18px; }
.spd-admin h2 { font-size: 1.05rem; margin: 0 0 14px; border-bottom: 2px solid #eee; padding-bottom: 8px; }

.spd-theory-note {
    background: #eaf3fb;
    border-left: 4px solid #2980b9;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.spd-admin-card {
    background: #fff;
    padding: 20px 20px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: 22px;
}

/* タイプカード */
.spd-type-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
}
.spd-type-card {
    flex: 1;
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-top: 4px solid #ccc;
}
.spd-type-c { border-top-color: var(--color-c); }
.spd-type-g { border-top-color: var(--color-g); }
.spd-type-a { border-top-color: var(--color-a); }
.spd-type-l { border-top-color: var(--color-l); }
.spd-type-s { border-top-color: var(--color-s); }

.spd-card-icon   { font-size: 26px; }
.spd-card-name   { font-size: 0.76rem; font-weight: 700; margin: 4px 0 2px; color: #444; }
.spd-card-theory { font-size: 0.65rem; color: #999; margin-bottom: 6px; line-height: 1.4; }
.spd-card-count  { font-size: 1.6rem; font-weight: 900; color: var(--spd-primary); }
.spd-card-bar-wrap { height: 6px; background: #eee; border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.spd-card-bar    { height: 100%; border-radius: 3px; }
.spd-type-c .spd-card-bar { background: var(--color-c); }
.spd-type-g .spd-card-bar { background: var(--color-g); }
.spd-type-a .spd-card-bar { background: var(--color-a); }
.spd-type-l .spd-card-bar { background: var(--color-l); }
.spd-type-s .spd-card-bar { background: var(--color-s); }
.spd-card-pct { font-size: 0.78rem; color: #888; }

/* 一覧タグ */
.spd-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.spd-type-c.spd-tag { background: var(--color-c); }
.spd-type-g.spd-tag { background: var(--color-g); }
.spd-type-a.spd-tag { background: var(--color-a); }
.spd-type-l.spd-tag { background: var(--color-l); }
.spd-type-s.spd-tag { background: var(--color-s); }

.spd-scores { font-family: monospace; color: #777; font-size: 0.88rem; }

.spd-pagination { margin-top: 12px; }
.spd-pagination .button { margin-right: 4px; }

/* 学年バッジ */
.spd-grade-badge {
    display: inline-block;
    background: #eaf4fd;
    color: #2980b9;
    border: 1px solid #aad4f0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 学年フィルターボタン */
.spd-grade-filter-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.spd-grade-filter-btns .button { font-weight: 600; }

/* 削除ボタン */
.spd-del-btn {
    color: #c0392b !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid #e9b5b5;
    border-radius: 4px;
    background: #fdf2f2;
    cursor: pointer;
}
.spd-del-btn:hover { background: #fce8e8; }

/* スコア凡例 */
.spd-score-legend { display: flex; flex-direction: column; gap: 8px; }
.spd-legend-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid #ccc;
}
.spd-type-c-bg { background: #fdf2f2; border-left-color: var(--color-c); }
.spd-type-g-bg { background: #f0faf5; border-left-color: var(--color-g); }
.spd-type-a-bg { background: #eaf4fd; border-left-color: var(--color-a); }
.spd-type-l-bg { background: #f5f0fc; border-left-color: var(--color-l); }
.spd-type-s-bg { background: #fef9f0; border-left-color: var(--color-s); }

.spd-legend-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.spd-type-c .spd-legend-code, .spd-legend-code.spd-type-c { background: var(--color-c); }
.spd-legend-code.spd-type-c { background: var(--color-c); }
.spd-legend-code.spd-type-g { background: var(--color-g); }
.spd-legend-code.spd-type-a { background: var(--color-a); }
.spd-legend-code.spd-type-l { background: var(--color-l); }
.spd-legend-code.spd-type-s { background: var(--color-s); }

.spd-legend-name  { width: 160px; flex-shrink: 0; font-size: 0.9rem; }
.spd-legend-theory { flex: 1; font-size: 0.78rem; color: #777; line-height: 1.4; }
.spd-legend-desc  { width: 220px; flex-shrink: 0; font-size: 0.8rem; color: #555; line-height: 1.45; }

/* ════ 公開結果ページ ════ */
.spd-public-results { max-width: 900px; margin: 0 auto; font-family: var(--spd-font); }

/* セクション共通ラッパー（公開ページ用） */
.spd-pub-section {
    background: #fff;
    border-radius: var(--spd-radius);
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    padding: 20px 20px 16px;
    margin-bottom: 20px;
}
.spd-pub-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--spd-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
}
.spd-legend-note {
    font-size: 0.82rem;
    color: #777;
    margin-top: 12px;
    line-height: 1.65;
}

/* 学年タブ */
.spd-grade-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.spd-grade-tab {
    padding: 8px 20px;
    border-radius: 50px;
    border: 2px solid #dde;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--spd-primary) !important;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.spd-grade-tab:hover  { border-color: #2980b9; background: #eaf4fd; }
.spd-grade-tab.active { background: #2980b9; border-color: #2980b9; color: #fff !important; }

/* タイプ分布 */
.spd-pub-dist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
}
.spd-pub-dist-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spd-pub-dist-icon { font-size: 1.1rem; flex-shrink: 0; }
.spd-pub-dist-name { font-size: 0.75rem; font-weight: 700; width: 70px; flex-shrink: 0; }
.spd-pub-dist-cnt  { font-size: 0.82rem; font-weight: 700; color: #555; flex-shrink: 0; white-space: nowrap; }
.spd-pub-dist-item .spd-card-bar-wrap { flex: 1; }

/* 件数表示 */
.spd-pub-total { font-size: 0.88rem; color: #666; margin-bottom: 10px; }
.spd-no-data   { color: #888; padding: 20px 0; }

/* 公開テーブル */
.spd-pub-table-wrap { overflow-x: auto; }
.spd-pub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-family: var(--spd-font);
}
.spd-pub-table th {
    background: #2c3e50;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.82rem;
    white-space: nowrap;
}
.spd-pub-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.spd-pub-table tr:nth-child(even) td { background: #f9f9f9; }
.spd-pub-table tr:hover td { background: #eaf4fd; }
.spd-pub-name { font-weight: 700; }
.spd-pub-date { color: #999; font-size: 0.78rem; white-space: nowrap; }
.spd-th-score { min-width: 140px; }

/* ミニスコアバー */
.spd-pub-scores { min-width: 130px; }
.spd-mini-bar-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}
.spd-mini-label {
    width: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #888;
    flex-shrink: 0;
}
.spd-mini-bar-wrap { flex: 1; height: 7px; background: #e8e8e8; border-radius: 4px; overflow: hidden; }
.spd-mini-bar      { height: 100%; border-radius: 4px; transition: width .4s; }
.spd-mini-c { background: var(--color-c); }
.spd-mini-g { background: var(--color-g); }
.spd-mini-a { background: var(--color-a); }
.spd-mini-l { background: var(--color-l); }
.spd-mini-s { background: var(--color-s); }
.spd-mini-val { width: 14px; text-align: right; font-size: 0.7rem; color: #888; }

@media (max-width: 600px) {
    .spd-legend-row    { flex-wrap: wrap; }
    .spd-legend-theory, .spd-legend-desc { width: 100%; }
    .spd-pub-scores    { display: none; }
    .spd-th-score      { display: none; }
}