:root {
    --header-bg: #00004d;
    --body-bg: #e0e0e0;
    --text-color: #000;
    --accent-green: #49be5d;
    --accent-yellow: #f4d536;
    --accent-red: #f35a34;
    --accent-dark-red: #cc0000;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--body-bg);
    margin: 0;
    padding: 0;
    color: var(--text-color);
}

/* ヘッダーエリア */
header {
    background-color: var(--header-bg);
    color: white;
    padding: 15px 20px;
    border-bottom: 4px solid #fff;
    position: relative; /* 子要素のabsolute配置の基準 */
    display: flex;
    justify-content: center; /* タイトルを中央寄せ */
    align-items: center;     /* 上下中央寄せ */
    min-height: 40px;        /* 高さ確保 */
}

/* 設定エリア（右上のプルダウン） */
.settings-bar {
    position: absolute;      /* ヘッダー内での絶対配置 */
    right: 20px;             /* 右端から20px */
    top: 50%;                /* 上から50%の位置 */
    transform: translateY(-50%); /* 自身の高さの半分だけ上にずらして完全な上下中央にする */
    display: flex;
    gap: 10px;
    z-index: 10;
}

select {
    padding: 5px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
}

h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-align: center;
}

/* メインコンテンツ */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.flag-icon {
    width: 36px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.flag-icon-large {
    width: 48px;
    margin-left: 10px;
}

.team-section {
    margin-bottom: 30px;
}

h2 {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.description {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* 入力テーブル */
.input-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 0px;
}

.input-table th {
    text-align: left;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
}

.input-table td {
    padding: 0px;
    vertical-align: middle;
}

.team-name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
}

input[type="number"] {
    width: 50px;
    padding: 5px;
    font-size: 18px;
    text-align: right;
    border: 1px solid #999;
    border-radius: 4px;
    font-weight: bold;
}

.percent-label {
    font-size: 16px;
    margin-left: 4px;
}

/* 結果エリア */
.result-summary {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.total-prob {
    font-size: 28px;
    font-weight: bold;
}

.result-breakdown {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background-color: transparent;
}

.result-table th {
    background-color: #b0c4de;
    padding: 8px;
    border: 1px solid #999;
    font-size: 14px;
}

.result-table td {
    padding: 0px;
    height: 35px;
    border: 1px solid #999;
    background-color: white;
    font-weight: bold;
}

/* ステータス色 */
.status-safe { background-color: var(--accent-green) !important; color: black; }
.status-likely { background-color: var(--accent-green) !important; color: black; }
.status-border { background-color: var(--accent-yellow) !important; color: black; }
.status-miracle { background-color: var(--accent-red) !important; color: black; }
.status-out { background-color: var(--accent-dark-red) !important; color: white; }

.error-msg {
    color: red;
    font-size: 12px;
    display: none;
}

hr {
    border: 0;
    border-top: 1px solid #999;
    margin: 15px 0;
}

/* 選択ボタンのスタイル */
.btn-select {
    display: inline-block;
    margin-left: 15px;
    padding: 5px 12px;
    font-size: 14px;
    background-color: #eee;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    transition: background-color 0.2s;
    font-weight: normal;
}

.btn-select:hover {
    background-color: #ddd;
    border-color: #999;
}

/* スマホ対応 */
@media (max-width: 600px) {
    header {
        flex-direction: column; /* スマホでは縦並び */
        padding-top: 50px;      /* 上にスペースを空ける */
    }
    .settings-bar {
        top: 10px;             /* 上部に配置 */
        right: 10px;           /* 右端 */
        transform: none;       /* 上下中央寄せ解除 */
    }
    .team-name { font-size: 14px; }
    input[type="number"] { width: 40px; font-size: 16px; }
}

/* 選択ボタンのスタイル */
.btn-select {
    display: inline-block;
    margin-left: 15px;
    padding: 5px 12px;
    font-size: 14px;
    background-color: #eee;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    transition: background-color 0.2s;
    font-weight: normal;
}

.btn-select:hover {
    background-color: #ddd;
    border-color: #999;
}

/* シェアボタンのスタイル */
.btn-share {
    background-color: #008CBA; /* 青色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-share:hover {
    background-color: #007B9A;
}

/* スマホ対応 */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        padding-top: 50px;
    }
    .settings-bar {
        top: 10px;
        right: 10px;
        transform: none;
    }
    .team-name { font-size: 14px; }
    input[type="number"] { width: 40px; font-size: 16px; }
    
    .btn-share {
        width: 100%; /* スマホでは幅いっぱい */
        margin-top: 10px;
    }
}

/* フッター */
footer {
    text-align: center;
    padding: 10px 0;
    margin-top: 0px;
    border-top: 1px solid #ccc;
    background-color: #f9f9f9;
}