/* 総合版「AIおすすめ診断」（/xerf-home/ai・10/14 統括院長）。色・部品はほかの版（style.css）と同じ。ここは入口の飾りと解析の演出だけ */
.ai-points { list-style: none; margin: 0 0 16px 42px; padding: 0; display: grid; gap: 8px; }
.ai-points li { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid #cbdbe6; border-radius: 12px; background: #fff; }
.ai-points b { color: var(--navy); font-size: 13px; }
.ai-points span { color: #526979; font-size: 12px; line-height: 1.7; }
.ai-group { margin: 0 0 18px; }
.ai-group-title { margin: 0 0 4px 2px; color: var(--navy); font-size: 14px; font-weight: 700; }
.ai-group-hint { margin: 0 0 8px 2px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-scan { margin: 0 0 18px 42px; padding: 15px 14px; border-radius: 14px; background: var(--navy); color: #fff; }
.ai-scan progress { width: 100%; height: 6px; margin-bottom: 14px; }
.ai-scan progress::-webkit-progress-bar { background: #ffffff26; }
.ai-scan progress::-webkit-progress-value { background: var(--gold); transition: width .6s ease; }
.ai-scan progress::-moz-progress-bar { background: var(--gold); }
.ai-scan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ai-scan-steps li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.6; color: #ffffff80; transition: color .3s; }
.ai-scan-steps li.now { color: #fff; }
.ai-scan-steps li.done { color: #ebd78e; }
.ai-scan-mark { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid #ffffff55; }
.ai-scan-steps li.now .ai-scan-mark { border-color: var(--gold); border-top-color: transparent; animation: ai-spin .9s linear infinite; }
.ai-scan-steps li.done .ai-scan-mark { border-color: var(--gold); background: var(--gold); position: relative; }
.ai-scan-steps li.done .ai-scan-mark::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 11px; font-weight: 800; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-scan-steps li.now .ai-scan-mark { animation: none; } .ai-scan progress::-webkit-progress-value { transition: none; } }
.ai-ranking { margin-left: 0; }
.ai-detail { margin: 14px 0 0; }
.ai-cta { margin-top: 14px; border: 2px solid var(--gold); background: #fffdf5; }
.ai-cta .rx-lead { font-weight: 600; color: var(--navy); }
.action.receipt { min-height: 54px; font-size: 15px; font-weight: 700; }
/* 肌の印（正面写真に重ねる）。凡例の色は属性で塗る（本番の CSP は style 属性を止める） */
.ai-plot .facial-photo { width: 100%; max-width: 360px; margin: 8px auto; }
.ai-plot .facial-guide-legend { margin: 8px 0; }
.ai-plot .facial-guide-legend i { width: 10px; height: 10px; border-radius: 50%; }

/* お肌の図: 項目の切り替えボタン（チップ）・色の丸。色は属性で塗る（本番の CSP は style 属性を止める）。点数のバーの色・名前と同じ */
.ai-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
#ai-plot\:all { grid-column: 1 / -1; justify-content: center; }
.ai-chip { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--line, #d8dfeb); border-radius: 14px; background: #fff; color: var(--navy, #001e43); font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; }
.ai-chip b { margin-left: auto; }
.ai-chip b { font-size: 12px; color: #55657d; }
.ai-chip.on { background: var(--navy, #001e43); color: #fff; border-color: var(--navy, #001e43); }
.ai-chip.on b { color: #ffe9a8; }
.ai-chip.off { opacity: .6; }
.ai-chip i, .skin-swatch, .ai-plot-name i, .ai-plot .rx-note i, .skin-stain i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 4px; background: #999; }
.ai-chip.on i { box-shadow: 0 0 0 2px #fff; }
.ai-plot-name { margin: 6px 0 2px; }
.skin-stain { display: block; margin-top: 4px; }
.skin-stain b { display: inline; margin-right: 4px; }
.skin-extra .rx-lead { margin: 10px 0 4px; }
.ai-chip i[data-c="f9a825"], .skin-swatch[data-c="f9a825"], .ai-plot-name i[data-c="f9a825"], .ai-plot .rx-note i[data-c="f9a825"], .skin-stain i[data-c="f9a825"], .facial-guide-legend i[data-c="f9a825"] { background: #f9a825; }
.ai-chip i[data-c="8d6e63"], .skin-swatch[data-c="8d6e63"], .ai-plot-name i[data-c="8d6e63"], .ai-plot .rx-note i[data-c="8d6e63"], .skin-stain i[data-c="8d6e63"], .facial-guide-legend i[data-c="8d6e63"] { background: #8d6e63; }
.ai-chip i[data-c="ff7043"], .skin-swatch[data-c="ff7043"], .ai-plot-name i[data-c="ff7043"], .ai-plot .rx-note i[data-c="ff7043"], .skin-stain i[data-c="ff7043"], .facial-guide-legend i[data-c="ff7043"] { background: #ff7043; }
.ai-chip i[data-c="6d4c41"], .skin-swatch[data-c="6d4c41"], .ai-plot-name i[data-c="6d4c41"], .ai-plot .rx-note i[data-c="6d4c41"], .skin-stain i[data-c="6d4c41"], .facial-guide-legend i[data-c="6d4c41"] { background: #6d4c41; }
.ai-chip i[data-c="7e57c2"], .skin-swatch[data-c="7e57c2"], .ai-plot-name i[data-c="7e57c2"], .ai-plot .rx-note i[data-c="7e57c2"], .skin-stain i[data-c="7e57c2"], .facial-guide-legend i[data-c="7e57c2"] { background: #7e57c2; }
.ai-chip i[data-c="e53935"], .skin-swatch[data-c="e53935"], .ai-plot-name i[data-c="e53935"], .ai-plot .rx-note i[data-c="e53935"], .skin-stain i[data-c="e53935"], .facial-guide-legend i[data-c="e53935"] { background: #e53935; }
.ai-chip i[data-c="1e88e5"], .skin-swatch[data-c="1e88e5"], .ai-plot-name i[data-c="1e88e5"], .ai-plot .rx-note i[data-c="1e88e5"], .skin-stain i[data-c="1e88e5"], .facial-guide-legend i[data-c="1e88e5"] { background: #1e88e5; }
.ai-chip i[data-c="546e7a"], .skin-swatch[data-c="546e7a"], .ai-plot-name i[data-c="546e7a"], .ai-plot .rx-note i[data-c="546e7a"], .skin-stain i[data-c="546e7a"], .facial-guide-legend i[data-c="546e7a"] { background: #546e7a; }
.ai-chip i[data-c="00897b"], .skin-swatch[data-c="00897b"], .ai-plot-name i[data-c="00897b"], .ai-plot .rx-note i[data-c="00897b"], .skin-stain i[data-c="00897b"], .facial-guide-legend i[data-c="00897b"] { background: #00897b; }
.ai-chip i[data-c="ec407a"], .skin-swatch[data-c="ec407a"], .ai-plot-name i[data-c="ec407a"], .ai-plot .rx-note i[data-c="ec407a"], .skin-stain i[data-c="ec407a"], .facial-guide-legend i[data-c="ec407a"] { background: #ec407a; }
.ai-chip i[data-c="b34700"], .skin-swatch[data-c="b34700"], .ai-plot-name i[data-c="b34700"], .ai-plot .rx-note i[data-c="b34700"], .skin-stain i[data-c="b34700"], .facial-guide-legend i[data-c="b34700"] { background: #b34700; }
.ai-chip i[data-c="ff9800"], .skin-swatch[data-c="ff9800"], .ai-plot-name i[data-c="ff9800"], .ai-plot .rx-note i[data-c="ff9800"], .skin-stain i[data-c="ff9800"], .facial-guide-legend i[data-c="ff9800"] { background: #ff9800; }
.ai-chip i[data-c="a1887f"], .skin-swatch[data-c="a1887f"], .ai-plot-name i[data-c="a1887f"], .ai-plot .rx-note i[data-c="a1887f"], .skin-stain i[data-c="a1887f"], .facial-guide-legend i[data-c="a1887f"] { background: #a1887f; }
.ai-chip i[data-c="00acc1"], .skin-swatch[data-c="00acc1"], .ai-plot-name i[data-c="00acc1"], .ai-plot .rx-note i[data-c="00acc1"], .skin-stain i[data-c="00acc1"], .facial-guide-legend i[data-c="00acc1"] { background: #00acc1; }
.ai-chip i[data-c="37474f"], .skin-swatch[data-c="37474f"], .ai-plot-name i[data-c="37474f"], .ai-plot .rx-note i[data-c="37474f"], .skin-stain i[data-c="37474f"], .facial-guide-legend i[data-c="37474f"] { background: #37474f; }

/* 案内役の写真・名前: 統括院長の総合案内AI（サイトの「AIに相談」と同じ顔・名前）。写真はサイトの統括院長AIの画像（renatusclinic.jp）。img-src はこのページだけ許す（http.py） */
.ai-shell .avatar, .ai-shell .avatar.avatar-mood[class] { background-image: url("https://renatusclinic.jp/wp-content/uploads/2023/03/IMG_0677-scaled.jpg"); background-position: center 20%; background-size: cover; }
.speaker-role { display: block; font-size: 10px; font-weight: 400; color: #6b7a90; letter-spacing: .02em; }