/* =================================================================
 * Hearing Test Specific Styles
 * =================================================================
 */

/* --- 新規追加: Utility Classes --- */
.title-clamp {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.alert-max-w {
    max-width: 800px;
}

.th-freq {
    width: 30%;
}

.th-age {
    width: 25%;
}

.btn-x-share {
    background-color: #000 !important;
    border: none;
    color: #fff;
}

.btn-x-share:hover {
    background-color: #333 !important;
    color: #fff;
}

.btn-fb-share {
    background-color: #1877F2 !important;
    border: none;
    color: #fff;
}

.btn-fb-share:hover {
    background-color: #166fe5 !important;
    color: #fff;
}

/* --- 既存スタイル --- */
#visualizer {
    background-color: #000;
    border: 1px solid #444;
    box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
}

#freq-display {
    font-family: 'Roboto Mono', monospace;
    letter-spacing: -2px;
}

/* スライダー調整 */
input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
}

/* ダークモード対応 */
[data-bs-theme="dark"] #visualizer {
    border-color: #666;
}

/* * 以前ここにあった [data-bs-theme="dark"] .card-header.bg-primary の
 * バイオレット(#5b32a8)強制上書き設定を削除し、標準のブルーに戻しました。
 */

/* シェア画像のプレビュー調整 */
#generated-image {
    max-height: 400px;
    width: auto;
    max-width: 100%;
}

/* =================================================================
 * SEO/GEO 解説コンテンツ（記事セクション）
 * ================================================================= */
.article-section {
    max-width: 820px;
}

.article-section p,
.article-section li {
    line-height: 1.9;
}

.article-section h2 {
    scroll-margin-top: 80px;
}

/* =================================================================
 * ダークモード時の視認性改善（見出し・カード・テーブル等）
 * ================================================================= */

/* 見出しや強調テキスト（.text-dark）を強制的に明るい文字色にする */
[data-bs-theme="dark"] .text-dark {
    color: #f8f9fa !important;
}

/* ダークモードの bg-white（耳年齢の判定表）は少しトーンを落としてなじませる */
[data-bs-theme="dark"] .bg-white {
    background-color: #2c3035 !important;
    color: #c8ced4 !important; /* 約7:1, WCAG AAA水準 */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .bg-light-subtle,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-body-secondary {
    background-color: #2b3035 !important;
}

/* テーブルのダークモード対応 */
[data-bs-theme="dark"] .table .table-light,
[data-bs-theme="dark"] .table .table-light th {
    background-color: #34393f !important;
    color: #e3e6e9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .table {
    color: #c8ced4 !important;
}

[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered td,
[data-bs-theme="dark"] .table-bordered th {
    border-color: rgba(255, 255, 255, 0.08) !important;
}