/* グローバルスタイルとリセット */
:root {
    --primary-color: #007aff;
    --light-gray: #f0f0f0;
    --medium-gray: #ddd;
    --dark-gray: #555;
    --card-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}
button {
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
}
.hidden {
    display: none !important;
}

/* ヘッダー */
header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 20px;
    text-align: center;
}
header h1 {
    font-size: 20px;
}

/* メインコンテナ */
#app-container {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

/* セクション1: フィルター */
#filters {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}
#filters h2 {
    font-size: 18px;
    margin-bottom: 15px;
}
.filter-group {
    margin-bottom: 15px;
}
.filter-group label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}
.filter-group input[type="text"],
.filter-group select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid var(--medium-gray);
    border-radius: 5px;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 8px;
}
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

/* セクション2: カードコンテナ */
#card-container {
    display: grid;
    /* スマホでは1列、700px以上で2列、1100px以上で3列 */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
}
/* カードのスタイル */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-image-container {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdfdfd;
    border-bottom: 1px solid var(--light-gray);
}
.card-image {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
}
.card-image-na {
    color: var(--medium-gray);
    font-size: 14px;
}
.card-content {
    padding: 15px;
}
.card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.card-manufacturer {
    font-size: 14px;
    color: var(--dark-gray);
    margin-bottom: 15px;
}
.card-features {
    list-style: none;
    font-size: 14px;
}
.card-features li {
    margin-bottom: 8px;
    display: flex;
}
.card-features li strong {
    min-width: 80px;
    color: var(--dark-gray);
}
.card-actions {
    margin-top: auto;
    padding: 15px;
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-actions .compare-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}
.card-actions input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* セクション3: 比較バー */
#comparison-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
    transform: translateY(0);
    transition: transform 0.3s ease;
}
#comparison-bar.hidden {
    transform: translateY(100%);
}
#comparison-count {
    font-size: 16px;
    font-weight: bold;
}
#compareButton {
    background-color: white;
    color: var(--primary-color);
}
#resetButton {
    background-color: var(--dark-gray);
    color: white;
    margin-left: 10px;
}

/* style.css の「セクション4」以降を、このコードで置き換えてください */

/* セクション4: 比較モーダル */
#comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
#comparison-modal.hidden {
    display: none;
}
.modal-content {
    background-color: white;
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    height: 90%;
    display: flex;
    flex-direction: column;
}
#closeModalButton {
    align-self: flex-end;
    background: none;
    font-size: 28px;
    color: var(--dark-gray);
    padding: 10px;
}
.modal-content h2 {
    font-size: 20px;
    text-align: center;
    padding: 0 15px 15px;
}
#comparison-table-container {
    overflow-x: auto; /* ★ テーブルが横にはみ出たらスクロール ★ */
    flex-grow: 1;
    padding: 0 15px 15px;
}
/* 比較テーブルのスタイル */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px; /* 横スクロールを促す最小幅 */
}
.comparison-table th,
.comparison-table td {
    border: 1px solid var(--medium-gray);
    padding: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}
.comparison-table th {
    background-color: var(--light-gray);
    font-weight: bold;
    position: sticky;
    left: 0;
    z-index: 1;
}
.comparison-table td {
    text-align: center;
}
/* 比較テーブルの1列目（項目名）を固定 */
.comparison-table tr th:first-child {
    background-color: white;
    min-width: 120px;
}
.comparison-table img {
    max-width: 120px;
    height: auto;
}
.comparison-table .link-button {
    display: inline-block;
    padding: 4px 8px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}
.comparison-table .link-na {
    color: #999;
}
.comparison-table .iso-true {
    color: #006421; font-weight: bold;
}
.comparison-table .iso-false {
    color: #a40000;
}
/* 比較テーブルのセルを中央揃えに */
.comparison-table td {
    vertical-align: middle;
}
/* スマホ連携セルの行間（line-height）を調整 */
.comparison-table .cell-smartphone {
    line-height: 1.5;
    text-align: left; /* 「○ あり」などを左揃えに */
    padding-left: 15px !important;
}
/* --- 比較テーブル：提案3（少数派）の強調スタイル --- */
.comparison-table td.highlight-diff {
    background-color: #fffbe6; /* 薄い黄色 */
    font-weight: 600;
    /* 枠線でさらに強調 */
    box-shadow: inset 0 0 0 2px #ffd966; 
}

/* --- 1. 比較バナーの被り防止 --- */
/* 比較バナー表示時に、カードコンテナの下に余白を追加 */
#app-container.comparison-bar-active {
    padding-bottom: 100px; /* バナーの高さ分の余白 */
}

/* --- 2. カードのセンサー表示スタイル --- */
/* 「対応センサー」のスタイル */
.card-features .feature-sensor {
    font-size: 15px; /* 他(14px)より少し大きく */
    font-weight: 600; /* 少し太く */
    color: #333; /* 濃いめの色に */
    padding-bottom: 10px;
    margin-bottom: 10px;
    /* 他の項目と分けて目立たせるための線 */
    border-bottom: 1px solid var(--light-gray); 
    line-height: 1.4;
}

/* --- タブのスタイル --- */
.tabs {
    display: flex;
    background-color: #f0f0f0;
    padding: 10px 15px 0;
    max-width: 1200px;
    margin: 0 auto;
}
.tab-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: var(--dark-gray);
    border-radius: 8px 8px 0 0;
    background-color: #e0e0e0;
    margin-right: 5px;
}
/* アクティブなタブのスタイル (JavaScriptで制御) */
.tab-button.active {
    background-color: #f9f9f9; /* #app-containerと同じ背景色 */
    color: var(--primary-color);
}

/* --- 「詳細を見る」ボタンのスタイル --- */
.card-actions .detail-button {
    background-color: var(--dark-gray);
    color: white;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: normal;
}
.card-actions .detail-button:hover {
    background-color: #333;
}


/* --- インスリン グループ型UIスタイル --- */
.insulin-group {
    margin-bottom: 30px;
}

.insulin-group h2 {
    font-size: 22px;
    border-bottom: 3px solid var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 5px;
}

/* #card-container (ID) と同じスタイルを 
  .card-container (クラス) にも定義して再利用可能にする
*/
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
}

/* カード内の剤形リストのスタイル */
.card-features .form-list {
    list-style: none;
    padding-left: 10px;
    margin-top: 8px;
    font-size: 13px;
    color: #333;
}
.card-features .form-list li {
    margin-bottom: 4px;
}
.card-features .form-list strong {
    min-width: 80px; /* "プレフィルド:" の幅を揃える */
    color: #555;
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    margin-right: 5px;
}

/* --- 比較テーブル：提案3（少数派）の強調スタイル --- */
.comparison-table td.highlight-diff {
    background-color: #fffbe6; /* 薄い黄色 */
    font-weight: 600;
    /* 枠線でさらに強調 */
    box-shadow: inset 0 0 0 2px #ffd966; 
}

/* style.css の概要カードスタイルを置き換え */

/* --- 概要カードの特別スタイル (V3.2) --- */
/* .overview-card クラスを持つカードに適用 */
.card.overview-card {
    background-color: #f5f5f5;
    border: 2px dashed var(--medium-gray);
    box-shadow: none;
}

/* 概要カードの「剤形一覧」部分のスタイル調整 */
.card.overview-card .form-list strong {
    background-color: #e0e0e0;
    color: #000;
}

/* 概要カードの「比較する」チェックボックスを非表示に */
.card.overview-card .compare-label {
    display: none;
}

/* 概要カードの「メーカー名」を目立たせる */
.card.overview-card .card-manufacturer {
    font-weight: bold;
    color: var(--primary-color);
}

/* --- モーダルのスマホ最適化 --- */
@media (max-width: 600px) {
    #comparison-modal {
        padding: 5px; /* 余白を最小限に */
    }
    .modal-content {
        height: 98%; /* 画面いっぱい使う */
    }
    .modal-content h2 {
        font-size: 16px;
        padding: 5px;
    }
    #comparison-table-container {
        padding: 0 5px 10px;
    }
}

/* --- 1件詳細表示用のリスト形式スタイル --- */
.detail-view-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--medium-gray);
}
.detail-item {
    display: flex;
    padding: 12px 5px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 14px;
    align-items: center;
}
.detail-label {
    flex: 0 0 100px; /* 項目名の幅を固定 */
    font-weight: bold;
    color: var(--dark-gray);
    font-size: 13px;
}
.detail-value {
    flex: 1;
    line-height: 1.4;
    text-align: left;
}
.detail-image-wrapper {
    text-align: center;
    padding: 20px;
}
.detail-image-wrapper img {
    max-width: 200px;
    height: auto;
}

/* --- 画面回転の推奨ガイド --- */
#landscape-hint {
    display: none; /* 基本は非表示 */
    background: #fff3cd;
    color: #856404;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #ffeeba;
}

/* スマホかつ縦向きの時だけ表示 */
@media (max-width: 600px) and (orientation: portrait) {
    .modal-active #landscape-hint {
        display: block;
    }
}

/* テーブルの1列目（項目名）を強力に固定 */
.comparison-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #eee !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    min-width: 100px;
}

/* --- Micro-interactions & Fluidity (動きと触り心地) --- */

/* 1. カードの物理挙動 */
.card {
    /* 変化を滑らかに (Appleのような弾む動き) */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, box-shadow; /* パフォーマンス最適化 */
}

/* ホバー時：少し浮き上がる */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        z-index: 1; /* 重なり順を上げる */
    }
}

/* 2. ボタンのクリック感（沈み込み） */
button, .tab-button, .compare-label {
    transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s;
}
button:active, .tab-button:active, .compare-label:active {
    transform: scale(0.96); /* グッと押し込む演出 */
}

/* 3. リスト表示時のふわっと出現アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card.animate-in {
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; /* アニメーション開始前は隠す */
}

/* --- Latency as a Feature (スケルトンスクリーン) --- */
/* データ読み込み中に表示する骨組み */
.skeleton-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    height: 350px;
    border: 1px solid #eee;
}
.skeleton-pulse {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pulse 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}
@keyframes pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.sk-image { height: 160px; width: 100%; margin-bottom: 20px; }
.sk-title { height: 24px; width: 70%; margin-bottom: 10px; }
.sk-text { height: 14px; width: 100%; margin-bottom: 6px; }
.sk-btn { height: 40px; width: 100%; margin-top: 20px; }

/* style.css の末尾に追記 */

/* --- バイオシミラー(BS)関連のUI --- */
.card-image-container {
    position: relative; /* バッジを配置するために必要 */
}

/* バッジ共通スタイル */
.badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
}

/* 先発品（BSあり）: 注意喚起も含めて目立つ色 */
.badge-originator {
    background-color: #005a9c; /* 濃い青 */
    border: 1px solid #004080;
}

/* 先発品（BSなし）: 控えめな表示 */
.badge-originator-only {
    background-color: #777;
    opacity: 0.8;
}

/* BS: ジェネリックらしい色 */
.badge-bs {
    background-color: #28a745; /* 緑 */
    border: 1px solid #1e7e34;
}

/* BSカード内の「先発品：〇〇」表示エリア */
.bs-relation {
    background-color: #f0fff4; /* 薄い緑の背景 */
    border: 1px solid #d4edda;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-relation .label {
    color: #155724;
    font-weight: bold;
    background: #d4edda;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
}
.bs-relation .value {
    color: #333;
    font-weight: 600;
}

/* style.css の末尾に追記 */

/* 注入器情報のスタイル */
.injector-info {
    font-size: 11px;
    color: #666;
    margin-left: 10px;
    display: block; /* 改行して表示 */
    margin-top: 2px;
}

/* 詳細リスト内の注入器情報 */
.injector-info-detail {
    font-size: 12px;
    color: #005a9c;
    font-weight: normal;
    margin-left: 1em;
}