はデフォルトで 0.92em 縮小されるため、表内ではインライン要素間で
大小がチラつき「途中から急に大きくなる」ように見えた → セル内は inherit に統一
- / も親 (table) の 13px を継承させる
- 背景 / パディング等の見た目はそのまま維持 (font-size のみ揃える) */
.answer-body th code,
.answer-body td code {
font-size: inherit;
}
.answer-body th p,
.answer-body td p,
.answer-body th span,
.answer-body td span {
font-size: inherit;
margin: 0;
}
/* =========================================================================
* 関連ページ サムネイル (v5 と同じ)
* ========================================================================= */
.message-sources {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-sub);
}
.page-thumbs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.page-thumb {
width: 64px;
height: 84px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
cursor: pointer;
background: var(--bg-soft);
position: relative;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.page-thumb:hover {
transform: scale(1.06);
border-color: var(--brand);
box-shadow: var(--shadow-md);
}
.page-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-thumb-label {
position: absolute;
bottom: 0;
left: 0; right: 0;
background: color-mix(in srgb, var(--brand) 88%, transparent);
color: white;
font-size: 9px;
padding: 1px 2px;
text-align: center;
line-height: 1.2;
}
/* スマホ: 関連ページサムネは 1 行 5 個固定 (利用可能幅にあわせて自動スケール)。
PC / タブレットでは固定 64×84 のままで横幅が広くても並びすぎない。 */
@media (max-width: 640px) {
.page-thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.page-thumb {
width: auto;
height: auto;
aspect-ratio: 64 / 84;
}
.page-thumb-label { font-size: 8px; }
}
/* =========================================================================
* 部品コード価格 hover ツールチップ (v5 と同じ)
* ========================================================================= */
.answer-body code {
background: var(--bg-soft);
padding: 2px 6px;
border-radius: 4px;
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 0.88em;
color: var(--brand-dark);
border: 1px solid var(--border);
}
.part-code-priced {
background: var(--brand-50) !important;
background: color-mix(in srgb, var(--brand) 10%, #fff) !important;
border-color: var(--brand-200) !important;
border-color: color-mix(in srgb, var(--brand) 25%, #fff) !important;
color: var(--brand-dark) !important;
color: color-mix(in srgb, var(--brand) 75%, #000) !important;
cursor: help;
position: relative;
transition: background 0.15s, border-color 0.15s;
}
.part-code-priced:hover {
background: var(--brand-100) !important;
background: color-mix(in srgb, var(--brand) 18%, #fff) !important;
border-color: var(--brand) !important;
}
.part-code-priced::after {
content: '¥';
margin-left: 4px;
font-size: 0.85em;
color: var(--brand);
font-weight: 700;
}
.part-code-priced.is-active {
background: var(--brand) !important;
color: white !important;
border-color: var(--brand-dark) !important;
}
.part-code-priced.is-active::after { color: white; }
.price-tooltip {
position: absolute;
z-index: 200;
background: var(--text);
color: white;
padding: 10px 14px;
border-radius: var(--r-md);
font-size: 13px;
line-height: 1.55;
box-shadow: var(--shadow-lg);
max-width: 320px;
min-width: 220px;
pointer-events: none;
animation: pt-fade-in .12s ease;
}
.price-tooltip .pt-name { font-weight: 700; margin-bottom: 4px; }
.price-tooltip .pt-code {
font-family: 'SF Mono', monospace;
font-size: 11px;
color: #c5c5c5;
margin-bottom: 6px;
}
.price-tooltip .pt-price {
font-size: 16px;
font-weight: 700;
color: #ffd87a;
}
.price-tooltip .pt-label {
font-size: 11px;
color: #c5c5c5;
margin-top: 2px;
}
.price-tooltip .pt-retail {
font-size: 12px;
color: #aabbcc;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.price-tooltip .pt-alt {
font-size: 11px;
color: #ffb86c;
margin-top: 4px;
}
@keyframes pt-fade-in {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================================
* インライン参照画像ボタン (v5 と同じ REF 9 + 書類アイコン)
* ========================================================================= */
.answer-body a.inline-page-ref {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--brand-100);
background: color-mix(in srgb, var(--brand) 18%, #fff);
color: var(--brand-dark);
color: color-mix(in srgb, var(--brand) 80%, #000);
border: none;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
margin: 0 2px;
cursor: pointer;
transition: background .15s, color .15s;
vertical-align: baseline;
}
.answer-body a.inline-page-ref svg {
width: 12px; height: 12px;
opacity: 0.75;
flex-shrink: 0;
transition: opacity .15s;
}
.answer-body a.inline-page-ref:hover {
background: color-mix(in srgb, var(--brand) 32%, #fff);
}
.answer-body a.inline-page-ref:hover svg { opacity: 1; }
/* 段落ごとにまとめた参考画像バー */
.answer-body .page-refs-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 8px 0 4px;
padding: 8px 10px;
background: color-mix(in srgb, var(--brand) 5%, transparent);
border-left: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
border-radius: 4px 8px 8px 4px;
}
.answer-body .page-refs-bar-label {
font-size: 11px;
font-weight: 600;
color: var(--text-mute);
margin-right: 2px;
flex-shrink: 0;
}
.answer-body .page-refs-bar a.inline-page-ref {
/* バー内ではマージン無し (gap で揃える) */
margin: 0;
}
.answer-body code:has(> a.inline-page-ref) {
background: transparent;
padding: 0;
border: 0;
border-radius: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* =========================================================================
* 訂正機能 (フローティングボタン + モーダル + トースト) v5 互換
* ========================================================================= */
.correction-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: var(--text);
color: white;
padding: 12px 22px;
border-radius: var(--r-pill);
font-size: 13px;
box-shadow: var(--shadow-lg);
z-index: 1100;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.correction-toast.show { opacity: 1; }
/* 画像モーダル (v5 完全互換: 拡大 + ページ移動 + スワイプ) */
.image-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 0;
}
.image-modal.open { display: flex; }
.image-modal-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.image-modal-scroll {
overflow: hidden; /* 通常時はスクロールバー出さない */
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.image-modal-scroll.zoomed {
overflow: auto; /* ズーム時のみスクロールバー有効 */
align-items: flex-start;
justify-content: flex-start;
}
/* スクロールバーを薄くする (Webkit) */
.image-modal-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.image-modal-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.4);
border-radius: 4px;
}
.image-modal-scroll::-webkit-scrollbar-track {
background: transparent;
}
.image-modal img {
background: white;
max-width: 100%;
max-height: 100vh;
max-height: 100dvh;
transition: max-width 0.2s, max-height 0.2s;
display: block;
}
.image-modal img.zoomed {
max-width: none;
max-height: none;
width: 200%;
cursor: grab;
}
.image-modal-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.95);
border: none;
width: 52px; height: 52px;
border-radius: 50%;
font-size: 28px;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: background 0.15s, transform 0.1s;
z-index: 5;
user-select: none;
font-family: inherit;
}
.image-modal-arrow:hover:not(:disabled) {
background: white;
transform: translateY(-50%) scale(1.05);
}
.image-modal-arrow:active:not(:disabled) {
transform: translateY(-50%) scale(0.95);
}
.image-modal-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.image-modal-arrow.prev { left: 16px; }
.image-modal-arrow.next { right: 16px; }
.image-modal-loading {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
pointer-events: none;
z-index: 4;
}
.image-modal-content.is-loading .image-modal-loading {
display: flex;
}
.image-modal-spinner {
width: 56px; height: 56px;
border: 5px solid rgba(255, 255, 255, 0.25);
border-top-color: white;
border-radius: 50%;
animation: modalSpin 0.85s linear infinite;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.image-modal-loading-inner {
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes modalSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
.image-modal-arrow {
width: 40px; height: 40px;
font-size: 20px;
opacity: 0.7;
}
.image-modal-arrow.prev { left: 4px; }
.image-modal-arrow.next { right: 4px; }
}
.image-modal-close {
position: fixed;
top: 12px; right: 12px;
background: rgba(255, 255, 255, 0.9);
border: none;
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
z-index: 10;
font-family: inherit;
/* × 文字を完全中央に配置 (フォント依存の上下余白を排除) */
font-size: 0;
padding: 0;
line-height: 0;
color: var(--text);
}
.image-modal-close::before {
content: '×';
font-size: 22px;
line-height: 1;
/* × グリフは見た目で 1〜2px 上方寄りなので微調整 */
transform: translateY(-1px);
}
.image-modal-close:hover { background: white; }
/* ローディングアニメーション (L16: 思考バブル) */
.loading {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-sub);
font-size: 13px;
}
.loading-bubble {
background: var(--bg-soft, #f7f7f8);
border: 1px solid var(--border, #f1f5f9);
border-radius: 14px 14px 14px 4px;
padding: 7px 12px;
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 0;
}
.loading-bubble span {
width: 5px;
height: 5px;
background: var(--brand, #0060a8);
border-radius: 50%;
animation: loading-bubble-blink 1.2s ease-in-out infinite;
}
.loading-bubble span:nth-child(2) { animation-delay: 0.15s; }
.loading-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loading-bubble-blink {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
/* 入力エリア (v5 と同じ) */
.input-area {
display: flex;
gap: 0;
padding: 12px 0 22px 0;
flex-shrink: 0;
background: var(--bg);
box-shadow: 0 -12px 16px -12px rgba(0, 0, 0, 0.06);
z-index: 10;
}
.input-wrapper {
flex: 1;
display: flex;
align-items: center;
/* Glass デザイン (パーツ検索バーと統一) */
background: color-mix(in srgb, #fff 80%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
border-radius: 26px;
padding: 6px 6px 6px 20px;
box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
transition: border-color .15s, box-shadow .15s;
}
.input-wrapper:focus-within {
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
}
/* 2026-06-01: iOS Safari でチャット画面初回ロード時、 backdrop-filter:blur の
composition バグで入力欄の右端がダブって見える事故対策。
タッチデバイス (iPhone/iPad) では backdrop-filter を無効化、 不透明 background。
デスクトップでは Glass デザインを維持。 */
@media (hover: none) and (pointer: coarse) {
.input-wrapper {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: #fff;
}
}
.input-area input {
flex: 1;
padding: 10px 6px;
border: none;
background: transparent;
font-size: 15px;
outline: none;
font-family: inherit;
color: var(--text);
min-width: 0;
}
.input-area input::placeholder { color: var(--text-mute); }
.input-area input:disabled {
background: #f0f0f0;
cursor: not-allowed;
opacity: 0.7;
}
/* 共通ボタン (mic + send) */
.input-area button {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
transition: background .15s, transform .1s, box-shadow .15s, border-color .15s;
font-family: inherit;
font-size: 0;
}
/* 送信ボタン (青、白い上矢印) */
#sendBtn {
background: var(--brand);
color: #fff;
}
#sendBtn::after {
content: '';
display: block;
width: 14px; height: 14px;
background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#sendBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--brand) 88%, #000);
transform: scale(1.04);
}
#sendBtn:disabled {
background: var(--border-strong);
cursor: not-allowed;
transform: none;
}
/* マイクボタン (薄青背景 + 青枠 + 青マイクアイコン) */
#micBtn {
background: color-mix(in srgb, var(--brand) 8%, #fff);
border: 2px solid var(--brand);
margin-right: 6px;
flex-shrink: 0;
}
#micBtn::after {
content: '';
display: block;
width: 18px; height: 18px;
background: var(--brand);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#micBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--brand) 15%, #fff);
}
#micBtn.recording {
background: #fee2e2;
border-color: #ef4444;
animation: mic-pulse 1.2s ease-in-out infinite;
}
#micBtn.recording::after {
background: #ef4444;
}
#micBtn:disabled {
background: var(--bg) !important;
border-color: var(--border-strong) !important;
animation: none !important;
}
#micBtn:disabled::after {
background: var(--border-strong) !important;
}
@keyframes mic-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
/* 旧プレースホルダ (Phase A1 互換用、将来削除可) */
.chat-welcome { display: none; }
/* 初期選択肢 (clarify-block / clarify-options / clarify-option) */
.clarify-block {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 14px 0 6px 0;
}
.clarify-block:first-child { margin-top: 0; }
.clarify-question {
font-size: 14px;
color: var(--text-sub);
margin-bottom: 8px;
}
.clarify-options {
display: flex;
flex-direction: column;
gap: 8px;
}
/* G8 スタイル: グレー背景 + メーカー色の縦バー */
.clarify-option {
background: #f4f4f5;
color: #3f3f46;
border: none;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
text-align: left;
cursor: pointer;
transition: background .15s, color .15s;
display: flex;
align-items: center;
gap: 10px;
font-family: inherit;
line-height: 1.5;
}
.clarify-option::before {
content: '';
width: 3px;
height: 16px;
border-radius: 2px;
background: var(--brand);
flex-shrink: 0;
transition: background .15s, height .15s;
}
.clarify-option:hover:not(:disabled) {
background: #e4e4e7;
color: #18181b;
}
.clarify-option:hover:not(:disabled)::before {
height: 22px;
}
.clarify-option:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* TOC (目次) 一覧 — フォントは --user-font-scale で乗算 */
.toc-loading {
padding: 12px 4px;
color: var(--text-mute);
font-size: calc(13px * var(--user-font-scale, 1));
}
.toc-error {
padding: 10px 12px;
margin: 10px 0;
background: #fde8e8;
color: #9b2c2c;
border-radius: var(--r-sm);
font-size: calc(13px * var(--user-font-scale, 1));
}
.toc-list-wrap {
margin-top: 10px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.toc-list-title {
font-weight: 600;
font-size: calc(15px * var(--user-font-scale, 1));
margin-bottom: 8px;
color: var(--text);
}
.toc-notice {
font-size: calc(12px * var(--user-font-scale, 1));
color: var(--text-mute);
padding: 6px 0 10px;
line-height: 1.5;
}
.toc-search-wrap { margin: 4px 0 8px 0; }
.toc-search {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
font-size: 13px;
font-family: inherit;
background: #fff;
color: var(--text);
transition: border-color .12s;
}
.toc-search:focus {
outline: none;
border-color: var(--brand);
}
.toc-count {
font-size: calc(12px * var(--user-font-scale, 1));
color: var(--text-mute);
margin-bottom: 6px;
}
.toc-empty {
padding: 8px 2px;
color: var(--text-mute);
font-size: calc(13px * var(--user-font-scale, 1));
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 50vh;
overflow-y: auto;
}
.toc-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--r-sm);
cursor: pointer;
font-size: calc(13px * var(--user-font-scale, 1));
border-bottom: 1px solid var(--border);
transition: background .12s, color .12s;
}
.toc-item:last-child { border-bottom: none; }
.toc-item:hover {
background: color-mix(in srgb, var(--brand) 6%, #fff);
color: color-mix(in srgb, var(--brand) 80%, #000);
}
.toc-item-title {
flex: 1;
line-height: 1.4;
}
.toc-badge {
flex-shrink: 0;
display: inline-block;
min-width: 34px;
text-align: center;
padding: 2px 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
background: #7280a0;
}
.toc-badge-wm { background: #2563eb; }
.toc-badge-to { background: #0891b2; }
.toc-badge-common { background: #db924a; }
/* =========================================================================
* レスポンシブ
* ========================================================================= */
@media (max-width: 640px) {
.header { padding: 10px 16px; }
.header-title { font-size: 15px; }
.header-maker-label { font-size: 12px; padding-left: 8px; }
/* スマホ: container padding を 14px に詰める (v5 互換) */
.container { padding: 0 14px; }
.maker-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.select-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.select-card { padding: 14px 12px; }
/* 型式画面: 2 カラム固定 (v5 と同じ)、検索バーの margin を container 14px に合わせる */
.model-group-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* model-toolbar: 1 行に維持 (検索バー + 件数を横並び) */
.model-toolbar {
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
margin: 0 -14px 14px -14px;
padding: 10px 14px;
gap: 8px;
}
.model-toolbar .model-search { flex: 1 1 auto; min-width: 0; }
.model-toolbar .model-count {
flex: 0 0 auto;
font-size: calc(11px * var(--user-font-scale, 1));
white-space: nowrap;
}
/* スマホ: トークンメーター ラベル「今週 残り xK / xK」は非表示
(リング (data-pct 表示) は残してパーセントだけ見せる) */
.token-meter-label { display: none !important; }
/* スマホ: AI アバターを float にして、本文をアバター下まで全幅で使う
(アバターの直下にできていた左の空白を消す) */
.message-ai {
display: block;
padding: 0;
}
.message-ai::before {
float: left;
display: flex !important;
width: 24px; height: 24px;
font-size: 11px;
margin: 2px 8px 4px 0;
}
.message-ai .message-body {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* clearfix: float がはみ出さないように */
.message-ai::after {
content: '';
display: block;
clear: both;
}
.message { gap: 6px; }
/* スマホ: 表のみ横スクロール許可 (v5 と同じ仕様) */
.answer-body .table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.answer-body .table-scroll table {
min-width: max-content;
width: auto;
}
}
/* === エンジン選択モーダル (パーツ検索: chassis に複数 engine catalog がある時) === */
.parts-engine-modal { z-index: 8700; } /* settings-modal 9000 未満、figModal より上 */
.parts-engine-modal[aria-hidden="false"] { display: flex; }
.parts-engine-modal-box.parts-glass {
position: relative;
width: min(560px, calc(100vw - 32px));
height: auto; /* .parts-modal-box の height: 96vh を上書き (コンテンツ高で fit) */
max-height: calc(100vh - 64px);
background: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 28px 24px 20px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.parts-engine-header {
display: flex; align-items: center; justify-content: center;
}
.parts-engine-modal .parts-modal-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--parts-text, #1a1a1a);
text-align: center;
}
.parts-engine-body { display: flex; flex-direction: column; }
.parts-engine-list {
display: flex;
flex-direction: column; /* PC でも 1 行 1 列 (要望) */
gap: 10px;
}
.parts-engine-radio {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
line-height: 1.45;
}
.parts-engine-radio:hover {
background: rgba(255, 255, 255, 0.75);
border-color: color-mix(in srgb, var(--parts-brand, #0060a8) 30%, #fff);
}
.parts-engine-radio.checked {
background: color-mix(in srgb, var(--parts-brand, #0060a8) 14%, rgba(255, 255, 255, 0.75));
border-color: var(--parts-brand, #0060a8);
}
.parts-engine-radio input[type=radio] {
flex-shrink: 0;
accent-color: var(--parts-brand, #0060a8);
cursor: pointer;
}
.parts-engine-radio-label {
font-size: 14px;
color: var(--parts-text, #1a1a1a);
word-break: break-word;
font-weight: 500;
}
.parts-engine-modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 8px;
}
.parts-secondary-btn {
background: rgba(255, 255, 255, 0.5);
color: var(--parts-text, #1a1a1a);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 10px 22px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background 0.12s ease, border-color 0.12s ease;
}
.parts-secondary-btn:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.2);
}
.parts-primary-btn {
background: var(--parts-brand, #0060a8);
color: #fff;
border: none;
border-radius: 10px;
padding: 10px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
min-width: 180px;
transition: background 0.12s ease, opacity 0.12s ease;
}
.parts-primary-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--parts-brand, #0060a8) 88%, #000);
}
.parts-primary-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ============================================================
Phase 3: フィードバックモーダル (1.0.5) — section + search 共通
============================================================ */
.parts-modal.parts-feedback-modal { z-index: 8650; }
.parts-feedback-modal-box.parts-glass {
position: relative;
width: min(560px, calc(100vw - 32px));
height: auto; /* .parts-modal-box の height: 96vh を上書き (コンテンツ高で fit) */
max-height: calc(100vh - 64px);
background: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 28px 24px 24px;
overflow: auto;
}
.parts-feedback-header {
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.parts-feedback-title {
margin: 0; font-size: 16px; font-weight: 600;
color: var(--parts-text, #1a1a1a); text-align: center;
}
.parts-feedback-body {
display: flex; flex-direction: column; gap: 16px;
}
.parts-feedback-fig {
font-size: 14px; font-weight: 500;
color: #1a1a1a; text-align: center;
}
.parts-feedback-current {
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.parts-feedback-label {
font-size: 12px; color: #6e6e73;
}
.parts-feedback-current-pill {
padding: 4px 14px; font-size: 13px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px; color: #1a1a1a;
}
.parts-feedback-question {
font-size: 13px; color: #6e6e73; text-align: center; margin-top: 4px;
}
.parts-feedback-section-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 480px) {
.parts-feedback-section-grid { grid-template-columns: repeat(2, 1fr); }
}
.parts-feedback-section-pill {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
padding: 12px 8px;
font-size: 13px; font-weight: 500;
color: #1a1a1a; cursor: pointer;
transition: all 0.15s ease;
}
.parts-feedback-section-pill:hover {
background: color-mix(in srgb, var(--parts-brand, #0060a8) 12%, rgba(255, 255, 255, 0.7));
border-color: var(--parts-brand, #0060a8);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 96, 168, 0.15);
}
.parts-feedback-section-pill:active { transform: translateY(0); }
.parts-feedback-section-pill:disabled { opacity: 0.5; cursor: wait; }
.parts-feedback-query-label {
font-size: 12px; color: #6e6e73; text-align: center;
}
.parts-feedback-query-chip {
padding: 10px 16px; font-size: 14px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px; color: #1a1a1a;
text-align: center; word-break: break-word;
}
.parts-feedback-rating {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px; margin-top: 8px;
}
.parts-feedback-rating-btn {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
padding: 14px 6px 10px;
cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 4px;
transition: all 0.15s ease;
}
.parts-feedback-rating-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
background: color-mix(in srgb, var(--parts-brand, #0060a8) 10%, rgba(255, 255, 255, 0.75));
border-color: var(--parts-brand, #0060a8);
}
.parts-feedback-rating-btn:active { transform: translateY(0); }
.parts-feedback-rating-btn:disabled { opacity: 0.5; cursor: wait; }
.parts-feedback-rating-btn .rating-num {
font-size: 22px; font-weight: 700;
color: var(--parts-brand, #0060a8);
}
.parts-feedback-rating-btn .rating-label {
font-size: 12px; color: #6e6e73; font-weight: 500;
}
/* カード右下のフィードバックボタン */
.parts-card-feedback-btn {
position: absolute;
right: 8px; bottom: 8px;
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 50%;
width: 24px;
height: 24px;
padding: 0;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #6e6e73;
cursor: pointer;
z-index: 2;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.parts-card-feedback-btn:hover {
color: var(--parts-brand, #0060a8);
border-color: var(--parts-brand, #0060a8);
background: rgba(255, 255, 255, 0.95);
}
.parts-card-feedback-btn.is-reported {
color: #34c759;
border-color: rgba(52, 199, 89, 0.4);
background: rgba(232, 248, 235, 0.85);
cursor: default;
}