:root {
    /* 配色: 背景は白ベース */
    --color-bg-main: #ffffff;
    --color-bg-card: #ffffff;

    /* 青の役割別濃淡ルール */
    --color-primary-dark: #004d85;
    /* タイトル：最も濃い青 */
    --color-primary: #016baf;
    /* 主要ボタン・強調：中間〜やや濃い青 */
    --color-primary-muted: #568ebc;
    /* サブタイトル・補助：少し淡い青 */
    --color-primary-light: #f0f7fd;
    /* 補助ボックス・強調背景：最もやわらかい青 */

    --color-accent-red: #ff5757;
    --color-text-main: #333333;
    --color-text-muted: #666666;
    --color-border: #e2e8f0;
    /* 枠線も少しやわらかく */

    /* 判定結果の色（少し落ち着かせたトーン） */
    --color-result-red: #ef4444;
    --color-result-red-bg: #fef2f2;
    --color-result-yellow: #f59e0b;
    --color-result-yellow-bg: #fffbeb;
    --color-result-green: #10b981;
    --color-result-green-bg: #ecfdf5;

    /* タイポグラフィとレイアウト */
    --font-family: 'Noto Sans JP', sans-serif;
    --max-width: 520px;

    /* 余白ルールの統一（呼吸感のある余白） */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;

    /* 質感の統一（角丸と影） */
    --border-radius-sm: 8px;
    --border-radius-md: 8px;
    --border-radius-lg: 8px;
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
    --shadow-btn: 0 4px 10px rgba(1, 107, 175, 0.12), 0 2px 4px rgba(1, 107, 175, 0.06);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* 禁則処理を守るため break-word に変更し、自然な折り返しに */
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 320px;
}

/* アプリケーションのコンテナ（スマホ最適化・中央配置） */
.app-container {
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--color-bg-main);
    position: relative;
    overflow-x: hidden;
}

/* 画面切り替えの仕組み */
.screen {
    display: none;
    padding: var(--spacing-md) var(--spacing-md) calc(var(--spacing-xl) * 3);
    min-height: 100vh;
    animation: fadeIn 0.3s ease-in-out;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 共通コンポーネント: ボタン操作感と見た目の統一 */
.btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-weight: 600;
    /* やや上品に */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: inherit;
    padding: 14px var(--spacing-md);
    /* 高さを統一 */
}

.btn:active {
    transform: translateY(1px) scale(0.99);
}

.btn-large {
    font-size: 17px;
    padding: 16px var(--spacing-md);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-btn);
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(1, 107, 175, 0.15), 0 3px 6px rgba(1, 107, 175, 0.08);
        /* 軽く浮く */
        background-color: #0162a3;
        /* ほんの少し濃く */
    }
}

.btn-primary:active {
    box-shadow: 0 2px 4px rgba(1, 107, 175, 0.06);
    background-color: #005691;
}

.btn-secondary {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary-light);
}

.btn-answer {
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

@media (hover: hover) {
    .btn-answer:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        border-color: #cbd5e1;
    }
}

.btn-answer:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    background-color: #f8fafc;
}

/* 「はい」ボタンなど主ボタン特有のスタイル */
.btn-yes {
    background-color: #ffffff;
    /* JSで色を乗せるまでベースは白 */
    border-color: #cbd5e1;
    color: var(--color-primary-dark);
    border-width: 2px;
    /* 枠線を少しだけはっきりさせて主アクション感を出す */
    font-weight: 700;
    /* 文字色を濃く（強く）見せる */
}

@media (hover: hover) {
    .btn-yes:hover {
        background-color: var(--color-primary-light);
        border-color: #a0c4e8;
    }
}

.btn-yes:active {
    background-color: var(--color-primary-light);
}

/* PAT画面用の少し強めの「はい」ボタン */
.btn-pat-yes {
    background-color: #fff7ed;
    /* 薄いオレンジ背景 */
    border-color: #fdba74;
    /* 少し軽やかで明るいオレンジ枠線 */
    color: #c2410c;
    /* 濃いオレンジテキスト */
    box-shadow: 0 4px 10px rgba(251, 146, 60, 0.08);
    /* 影も少し優しく */
    padding: 12px var(--spacing-md);
    /* 少し低くして軽やかさを出す */
}

@media (hover: hover) {
    .btn-pat-yes:hover {
        background-color: #ffedd5;
        border-color: #f97316;
    }
}

.btn-pat-yes:active {
    background-color: #ffedd5;
    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.05);
}

/* 「いいえ」ボタンなど補助ボタン特有のスタイル */
.btn-no {
    color: var(--color-text-muted);
    border-color: #e2e8f0;
    /* 薄いグレー枠線を明示して存在感を少し出す */
    background-color: #ffffff;
}

.btn-category {
    background-color: var(--color-bg-card);
    /* カードを白ベースに変更 */
    color: var(--color-text-main);
    /* テキストはメインカラー寄り */
    border: none;
    /* 枠線を消して影で表現 */
    border-radius: var(--border-radius-md);
    padding: 14px 38px 14px 16px;
    /* 高さを少し低く調整 */
    font-size: 16px;
    font-weight: 600;
    /* 安定感・信頼感 */
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    /* 薄く洗練された二重影 */
    margin-bottom: var(--spacing-md);
    /* カード間の余白を適切に */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* なめらかなトランジション */
    position: relative;
    /* 左端のカラーバー配置のため */
    overflow: hidden;
    /* 左端のカラーバーをカード内に収める */
}

.category-name {
    display: block;
    padding-right: 10px;
}

.category-source {
    display: block;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* 左端の細い色アクセント用 (擬似要素) */
.btn-category::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    /* 細いライン */
    background-color: var(--color-primary-light);
    /* デフォルト色 */
}

/* 各カテゴリのアクセントカラー */
.btn-category.cat-fever::before {
    background-color: #fca5a5;
}

/* やや赤寄り */
.btn-category.cat-cough::before {
    background-color: #93c5fd;
}

/* 青 */
.btn-category.cat-vomit::before {
    background-color: #67e8f9;
}

/* 水色 */
.btn-category.cat-convulsion::before {
    background-color: #fdba74;
}

/* オレンジ */
.btn-category.cat-rash::before {
    background-color: #f9a8d4;
}

/* ややピンク寄り */
.btn-category.cat-stomach::before {
    background-color: #fcd34d;
}

/* 黄土色 */
.btn-category.cat-head::before {
    background-color: #d1d5db;
}

/* グレー寄り */

@media (hover: hover) {
    .btn-category:hover {
        transform: translateY(-2px);
        /* ホバー時に少し浮く */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.03);
        /* 浮いた時の影 */
    }
}

.btn-category:active {
    background-color: #f4f6f8;
    /* 押下時少し沈んだ色に */
    transform: translateY(1px);
    /* 軽く沈む */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    /* 影が小さく弱くなる */
}

/* ミニマルな chevron アイコン */
.btn-category::after {
    content: "";
    /* 文字のアイコンではなく、CSSボーダーで作る矢印に変更 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #b0b8c1;
    /* 落ち着いたグレー色 */
    border-right: 2px solid #b0b8c1;
    transform: rotate(45deg);
    /* ひし形にして chevron の形に */
    margin-right: 4px;
    position: absolute;
    right: 12px;
    /* 少し余裕を持たせる */
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.btn-category:active::after {
    transform: rotate(45deg) translateX(2px) translateY(-2px);
    /* タップ時の一体感 */
}

/* ヘッダー・戻るボタン */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-sm);
    /* 少し狭める */
    margin-bottom: var(--spacing-sm);
}

.question-header-bar {
    display: block;
    margin-bottom: var(--spacing-lg);
    /* 質問画面は少し余裕を持たせる */
    padding-bottom: 0;
}

.question-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.question-header-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.category-accent-text {
    /* JSでカテゴリごとの色を付与するためのベースクラス */
    margin-bottom: 12px !important;
    /* 進行表示との間に自然な呼吸を空ける */
}

.progress-indicator {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-primary-light);
    padding: 4px 16px;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* わずかに境界線 */
}

.btn-back {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.btn-back::before {
    content: "←";
    margin-right: 4px;
    font-size: 16px;
}

@media (hover: hover) {
    .btn-back:hover {
        color: var(--color-text-main);
    }
}

.btn-top-link {
    background: transparent;
    border: none;
    color: var(--color-primary-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding: 8px 0;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .btn-top-link:hover {
        color: var(--color-primary);
    }
}

.btn-back-link {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    padding: 12px 0;
    width: 100%;
    margin-top: 2px;
    /* 主導線（いいえボタン）から離れすぎないように上へ寄せる */
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .btn-back-link:hover {
        color: var(--color-text-main);
    }
}

/* 共通コンポーネント: カード・ボックス・説明領域の統一 */
.card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.02);
    /* わずかな白浮きを防ぐ境界線 */
}

.info-card {
    /* 補助ボックス（淡い青） */
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    font-size: 14px;
    line-height: 1.6;
    border: none;
    box-shadow: none;
}

/* タイポグラフィ補助 */
h1,
h2,
h3,
h4 {
    line-height: 1.4;
    /* text-wrap: balance; は意図しない1文字改行を引き起こすことがあるため外す */
}

.content-area {
    padding-bottom: 40px;
}

/* ---- 画面別スタイル ---- */

/* トップ画面 */
#screen-top {
    /* 削除: display: flex; デフォルトでflexにすると非表示が効かなくなるため */
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 22px;
}

#screen-top.active {
    display: flex;
}

.top-header {
    margin-bottom: 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.top-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% + 32px);
    margin: -22px -16px 18px;
    padding: 22px 16px 20px;
    background:
        linear-gradient(180deg, #fff8dc 0%, #fffdf5 62%, #ffffff 100%);
    border-bottom: 1px solid rgba(66, 175, 227, 0.12);
}

.hero-image {
    width: 28%;
    max-width: 112px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 5px 8px rgba(1, 107, 175, 0.16));
}

.app-title {
    color: var(--color-primary-dark);
    background-color: transparent;
    border-radius: 0;
    font-size: 23px;
    /* トップのタイトルは最も大きく */
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 2px auto 0;
    max-width: 352px;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.app-title::after {
    content: none;
}

.app-subtitle {
    background-color: rgba(66, 175, 227, 0.13);
    border: 1px solid rgba(66, 175, 227, 0.24);
    border-radius: 999px;
    color: var(--color-primary-muted);
    font-size: 13px;
    font-weight: 700;
    margin-top: 0;
    letter-spacing: 0;
    padding: 3px 14px 4px;
    position: relative;
    z-index: 2;
}

.top-description {
    width: 100%;
    max-width: 352px;
    font-size: 15px;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-main);
    line-height: 1.7;
    text-align: center;
    word-break: keep-all;
    position: relative;
    z-index: 1;
}

.top-description p + p {
    margin-top: 9px;
}

.book-lead {
    background-color: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(66, 175, 227, 0.16);
    border-radius: var(--border-radius-lg);
    box-shadow: none;
    padding: 10px 12px 11px;
    position: relative;
}

.book-badge {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 999px;
    color: #e5397d;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    padding: 0;
    transform: translateY(-2px);
}

.book-name {
    display: block;
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
}

.book-lead .lead-line {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
}

.lead-line,
.notice-line {
    display: block;
}

.lead-line {
    display: block;
    white-space: nowrap;
}

.book-guide {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-text-main);
    font-size: 14.5px;
    font-weight: 500;
    padding: 0 6px;
}

.btn-start {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 352px;
    width: 100%;
}

.top-notice {
    font-size: 13px;
    color: var(--color-text-main);
    text-align: center;
    background-color: #fbfdff;
    border: 1px solid var(--color-border);
    padding: 14px 12px;
    /* 左右の余白を詰めてスマホでの文字領域を広く確保 */
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 352px;
    box-shadow: none;
}

.source-summary {
    margin-top: var(--spacing-lg);
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: #fbfdfc;
    color: var(--color-text-main);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.source-kicker {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 2px;
}

.source-note {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-top: 4px;
}

.top-notice-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.top-notice ul {
    display: block;
    text-align: left;
    list-style-type: none;
    padding-left: 0;
    color: var(--color-text-muted);
    /* 少し落ち着いたトーン */
    font-weight: 400;
}

.top-notice li {
    position: relative;
    padding-left: 1.4em;
    /* ぶら下げインデントの余白 */
    margin-bottom: 9px;
    /* 行間を開けて読みやすく */
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: normal;
}

.top-notice li:last-child {
    margin-bottom: 0;
}

.top-notice li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* 視線が自然に止まるためのハイライトクラス */
.notice-highlight {
    color: var(--color-text-main);
    font-weight: 500;
}

/* PAT画面・質問画面共通 */
.step-label {
    font-size: 11px;
    /* 少し小さく */
    font-weight: 600;
    /* 少し軽く */
    color: var(--color-primary-dark);
    background-color: #f1f5f9;
    /* さらに淡い背景に変更して主張を抑える */
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
    /* タイトルとの間隔をさらに少しだけ広げて階層感アップ (14px -> 20px) */
    text-align: center;
}

/* PAT画面用のSTEPラベル（少し注意喚起のトーン） */
.step-label-pat {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.content-area {
    text-align: center;
    padding-bottom: 40px;
}

.section-title,
.category-header {
    color: var(--color-primary-dark);
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 20px;
    /* カードとの間隔を少しだけ広げる (16px -> 20px) */
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0;
}

/* ひとまとまりの質問カード */
.question-card {
    position: relative;
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg) var(--spacing-lg) 16px;
    /* 下側のパディングだけ少し減らして全体を引き締める */
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.instruction-text-pat {
    font-size: 14.5px;
    font-weight: 700;
    color: #c2410c;
    text-align: center;
    background-color: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 10px 14px;
    /* 上下paddingを少し抑えて間延び防止 */
    border-radius: var(--border-radius-md);
    margin-bottom: 24px;
    /* 次のボックスへの間隔を増やす */

    /* 横に広がりすぎないように幅を絞り、中央寄せ */
    width: 90%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.pat-criteria-box {
    margin-top: var(--spacing-md);
    background-color: #fafaf9;
    /* ウォームグレーの極薄い背景 */
    border: 1px solid #e5e5e4;
    border-radius: var(--border-radius-md);
    padding: 16px;
}

.pat-rule {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-md);
    /* 補足文と箇条書きの間をさらに空けてメリハリ (sm -> md) */
    text-align: center;
    line-height: 1.4;
}

.pat-rule-highlight {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}

.instruction-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.small-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary-muted);
    display: block;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    line-height: 1.5;
}

.question-container {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.specific-question-card {
    padding: 24px 16px 18px;
    /* 左右のpaddingを適度に保つ */
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.q-label {
    position: absolute;
    top: 16px;
    /* 一定位置に固定 */
    left: 16px;
    font-size: 13px;
    /* 小さめ */
    font-weight: 600;
    /* 質問文より一段軽い */
    color: var(--color-primary-muted);
}

.question-text {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 24px;
    /* Q番号の下に自然に座るように上余白を確保 */
    text-align: center;
    line-height: 1.5;
    color: var(--color-text-main);
    word-break: normal;
    overflow-wrap: break-word;
}

.source-details {
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: #fbfdfc;
    text-align: left;
    overflow: hidden;
}

.source-details summary {
    cursor: pointer;
    padding: 12px 14px;
    color: var(--color-primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.source-details > div {
    padding: 0 14px 14px;
}

.question-instruction-wrapper {
    margin-top: 20px;
    background-color: #f8fafc;
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    /* ゆとりを持たせた余白に戻す */
    width: 100%;
}

.question-instruction {
    font-size: 14px;
    /* 通常の読みやすいサイズに戻す */
    color: var(--color-text-main);
    text-align: center;
    margin-bottom: 0;
    line-height: 1.6;
    /* ゆったりめの行間 */
    width: 100%;
    max-width: none;
    margin: 0 auto;
    word-break: normal;
    /* 単語の途中での改行を防ぐ */
    overflow-wrap: break-word;
    /* 自然な折り返しを許可する */
}

/* カテゴリごとの文字色アクセント用ユーティリティクラス（JSから付与） */
/* 少し控えめなアクセントカラーに調整 */
.text-cat-fever {
    color: #e11d48 !important;
}

.text-cat-cough {
    color: #0284c7 !important;
}

.text-cat-vomit {
    color: #0891b2 !important;
}

.text-cat-convulsion {
    color: #ea580c !important;
}

.text-cat-rash {
    color: #db2777 !important;
}

.text-cat-stomach {
    color: #ca8a04 !important;
}

.text-cat-head {
    color: #4b5563 !important;
}

/* カテゴリごとの背景色アクセント用（はいボタンのホバー時や補助背景） */
/* はいボタンの「主アクション感」を出すために少しだけ背景を締め、枠線をはっきりさせる */
.bg-cat-fever {
    background-color: #ffe4e6 !important;
    border-color: #fda4af !important;
}

.bg-cat-cough {
    background-color: #e0f2fe !important;
    border-color: #7dd3fc !important;
}

.bg-cat-vomit {
    background-color: #cffafe !important;
    border-color: #67e8f9 !important;
}

.bg-cat-convulsion {
    background-color: #ffedd5 !important;
    border-color: #fdba74 !important;
}

.bg-cat-rash {
    background-color: #fce7f3 !important;
    border-color: #f9a8d4 !important;
}

.bg-cat-stomach {
    background-color: #fef9c3 !important;
    border-color: #fde047 !important;
}

.bg-cat-head {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
}

.pat-list {
    font-size: 15px;
    color: var(--color-text-main);
    list-style-type: none;
    padding-left: 0;
    margin-top: 12px;
    margin-bottom: 0;
}

.pat-list li {
    position: relative;
    padding-left: 14px;
    /* ドットと文言の距離を少しだけ詰める */
    margin-bottom: 4px;
    /* 行間を更に詰めてチェック項目らしく */
    line-height: 1.4;
}

.pat-list li::before {
    content: "•";
    color: #3b82f6;
    /* 中間のアクセント青 */
    position: absolute;
    left: 0px;
    /* ドット位置を微調整 */
    top: -1px;
    font-size: 16px;
    line-height: 1.2;
}

.button-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* はい、いいえの間隔を少し詰める (元のvar(--spacing-sm) 16px より小さく) */
}

/* カテゴリ選択画面 */
.category-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* 結果画面 */
.result-banner {
    border-radius: var(--border-radius-md);
    padding: 24px 20px;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    /* Stronger baseline shadow */
    border: 2px solid transparent;
}

.result-banner.red {
    background-color: var(--color-result-red-bg);
    border-color: #fca5a5;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
    /* Tinted urgent shadow */
}

.result-banner.red .result-title {
    color: var(--color-result-red);
}

.result-banner.yellow {
    background-color: var(--color-result-yellow-bg);
    border-color: #fde047;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}

.result-banner.yellow .result-title {
    color: #d97706;
    /* Solid readability */
}

.result-banner.green {
    background-color: var(--color-result-green-bg);
    border-color: #a7f3d0;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.result-banner.green .result-title {
    color: var(--color-result-green);
}

.result-title {
    font-size: 22px;
    /* 少し見出しを小さくしてバランスをとる */
    font-weight: 800;
    /* Extra bold */
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0;
    line-height: 1.3;
}

.result-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    line-height: 1.7;
    /* 行間を少し広げて落ち着かせる */
    max-width: 280px;
    /* 少し広げて余裕を持たせる */
    margin: 0 auto;
    text-align: center;
    word-break: keep-all;
    /* 単語の途中での改行を防ぐ（日本語の文節をなるべく維持） */
    overflow-wrap: anywhere;
    /* 念のためコンテナから溢れる場合は折り返す */
}

/* Card Priorities */
.signs-section {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

.tell-section {
    background-color: #f8fafc;
    /* Very light grey */
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    /* Fainter shadow */
}

.section-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center to match layout */
}


.signs-container,
.tell-doctor-wrapper {
    display: flex;
    justify-content: center;
    /* 中身のブロックを中央に配置 */
    width: 100%;
}

.signs-list-wrapper {
    display: block;
    /* Flex子要素として自然に幅が縮小する */
}

.signs-list,
.tell-doctor-list,
.source-points,
.source-related {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    /* ブロック内でテキストを左揃え */
    font-size: 15px;
    color: var(--color-text-main);
}

.signs-list li,
.tell-doctor-list li,
.source-points li,
.source-related li {
    position: relative;
    padding-left: 1.2em;
    /* ドットのための余白 */
    margin-bottom: 12px;
    /* 縦の余白を統一 */
    line-height: 1.5;
}

.signs-list li::before,
.tell-doctor-list li::before,
.source-points li::before,
.source-related li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--color-primary-muted);
    font-size: 18px;
    font-weight: bold;
}

.source-section {
    background: #fbfdfc;
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.source-chapter {
    color: var(--color-text-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.source-page {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.source-reference {
    line-height: 1.5;
    margin-bottom: 12px;
    text-align: left;
}

.source-reference .source-page {
    margin-right: 8px;
}

.source-related-title {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 12px;
    margin-bottom: 6px;
    text-align: left;
}

.source-related span {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
}

.global-notice {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: min(100%, var(--max-width));
    transform: translateX(-50%);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    backdrop-filter: blur(10px);
    z-index: 20;
}

@media (min-width: 700px) {
    body {
        background: #f5f9fc;
    }

    .app-container {
        min-height: 100vh;
        box-shadow: 0 0 0 1px rgba(1, 107, 175, 0.08);
    }
}

@media (max-width: 360px) {
    .btn-category {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .category-source {
        margin-left: 0;
        white-space: normal;
    }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* ボタン間隔を詰める */
    margin-top: var(--spacing-md);
}