/* --- 既存のスタイルに以下を追加・上書き --- */

/* 特色検査の入力欄（オレンジ枠） */
.tokusyoku-input { 
    background: #fff9db !important; 
    border-color: #f6ad55 !important; 
}

/* 特色ラベルの強調 */
.label-tokusyoku {
    color: #c05621;
    font-weight: bold;
}

/* 比率エリアのコロンと注釈 */
.ratio-colon {
    font-weight: bold;
    margin-top: 10px;
}

.ratio-note {
    text-align: center;
    font-size: 11px;
    color: #a0aec0;
    margin-top: 8px;
}

/* 結果表示エリアの区切り線 */
.res-separator {
    border: 0;
    border-top: 1px dashed #eee;
    margin: 10px 0;
}

#s-basic-app {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    background: #fdfdfd;
    border-radius: 15px;
    border: 2px solid #eef2f7;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: sans-serif;
    color: #333;
    box-sizing: border-box;
}
.s-calc-title {
    text-align: center;
    color: #334e68;
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 20px;
    border-bottom: 2px solid #2d3748;
    padding-bottom: 10px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 8px;
}
.section-title {
    font-size: 13px;
    font-weight: bold;
    color: #4a5568;
    padding-left: 8px;
    border-left: 4px solid #2d3748;
    margin: 0;
}
.auto-sum-label {
    font-size: 13px;
    font-weight: bold;
    color: #2d3748;
    background: #edf2f7;
    padding: 2px 12px;
    border-radius: 20px;
}
.row-9col {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}
.row-6col {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}
.subject-unit { text-align: center; }
.subject-unit label { 
    display: block; 
    font-size: 13px; 
    color: #718096; 
    margin-bottom: 3px; 
}
.subject-unit input {
    width: 100%;
    padding: 8px 0;
    text-align: center;
    border: 1px solid #cbd2d9;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}
.tokusyoku-input { background: #fff9db !important; border-color: #f6ad55 !important; }

.ratio-area {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 25px;
}
.ratio-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ratio-unit { text-align: center; }
.ratio-unit span { 
    display: block; 
    font-size: 13px; 
    color: #64748b; 
    margin-bottom: 4px; 
}
.ratio-unit input { width: 45px; text-align: center; font-weight: bold; padding: 6px; border: 1px solid #cbd2d9; border-radius: 5px; }

.calc-btn {
    display: block;
    width: 100%;
    /*padding: 16px;*/
    background: #2d3748;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: background 0.2s, opacity 0.2s;
}
.calc-btn:hover {
    opacity: 0.9;
    background: #4a5568;
}

#res_box {
    margin-top: 25px;
    padding: 15px;
    background: white;
    border: 1px solid #eee;
    border-left: 6px solid #2d3748;
    display: none;
}
.res-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}
.res-val { font-weight: bold; color: #2d3748; }

/* 結果表示エリアの最終行（S1値） */
.s-total {
    text-align: center;
    margin-top: 25px !important;  /* 上の文章との間隔をしっかり確保 */
    padding-top: 15px !important; /* 区切り線からの余白 */
    border-top: 1px dashed #eee;
    font-size: 1.1em;             /* 「S1 = 」の文字サイズ調整 */
    font-weight: bold;
}

/* 数字部分（S1 = の横に並ぶ） */
.s-total span { 
    display: inline;              /* 改行させない（デフォルト） */
    margin-left: 5px;             /* 「=」と数字の間に少し隙間を作る */
    font-size: 1.8em;             /* 数字を強調するために大きく */
    color: #e53e3e; 
    font-weight: bold;
    vertical-align: middle;       /* 文字と数字の高さ中央を合わせる */
}

/* 文字の間隔を調整するクラス */
.mt-15 {
    margin-top: 15px !important;
    display: inline-block; /* marginを有効にするために必要 */
    width: 100%;           /* 中央揃えを維持するために横幅をいっぱいに */
}

/* PCサイズではもう少し広くしたい場合 */
@media (min-width: 1024px) {
    .mt-lg-20px {
        margin-top: 20px !important;
    }
}

@media (max-width: 480px) {
    .subject-unit label { font-size: 11px; }
    .auto-sum-label { font-size: 11px; }
    #s-basic-app { padding: 15px; }
}