/*==================================
適合検索ページ（match.html）用CSS
==================================*/
:root {
    --font-size-save-table:  clamp(0.7rem, 0.1vw + 0.7rem, 1rem);
    --font-size-mobile-table:  clamp(0.5rem, 0.1vw + 0.6rem, 0.8rem);
}

/* フォームと結果を包括するコンテナ */
.match-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

.annotation {
    padding: 20px;
    margin: 20px 0;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-left: 5px solid #0056b3;
    font-size: var(--font-size-caption);
    line-height: 1.6;
}

.annotation p {
    margin: 0 0 10px 0;
}

.annotation p:last-child {
    margin-bottom: 0;
}

/* フォームと結果を上下に配置するコンテナ */
.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px; /* フォームと結果エリア間の余白 */
}

/* フォームエリアの全体的なスタイル */
.form-area {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* フォームの各グループを縦に並べるためのFlexbox設定 */
.form-group {
    text-align: left;
}

/* ラベルの共通スタイル */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-accent-2);
}

/* セレクトボックスの共通スタイル */
.form-select {
    width: 100%;
    padding: 12px;
    color: var(--color-body-text);
    border: 1px solid var(--color-background-border);
    border-radius: 8px;
    font-size: var(--font-size-body-text);
    box-sizing: border-box;
    transition: border-color 0.3s;
    background-color: #fcfcfc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-submit-button);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-select:disabled {
    background-color: var(--color-white-emphasis);
    cursor: not-allowed;
}

/* 年と月のセレクトボックスを横並びにするためのコンテナ */
.year-month-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* スラッシュ（/）のスタイル */
.year-month-group span {
    font-size: var(--font-size-body-text);
    font-weight: bold;
    color: var(--color-body-text);
}

/* ラジオボタンのグループスタイル */
.option-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* ラジオボタンとラベルのスタイル */
.option-group input[type="radio"] {
    display: none; /* ラジオボタン自体は非表示 */
}

.option-group label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal; /* 親のlabelのfont-weightを上書き */
    position: relative;
    padding-left: 25px; /* カスタムデザインの余白 */
    margin-bottom: 0;
}

.option-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: var(--color-background);
}

.option-group input[type="radio"]:checked + label::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-submit-button);
}

/* ボタンのスタイル */
.btn-primary {
    display: inline-block;
    width: 100%;
    padding: 15px;
    font-size: var(--font-size-body-text);
    font-weight: bold;
    color: var(--color-body-text-dark);
    background-color: var(--color-submit-button);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-submit-button-hovar);
}

.btn-primary:disabled {
    background-color: var(--color-disabled-button);
    cursor: not-allowed;
}

/* 年式不明の際のテキスト入力フィールドのスタイル */
.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-background-border);
    border-radius: 5px;
    font-size: var(--font-size-body-text);
    box-sizing: border-box; /* paddingとborderを幅に含める */
}

/* 候補リストのコンテナ */
.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 候補リストの各項目 */
.suggestions-list li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

/* 候補リストの各項目にマウスを乗せたときのスタイル */
.suggestions-list li:hover {
    background-color: var(--color-white-emphasis);
}

/* 検索結果エリアの共通スタイル */
.result-area {
    width: 100%;
    /* ページの横幅いっぱいに広がるよう調整 */
    padding: 20px;
    margin: 30px 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-align: left;
    box-sizing: border-box;
    /* テーブルの横スクロールを管理する */
    overflow-x: auto;
}

/* pdf保存ボタンのスタイル */
#export-pdf-button,
#show-saved-items-button {
    align-self: flex-end;
    margin-top: 20px;
    margin-right: 20px; 
}

/* 検索結果テーブルのコンテナにスクロール機能を付与 */
#results-table-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* テーブルのスタイル */
.result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-caption);
    min-width: 1000px; /* テーブルが狭い画面で崩れないように最小幅を設定 */
}

/* ヘッダー行を固定 */
.result-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ヘッダーセルのスタイル */
.result-table thead th {
    background-color: var(--color-white-emphasis);
    padding: 12px 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: var(--color-body-text);
    border: 1px solid #ddd;
    font-size: var(--font-size-caption);
}

/* 2行になったヘッダーの1行目の下線を非表示に */
.result-table thead tr:first-child th {
    border-bottom: none;
}

/* テーブルボディのセルスタイル */
.result-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.result-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    vertical-align: top; /* 複数行のコンテンツを上揃えにする */
    max-width: 100px; /*js側で固定しているので無効値 */
    /* テキストがこの最大幅を超えた場合に折り返すようにする */
    word-wrap: break-word;
    font-size: var(--font-size-caption);
}

/* 検索結果が見つからない場合のスタイル */
#message-container {
    color: orange;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    border: 1px dashed orange;
    margin-top: 20px;
    display: none; /* 初期状態では非表示 */
}

#message-container.visible {
    display: block;
}

/* 注意事項リストのスタイル */
#notes-list-container {
    width: 100%; /* コンテナを親要素いっぱいに広げる */
    margin-top: 20px; /* テーブルとの間に余白 */
    text-align: left; /* コンテナ内のテキストを左寄せ */
}

#notes-list-container h3 {
    margin-bottom: 10px;
    font-size: var(--font-size-body-text);
    font-weight: bold;
    text-align: left; /* h3要素を明示的に左寄せ */
    color: rgb(255, 0, 0);
}

#notes-list-container ul {
    list-style-type: none; /* デフォルトのリストマーカーを非表示 */
    padding: 0;
    margin: 0;
    text-align: left; /* ul要素を明示的に左寄せ */
}

#notes-list-container li {
    padding-left: 10px;
    text-indent: -10px; /* 箇条書きのテキストを左にずらす */
    font-size: var(--font-size-body-text);
}

/* 注意事項リストのレイアウト調整 */
#notes-list-container li {
    display: grid;
    grid-template-columns: 50px 1fr; /* 1列目を固定幅（50px）、2列目を可変幅に設定 */
    gap: 5px; /* 番号とテキストの間の余白 */
    margin-bottom: 5px;
}

#notes-list-container .note-number {
    text-align: left;
    padding-right: 5px;
}

#notes-list-container .note-text {
    word-wrap: break-word; /* 長いテキストの折り返し */
}

/* ========================================= */
/* 保存済みリストの全体コンテナとセクション */
/* ========================================= */
.product-section {
    margin-bottom: 20px;
}

.saved-items-table {
    width: 100%;
    border-collapse: collapse;
}


.saved-th,
.saved-td {
    border: 1px solid #ddd;
    padding: 8px;
    box-sizing: border-box;
    font-size: var(--font-size-save-table);
}

.saved-th {
    text-align: left;
    background-color: #f5f5f5; 
    font-weight: bold;
}

/* サブヘッダー (製品の詳細情報列) の幅と位置 */
.saved-th-sub {
    width: 80px;
    min-width: 80px; 
}

/* 操作列のヘッダー */
.saved-th-action {
    width: 100px; /* 削除ボタンのサイズに合わせて調整 */
    min-width: 100px;
    text-align: center;
}

/* アクションセル (削除ボタンを含むセル) */
.saved-td-action {
    text-align: center;
    vertical-align: middle;
}

#close-saved-items-button {
    padding: 5px 8px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
    .result-table thead th,
    .result-table td {
        font-size: var(--font-size-mobile-table);
    }
    .saved-th,
    .saved-td {
        font-size: var(--font-size-mobile-table);
    }
}