/**
 * WanCare 涙やけ診断 UI スタイル
 * diagnosis.css
 *
 * prefix : wcdiag-
 * 方針   : モバイルファースト / WordPressテーマ非干渉
 * 色     : メイン #3EB489（ソフトグリーン）/ テキスト #2C3E50
 */

/* ============================================================
   リセット & コンテナ
   ============================================================ */

/**
 * .wcdiag-container はWordPressの固定ページ内の div に付与される。
 * font-size / line-height / color を明示し、テーマ依存を排除する。
 * max-width で横幅を制限し中央寄せ。
 */
.wcdiag-container {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'YuGothic', 'Meiryo', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C3E50;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px 48px;
}

/* コンテナ内の全要素に box-sizing を適用 */
.wcdiag-container *,
.wcdiag-container *::before,
.wcdiag-container *::after {
  box-sizing: border-box;
}

/* テーマの p/h2/ul などのデフォルトマージンをリセット */
.wcdiag-container p,
.wcdiag-container h2,
.wcdiag-container h3,
.wcdiag-container ul,
.wcdiag-container ol,
.wcdiag-container li {
  margin: 0;
  padding: 0;
}

/* ============================================================
   質問カード
   ============================================================ */
.wcdiag-question-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  box-shadow: 0 2px 16px rgba(44, 62, 80, .09);
}

/* ============================================================
   プログレスバー
   ============================================================ */
.wcdiag-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.wcdiag-progress-bar {
  flex: 1;
  height: 7px;
  background: #EBF0F4;
  border-radius: 4px;
  overflow: hidden;
}

.wcdiag-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3EB489 0%, #2ECC71 100%);
  border-radius: 4px;
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
  min-width: 7px; /* 1問目でも見える */
}

.wcdiag-progress-text {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #95A5A6;
  min-width: 38px;
  text-align: right;
  letter-spacing: .03em;
}

/* ============================================================
   設問番号・テキスト
   ============================================================ */
.wcdiag-question-meta {
  margin-bottom: 8px;
}

.wcdiag-question-number {
  display: inline-block;
  background: #E8F5F0;
  color: #3EB489;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: .06em;
}

.wcdiag-question-text {
  font-size: 19px;
  font-weight: 700;
  color: #1A252F;
  margin: 10px 0 4px;
  line-height: 1.4;
  list-style: none;
}

.wcdiag-question-subtext {
  font-size: 13px;
  color: #95A5A6;
  margin: 0 0 4px;
  line-height: 1.5;
}

/* ============================================================
   バリデーションエラー
   ============================================================ */
.wcdiag-error {
  background: #FDEDEC;
  color: #C0392B;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 0;
  display: none; /* JS で show */
}

/* ============================================================
   選択肢 ― radio カード形式
   ============================================================ */
.wcdiag-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 20px;
  list-style: none;
}

.wcdiag-option {
  /* ボタンリセット */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  /* レイアウト */
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: #F8FAFB;
  border: 2px solid #E4EBF0;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  color: #2C3E50;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.45;
  min-height: 54px; /* タップしやすいサイズ確保 */
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}

.wcdiag-option:hover,
.wcdiag-option:focus-visible {
  border-color: #3EB489;
  background: #F0FAF5;
  outline: none;
}

.wcdiag-option:active {
  transform: scale(0.98);
}

.wcdiag-option.wcdiag-selected {
  border-color: #3EB489;
  background: #EBF7F2;
  color: #1A6645;
  font-weight: 600;
}

/* ラジオ風インジケーター */
.wcdiag-option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #BEC8D0;
  background: #fff;
  position: relative;
  transition: border-color .15s, background .15s;
}

.wcdiag-option.wcdiag-selected .wcdiag-option-check {
  border-color: #3EB489;
  background: #3EB489;
}

.wcdiag-option.wcdiag-selected .wcdiag-option-check::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wcdiag-option-label {
  flex: 1;
}

/* ============================================================
   選択肢 ― select 形式（犬種）
   ============================================================ */
.wcdiag-options--select {
  margin: 18px 0 20px;
}

.wcdiag-select {
  width: 100%;
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #2C3E50;
  background-color: #F8FAFB;
  border: 2px solid #E4EBF0;
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* カスタム矢印 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.5 1.5l5 5 5-5' stroke='%2395A5A6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  line-height: 1.4;
  min-height: 52px;
  transition: border-color .15s;
}

.wcdiag-select:focus {
  outline: none;
  border-color: #3EB489;
}

/* ============================================================
   ナビゲーションボタン
   ============================================================ */
.wcdiag-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.wcdiag-nav-spacer {
  /* 前へボタンがない場合のスペーサー */
  display: block;
  flex-shrink: 0;
}

.wcdiag-btn {
  /* リセット */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  /* 共通スタイル */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  min-height: 48px;
  min-width: 80px;
  transition: background .15s, opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.wcdiag-btn:active:not(:disabled) {
  transform: scale(0.96);
}

/* 前へボタン */
.wcdiag-btn-prev {
  background: #F0F4F8;
  color: #5D6D7E;
  border: 2px solid #E4EBF0;
}

.wcdiag-btn-prev:hover {
  background: #E4EBF0;
}

/* 次へ / 診断する（プライマリー） */
.wcdiag-btn-primary {
  background: #3EB489;
  color: #fff;
  flex: 1;
  max-width: 240px;
  box-shadow: 0 2px 8px rgba(62, 180, 137, .30);
}

.wcdiag-btn-primary:hover:not(:disabled) {
  background: #2A9B72;
}

.wcdiag-btn-primary:disabled {
  background: #B2D8C8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.65;
}

/* ============================================================
   ローディング画面
   ============================================================ */
.wcdiag-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 16px;
  padding: 56px 24px;
  box-shadow: 0 2px 16px rgba(44, 62, 80, .09);
  min-height: 220px;
  text-align: center;
}

.wcdiag-loading-icon {
  font-size: 52px;
  margin-bottom: 18px;
  animation: wcdiag-bounce 1.1s ease-in-out infinite;
}

@keyframes wcdiag-bounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-9px); }
}

.wcdiag-loading-text {
  font-size: 16px;
  color: #5D6D7E;
  margin-bottom: 20px;
  font-weight: 500;
}

.wcdiag-loading-dots {
  display: flex;
  gap: 7px;
}

.wcdiag-loading-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3EB489;
  display: inline-block;
  animation: wcdiag-dot 1.3s ease-in-out infinite;
}

.wcdiag-loading-dots span:nth-child(2) { animation-delay: .22s; }
.wcdiag-loading-dots span:nth-child(3) { animation-delay: .44s; }

@keyframes wcdiag-dot {
  0%, 80%, 100% { transform: scale(.55); opacity: .35; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ============================================================
   結果画面（仮デザイン / result-renderer.js 分離予定）
   ============================================================ */
.wcdiag-result {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(44, 62, 80, .09);
}

/* スコアエリア */
.wcdiag-result-score-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid #F0F4F8;
}

.wcdiag-result-score-main {
  flex-shrink: 0;
  text-align: center;
}

.wcdiag-score-number {
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wcdiag-score-label {
  margin-top: 7px;
}

.wcdiag-risk-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: .04em;
}

.wcdiag-score-desc {
  flex: 1;
  font-size: 13px;
  color: #5D6D7E;
  line-height: 1.6;
}

/* 診断タイプカード */
.wcdiag-result-type-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: #F5FBF8;
  border-bottom: 1px solid #DCF0E8;
}

.wcdiag-type-icon {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.wcdiag-type-label {
  font-size: 11px;
  font-weight: 800;
  color: #3EB489;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.wcdiag-type-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A252F;
  line-height: 1.45;
}

/* サブタイプ */
.wcdiag-subtype-row {
  padding: 10px 20px;
  border-bottom: 1px solid #F0F4F8;
  font-size: 13px;
  color: #5D6D7E;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.wcdiag-subtype-prefix {
  flex-shrink: 0;
}

.wcdiag-subtype-tag {
  display: inline-block;
  background: #EBF5FB;
  color: #2471A3;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* 各セクション */
.wcdiag-result-section {
  padding: 18px 20px;
  border-bottom: 1px solid #F0F4F8;
}

.wcdiag-result-summary {
  font-size: 14px;
  color: #5D6D7E;
  line-height: 1.75;
}

.wcdiag-result-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A252F;
  margin: 0 0 12px;
  list-style: none;
}

/* リスト */
.wcdiag-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wcdiag-result-list li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: #2C3E50;
  border-bottom: 1px solid #F5F8FA;
  line-height: 1.5;
  align-items: flex-start;
}

.wcdiag-result-list li:last-child {
  border-bottom: none;
}

.wcdiag-list-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: 1px;
}

/* nextActions の優先度ラベル */
.wcdiag-action-priority {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 2px;
  min-width: 80px;
}

/* 医療免責 */
.wcdiag-disclaimer {
  padding: 12px 20px;
  background: #FEFBEA;
  border-bottom: 1px solid #FCF3CF;
  font-size: 12px;
  color: #7D6608;
  line-height: 1.6;
}

/* フッター */
.wcdiag-result-footer {
  padding: 20px;
  text-align: center;
  background: #FAFBFC;
}

/* やり直しボタン */
.wcdiag-btn-retry {
  -webkit-appearance: none;
  appearance: none;
  background: #F0F4F8;
  color: #5D6D7E;
  border: 2px solid #E4EBF0;
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
  min-height: 48px;
}

.wcdiag-btn-retry:hover {
  background: #E4EBF0;
}

/* ============================================================
   エラー画面
   ============================================================ */
.wcdiag-error-screen {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 2px 16px rgba(44, 62, 80, .09);
  text-align: center;
}

.wcdiag-error-screen-msg {
  font-size: 16px;
  font-weight: 600;
  color: #C0392B;
  margin-bottom: 12px;
}

.wcdiag-error-screen-pre {
  background: #F8F9FA;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-family: monospace;
  text-align: left;
  margin: 12px 0 20px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   レスポンシブ拡張（768px〜）
   ============================================================ */
@media (min-width: 768px) {
  .wcdiag-container {
    padding: 0 16px 64px;
  }

  .wcdiag-question-card {
    padding: 32px 32px 28px;
  }

  .wcdiag-question-text {
    font-size: 21px;
  }

  .wcdiag-option {
    font-size: 16px;
    padding: 16px 20px;
  }

  .wcdiag-result-score-area,
  .wcdiag-result-type-card,
  .wcdiag-result-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .wcdiag-result-type-card {
    gap: 18px;
  }

  .wcdiag-type-icon {
    font-size: 40px;
  }

  .wcdiag-type-title {
    font-size: 16px;
  }

  .wcdiag-result-list li {
    font-size: 15px;
  }
}

/* ============================================================
   result-renderer.js 用スタイル（Phase 1-3）
   以下すべて wcdiag- prefix
   ============================================================ */

/* ── スコアカード ─────────────────────────────────────────── */
.wcdiag-score-card {
  padding: 22px 20px 18px;
  border-bottom: 1px solid #F0F4F8;
}

.wcdiag-score-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wcdiag-score-card-label {
  font-size: 13px;
  font-weight: 700;
  color: #7F8C8D;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* 初回（比較なし）：大きなスコア数字 */
.wcdiag-score-single {
  text-align: center;
  margin-bottom: 12px;
}

/* 比較表示 */
.wcdiag-score-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
}

.wcdiag-score-col {
  text-align: center;
  flex: 1;
  max-width: 120px;
}

.wcdiag-score-col-label {
  font-size: 11px;
  color: #95A5A6;
  margin-bottom: 4px;
  font-weight: 600;
}

.wcdiag-score-col-num {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wcdiag-score-col-prev {
  color: #BDC3C7; /* 前回は薄いグレー */
  font-size: 40px;
}

.wcdiag-score-comp-arrow {
  font-size: 22px;
  color: #BDC3C7;
  flex-shrink: 0;
  line-height: 1;
}

/* スコア差分メッセージ */
.wcdiag-score-diff {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
}

.wcdiag-score-diff-arrow {
  font-size: 18px;
  margin-right: 2px;
}

.wcdiag-score-diff-num {
  font-size: 20px;
}

.wcdiag-score-diff-msg {
  font-size: 13px;
  font-weight: 500;
  margin-left: 4px;
}

/* スコアゲージ（グラデーションバー） */
.wcdiag-score-gauge-wrap {
  margin: 8px 0 6px;
}

.wcdiag-score-gauge {
  position: relative;
  height: 8px;
  /* 緑→黄→オレンジ→赤 の健康グラデーション */
  background: linear-gradient(90deg,
    #27AE60 0%,
    #F1C40F 40%,
    #E67E22 70%,
    #E74C3C 100%
  );
  border-radius: 4px;
  margin-bottom: 5px;
}

.wcdiag-score-gauge-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcdiag-score-gauge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #999; /* JS で riskColor に上書き */
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.wcdiag-score-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #95A5A6;
  font-weight: 600;
  padding: 0 2px;
}

.wcdiag-score-risk-desc {
  font-size: 13px;
  color: #5D6D7E;
  line-height: 1.6;
  margin: 10px 0 0;
}

.wcdiag-score-first-time {
  font-size: 12px;
  color: #95A5A6;
  margin: 8px 0 0;
  text-align: center;
}

/* ── 診断タイプセクション ─────────────────────────────────── */
.wcdiag-type-section {
  border-bottom: 1px solid #F0F4F8;
}

.wcdiag-type-main-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 14px;
  background: #F5FBF8;
}

.wcdiag-type-main-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.wcdiag-type-main-body {
  flex: 1;
}

.wcdiag-type-badge {
  display: inline-block;
  background: #3EB489;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.wcdiag-type-main-label {
  font-size: 13px;
  font-weight: 700;
  color: #3EB489;
  margin-bottom: 5px;
  letter-spacing: .04em;
}

.wcdiag-type-main-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A252F;
  line-height: 1.45;
}

/* サブタイプ行 */
.wcdiag-type-sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background: #EFF6F3;
  border-top: 1px solid #DCF0E8;
  font-size: 13px;
  color: #5D6D7E;
}

.wcdiag-type-sub-prefix {
  flex-shrink: 0;
  font-size: 12px;
}

/* サマリー */
.wcdiag-type-summary {
  padding: 14px 20px;
  font-size: 14px;
  color: #5D6D7E;
  line-height: 1.75;
  margin: 0;
  background: #FAFCFB;
}

/* ── セクション共通 ───────────────────────────────────────── */
.wcdiag-section-icon {
  margin-right: 6px;
  font-style: normal;
}

/* ── 診断根拠 ────────────────────────────────────────────── */
.wcdiag-explanation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wcdiag-explanation-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #F5F8FA;
  align-items: flex-start;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.55;
}

.wcdiag-explanation-item:last-child {
  border-bottom: none;
}

.wcdiag-explanation-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: 1px;
}

.wcdiag-explanation-text { flex: 1; }

/* ── 今日からできるケア（ordered list） ─────────────────── */
.wcdiag-rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rec-counter;
}

.wcdiag-rec-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F5F8FA;
  align-items: flex-start;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.55;
}

.wcdiag-rec-item:last-child { border-bottom: none; }

.wcdiag-rec-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3EB489;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.wcdiag-rec-text { flex: 1; }

/* ── 次にやること ────────────────────────────────────────── */
.wcdiag-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.wcdiag-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.5;
  padding: 4px 0;
}

.wcdiag-action-tag {
  flex-shrink: 0;
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 1px;
}

.wcdiag-action-text { flex: 1; }

/* ── 関連記事 ────────────────────────────────────────────── */
.wcdiag-article-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wcdiag-article-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F8FAFB;
  border-radius: 10px;
  text-decoration: none;
  color: #2C3E50;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #E8EDF1;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}

.wcdiag-article-card:hover {
  background: #EBF5FB;
  border-color: #85C1E9;
}

.wcdiag-article-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.wcdiag-article-title { flex: 1; }

.wcdiag-article-arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: #BDC3C7;
  line-height: 1;
}

/* ── 商品カテゴリ ─────────────────────────────────────────── */
.wcdiag-products-note {
  font-size: 12px;
  color: #95A5A6;
  margin: 0 0 12px;
  line-height: 1.5;
}

.wcdiag-product-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcdiag-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F8FAFB;
  border-radius: 10px;
  border: 1px solid #E8EDF1;
}

.wcdiag-product-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.wcdiag-product-info { flex: 1; }

.wcdiag-product-name {
  font-size: 14px;
  font-weight: 700;
  color: #1A252F;
  margin-bottom: 2px;
}

.wcdiag-product-desc {
  font-size: 12px;
  color: #7F8C8D;
  line-height: 1.4;
}

.wcdiag-product-link {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1.5px solid #3EB489;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.wcdiag-product-link:hover {
  background: #3EB489;
  color: #fff;
}

/* ── LINE ソフト CTA ─────────────────────────────────────── */
.wcdiag-line-cta {
  background: #F0FAF5;
  border-top: 2px solid #DCF0E8;
  border-bottom: 2px solid #DCF0E8;
}

.wcdiag-line-cta-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 18px;
}

.wcdiag-line-cta-icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.wcdiag-line-cta-body { flex: 1; }

.wcdiag-line-cta-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A252F;
  margin: 0 0 4px;
  line-height: 1.45;
}

.wcdiag-line-cta-sub {
  font-size: 13px;
  color: #27AE60;
  font-weight: 600;
  margin: 0 0 6px;
}

.wcdiag-line-cta-desc {
  font-size: 12px;
  color: #5D6D7E;
  line-height: 1.6;
  margin: 0 0 14px;
}

.wcdiag-line-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* LINE ボタン（緑） */
.wcdiag-btn-line {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #06C755; /* LINE グリーン */
  color: #fff;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}

.wcdiag-btn-line:hover {
  background: #04A344;
}

.wcdiag-btn-line:active {
  transform: scale(0.97);
}

.wcdiag-line-cta-skip {
  font-size: 12px;
  color: #95A5A6;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wcdiag-line-cta-skip:hover {
  color: #5D6D7E;
}

/* ============================================================
   受診推奨バナー
   ============================================================ */
.wcdiag-visit-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-left: 4px solid #F39C12;
  border-radius: 0 8px 8px 0;
  margin: 0 0 2px;
}

.wcdiag-visit-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}

.wcdiag-visit-text {
  font-size: 13px;
  line-height: 1.6;
  color: #5D4037;
  margin: 0;
}

/* ============================================================
   改善期待度バナー
   ============================================================ */
.wcdiag-improvement-banner {
  padding: 16px 18px;
  border-left: 4px solid #27AE60;
  border-radius: 0 10px 10px 0;
  margin: 0 0 2px;
}

.wcdiag-improvement-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.wcdiag-improvement-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.wcdiag-improvement-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.wcdiag-improvement-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
  padding-left: 26px;
}

/* ============================================================
   改善ロードマップ
   ============================================================ */
.wcdiag-roadmap-phase {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E8ECF0;
}

.wcdiag-roadmap-phase:last-child {
  margin-bottom: 0;
}

.wcdiag-roadmap-phase-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.wcdiag-roadmap-list {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.wcdiag-roadmap-item {
  font-size: 13px;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
  color: #2C3E50;
}

.wcdiag-roadmap-item::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #95A5A6;
  font-size: 11px;
  top: 2px;
}

/* ============================================================
   改善目安期間
   ============================================================ */
.wcdiag-timeline-box {
  background: #F8F9FA;
  border-radius: 8px;
  padding: 14px 16px;
}

.wcdiag-timeline-period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.wcdiag-timeline-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.wcdiag-timeline-period-text {
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
}

.wcdiag-timeline-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #5D6D7E;
  margin: 0;
  padding-left: 26px;
}

/* ============================================================
   犬種別アドバイス
   ============================================================ */
.wcdiag-breed-advice-text {
  font-size: 14px;
  line-height: 1.7;
  color: #2C3E50;
  background: #F0FBF5;
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid #3EB489;
}

/* ============================================================
   今のアプローチ評価
   ============================================================ */
.wcdiag-review-item {
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #E67E22;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.wcdiag-review-item:last-child {
  margin-bottom: 0;
}

.wcdiag-review-item-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.wcdiag-review-status-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.wcdiag-review-heading {
  font-size: 12px;
  font-weight: 700;
  color: #5D6D7E;
}

.wcdiag-review-label {
  font-size: 13px;
  font-weight: 700;
  color: #2C3E50;
}

.wcdiag-review-note {
  font-size: 13px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
  padding-left: 20px;
}

/* ── レスポンシブ拡張（result-renderer 用）768px〜 ──────── */
@media (min-width: 768px) {
  .wcdiag-score-card {
    padding: 28px 28px 22px;
  }

  .wcdiag-score-col-num      { font-size: 56px; }
  .wcdiag-score-col-prev     { font-size: 46px; }
  .wcdiag-score-diff         { font-size: 16px; }
  .wcdiag-score-diff-num     { font-size: 22px; }

  .wcdiag-type-main-card     { padding: 22px 28px 16px; gap: 18px; }
  .wcdiag-type-main-icon     { font-size: 42px; }
  .wcdiag-type-main-title    { font-size: 16px; }
  .wcdiag-type-sub-row       { padding: 10px 28px; }
  .wcdiag-type-summary       { padding: 16px 28px; }

  .wcdiag-line-cta-inner     { padding: 22px 28px 20px; gap: 18px; }
  .wcdiag-line-cta-icon      { font-size: 36px; }
  .wcdiag-line-cta-title     { font-size: 15px; }

  .wcdiag-product-grid       { display: grid; grid-template-columns: 1fr 1fr; }
  .wcdiag-article-list       { gap: 4px; }
}

/* ============================================================
   結果ヒーローカード（renderMainTypeCard v2）
   ============================================================ */

.wcdiag-result-hero {
  background: linear-gradient(135deg, #F0FBF6 0%, #E8F7FF 100%);
  border-left: 5px solid #3EB489;
  padding: 20px 20px 18px;
  border-bottom: 1px solid #DCF0E8;
}

.wcdiag-result-hero-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.wcdiag-type-badge-main {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  color: #fff;
  background: #3EB489;
  padding: 3px 11px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* 改善期待度ピル */
.wcdiag-ip-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.wcdiag-ip-pill--high     { background: #D5F5E3; color: #1A7740; border-color: #A9DFBF; }
.wcdiag-ip-pill--moderate { background: #FEF9E7; color: #9A7D0A; border-color: #F8E08A; }
.wcdiag-ip-pill--low      { background: #EBF5FB; color: #1A5276; border-color: #AED6F1; }

.wcdiag-result-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.wcdiag-result-hero-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}

.wcdiag-result-hero-text { flex: 1; }

.wcdiag-result-hero-type {
  font-size: 12px;
  font-weight: 800;
  color: #3EB489;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.wcdiag-result-hero-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A252F;
  line-height: 1.4;
}

/* 複合タイプ注記 */
.wcdiag-composite-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: #FEF9E7;
  border: 1px solid #F8E08A;
  border-radius: 8px;
  padding: 9px 12px;
  margin: 4px 0 12px;
  font-size: 13px;
  color: #7D6608;
  line-height: 1.5;
}

.wcdiag-result-hero-summary {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.7;
  margin: 0 !important;
}

/* ============================================================
   改善ロードマップ 行レイアウト
   ============================================================ */

.wcdiag-section-roadmap {
  background: #FAFCFB;
}

.wcdiag-roadmap-rows {
  display: flex;
  flex-direction: column;
}

.wcdiag-roadmap-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #EAEFF4;
}

.wcdiag-roadmap-row:last-child {
  border-bottom: none;
}

.wcdiag-roadmap-tag {
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 4px 0;
  border-radius: 6px;
  letter-spacing: .03em;
  line-height: 1.2;
  margin-top: 2px;
}

.wcdiag-rt--today { background: #27AE60; }
.wcdiag-rt--week  { background: #E67E22; }
.wcdiag-rt--month { background: #8E44AD; }

.wcdiag-roadmap-items {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcdiag-roadmap-items li {
  font-size: 14px;
  line-height: 1.6;
  color: #2C3E50;
  padding-left: 13px;
  position: relative;
}

.wcdiag-roadmap-items li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #BDC3C7;
  font-size: 16px;
  line-height: 1.45;
}

/* ============================================================
   診断根拠 シンプルリスト
   ============================================================ */

.wcdiag-section-reasons {
  background: #fff;
}

.wcdiag-reasons-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wcdiag-reason-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #2C3E50;
  border-bottom: 1px solid #F0F4F8;
}

.wcdiag-reason-chip:last-child {
  border-bottom: none;
}

.wcdiag-reason-chip-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  margin-top: 1px;
}

.wcdiag-reason-chip-text { flex: 1; }

/* ============================================================
   レスポンシブ（v2 result styles）
   ============================================================ */

@media (min-width: 768px) {
  .wcdiag-result-hero {
    padding: 24px 28px 20px;
  }

  .wcdiag-result-hero-icon  { font-size: 48px; }
  .wcdiag-result-hero-title { font-size: 18px; }

  .wcdiag-roadmap-tag { width: 50px; font-size: 12px; }
  .wcdiag-roadmap-items li { font-size: 14px; }
}

/* ============================================================
   数値入力（年齢など）
   ============================================================ */

.wcdiag-options--number {
  padding: 8px 0 4px;
}

.wcdiag-number-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wcdiag-number-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  font-size: 28px;
  font-weight: 700;
  color: #2C3E50;
  text-align: center;
  padding: 10px 12px;
  border: 2px solid #D5DBE1;
  border-radius: 12px;
  background: #fff;
  outline: none;
  font-family: inherit;
  line-height: 1;
  transition: border-color .15s;
}

.wcdiag-number-input:focus {
  border-color: #3EB489;
  box-shadow: 0 0 0 3px rgba(62, 180, 137, .18);
}

/* スピナー非表示 */
.wcdiag-number-input::-webkit-inner-spin-button,
.wcdiag-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.wcdiag-number-input[type=number] {
  -moz-appearance: textfield;
}

.wcdiag-number-unit {
  font-size: 18px;
  font-weight: 600;
  color: #5D6D7E;
}

/* ============================================================
   テキスト入力（text）— 愛犬の名前など
   ============================================================ */

.wcdiag-options--text {
  padding: 4px 0 8px;
}

.wcdiag-text-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  color: #2C3E50;
  text-align: center;
  padding: 14px 16px;
  border: 2px solid #D5DBE1;
  border-radius: 14px;
  background: #ffffff;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.wcdiag-text-input::placeholder {
  color: #BDC8D3;
  font-weight: 400;
  font-size: 16px;
}

.wcdiag-text-input:focus {
  border-color: #3EB489;
  box-shadow: 0 0 0 3px rgba(62, 180, 137, .18);
}

.wcdiag-text-hint {
  font-size: 12px;
  color: #95A5A6;
  text-align: center;
  margin: 8px 0 0 !important;
  padding: 0;
}

/* ============================================================
   複数選択（multi_select）
   ============================================================ */

.wcdiag-multi-hint {
  font-size: 12px;
  color: #7F8C8D;
  margin-bottom: 10px !important;
  padding: 0;
}

.wcdiag-options--multi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcdiag-option--check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 2px solid #D5DBE1;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
  width: 100%;
  font-family: inherit;
}

.wcdiag-option--check:hover:not([disabled]) {
  border-color: #3EB489;
  background: #F5FBF8;
}

.wcdiag-option--check.wcdiag-selected {
  border-color: #3EB489;
  background: #EBF8F2;
}

.wcdiag-option--check[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.wcdiag-option-check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #C8D0D8;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #3EB489;
  background: #fff;
  transition: border-color .15s, background .15s;
}

.wcdiag-option--check.wcdiag-selected .wcdiag-option-check-box {
  border-color: #3EB489;
  background: #3EB489;
  color: #fff;
}

/* ============================================================
   取り組みフィードバック（result-renderer）
   ============================================================ */

.wcdiag-efforts-section {
  margin-top: 14px;
}

.wcdiag-efforts-heading {
  font-size: 12px;
  font-weight: 800;
  color: #7F8C8D;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.wcdiag-effort-item {
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.wcdiag-effort-item:last-child {
  margin-bottom: 0;
}

.wcdiag-effort-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  margin-bottom: 4px;
  color: #1A252F;
}

.wcdiag-effort-note {
  font-size: 13px;
  color: #5D6D7E;
  line-height: 1.6;
  margin: 0 !important;
}

/* ============================================================
   Cause Analysis (原因分析セクション)
   ============================================================ */

.wcdiag-ca-intro {
  font-size: 13px;
  color: #5D6D7E;
  margin: 0 0 14px;
  line-height: 1.6;
}

.wcdiag-ca-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wcdiag-ca-card {
  border-left: 4px solid;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}

.wcdiag-ca-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
}

.wcdiag-ca-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.wcdiag-ca-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A252F;
  line-height: 1.5;
}

.wcdiag-ca-body {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcdiag-ca-evidence {
  font-size: 13px;
  color: #34495E;
  line-height: 1.7;
}

.wcdiag-ca-risk {
  font-size: 12px;
  color: #5D6D7E;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1.6;
}

.wcdiag-ca-risk-label,
.wcdiag-ca-suggestion-label,
.wcdiag-ca-avoid-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  opacity: 0.7;
}

.wcdiag-ca-suggestion {
  font-size: 13px;
  color: #1A252F;
  background: rgba(255,255,255,0.7);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.7;
  border: 1px solid rgba(0,0,0,0.06);
}

.wcdiag-ca-suggestion-label {
  color: #27AE60;
  opacity: 1;
}

.wcdiag-ca-avoid {
  font-size: 12px;
  color: #7F8C8D;
  line-height: 1.6;
  padding: 0 2px;
}

.wcdiag-ca-avoid-label {
  color: #C0392B;
  opacity: 1;
}

.wcdiag-ca-products {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.wcdiag-ca-products-label {
  font-size: 11px;
  color: #5D6D7E;
  font-weight: 600;
  width: 100%;
  margin-bottom: 2px;
}

.wcdiag-ca-product-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  color: #34495E;
  font-weight: 500;
}

/* ============================================================
   WCR — Bright Premium Pet Care Design v7.0
   Palette: bg #FFF8F2, sage #9BC7A4, mint #BFE3C0,
            peach #F6C7A8, terra #E8A07A, dark #3A2E26
   ============================================================ */

/* ── リセット・ベース ─────────────────────────── */
.wcr-result {
  font-family: 'Hiragino Kana', 'Hiragino Sans', 'YuGothic', 'Yu Gothic',
               'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FFF8F2;
  color: #3A2E26;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wcr-result *, .wcr-result *::before, .wcr-result *::after {
  box-sizing: border-box;
}
.wcr-result a { color: inherit; text-decoration: none; }
.wcr-result ul, .wcr-result ol { margin: 0; padding: 0; list-style: none; }
.wcr-result button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

@media (min-width: 640px) {
  .wcr-result {
    max-width: 760px;
    margin: 32px auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(58,46,38,0.10);
  }
}

/* ============================================================
   HERO — 明るいプレミアムペットケア
   ============================================================ */
.wcr-hero {
  position: relative;
  background: linear-gradient(160deg, #EAF7ED 0%, #FFF8F0 55%, #FFF3E5 100%);
  padding: 36px 24px 40px;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(155,199,164,0.22);
}
.wcr-hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wcr-hero-deco--a {
  width: 320px; height: 320px;
  top: -80px; left: -80px;
  background: radial-gradient(circle, rgba(155,199,164,0.35) 0%, transparent 65%);
}
.wcr-hero-deco--b {
  width: 260px; height: 260px;
  bottom: -60px; right: -60px;
  background: radial-gradient(circle, rgba(232,160,122,0.28) 0%, transparent 65%);
}
.wcr-hero-deco--c {
  width: 180px; height: 180px;
  top: 40%; right: 30px;
  background: radial-gradient(circle, rgba(255,232,163,0.36) 0%, transparent 65%);
}

/* 肉球装飾 */
.wcr-hero-paw {
  position: absolute;
  pointer-events: none;
  color: #9BC7A4;
}
.wcr-hero-paw--1 {
  width: 56px; height: 56px;
  top: 18px; right: 18px;
  opacity: 0.18;
  transform: rotate(18deg);
}
.wcr-hero-paw--2 {
  width: 38px; height: 38px;
  bottom: 22px; left: 20px;
  opacity: 0.13;
  transform: rotate(-12deg);
}
.wcr-paw-svg {
  width: 100%; height: 100%;
}

.wcr-hero-content {
  position: relative;
  z-index: 1;
}
.wcr-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 14px;
  background: rgba(155,199,164,0.15);
  padding: 4px 12px;
  border-radius: 20px;
}
.wcr-hero-name-wrap {
  margin-bottom: 20px;
}
.wcr-hero-dogname {
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 900;
  color: #3A2E26;
  line-height: 1.2;
}
.wcr-hero-subtitle {
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 600;
  color: #7A6A60;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* スコアリング */
.wcr-score-wrap {
  display: inline-block;
  margin-bottom: 14px;
}
.wcr-score-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wcr-score-ring {
  width: 130px; height: 130px;
  transform: rotate(-90deg);
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(155,199,164,0.30));
}
.wcr-ring-track {
  fill: none;
  stroke: rgba(58,46,38,0.08);
  stroke-width: 9;
}
.wcr-ring-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(.4,0,.2,1);
}
.wcr-score-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90px;
}
.wcr-score-fraction {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.wcr-score-number {
  font-size: 38px;
  font-weight: 900;
  color: #3A2E26;
  line-height: 1;
}
.wcr-score-max {
  font-size: 13px;
  font-weight: 700;
  color: #8A7A70;
}
.wcr-score-caption {
  font-size: 10px;
  color: #8A7A70;
  margin-top: 3px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* リスクタグ */
.wcr-risk-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.wcr-risk-tag--low      { background: rgba(123,191,140,0.18); color: #3E9A5A; border: 1.5px solid rgba(123,191,140,0.35); }
.wcr-risk-tag--mild     { background: rgba(212,168,74,0.15);  color: #A87A20; border: 1.5px solid rgba(212,168,74,0.30); }
.wcr-risk-tag--moderate { background: rgba(232,160,122,0.18); color: #B85830; border: 1.5px solid rgba(232,160,122,0.35); }
.wcr-risk-tag--high     { background: rgba(212,112,112,0.18); color: #A03030; border: 1.5px solid rgba(212,112,112,0.35); }
.wcr-risk-tag--urgent   { background: rgba(192,80,80,0.18);   color: #902020; border: 1.5px solid rgba(192,80,80,0.35); }

.wcr-hero-comment {
  font-size: 13px;
  color: #5A4A40;
  margin: 0;
  line-height: 1.65;
  max-width: 320px;
  margin-inline: auto;
}

/* ============================================================
   メインコンテナ
   ============================================================ */
.wcr-main { padding: 0; }

/* ============================================================
   セクション共通
   ============================================================ */
.wcr-section {
  padding: 28px 20px;
  border-bottom: 1px solid rgba(58,46,38,0.06);
  background: #FFF8F2;
}
.wcr-section:nth-child(even) {
  background: #FFFFFF;
}
.wcr-section:last-child { border-bottom: none; }

.wcr-sh { margin-bottom: 16px; }
.wcr-sh-en {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 4px;
}
.wcr-sh-ja {
  font-size: clamp(17px, 4vw, 20px);
  font-weight: 800;
  color: #3A2E26;
  line-height: 1.3;
  margin: 0;
}

/* ============================================================
   アコーディオン（<details>/<summary>）
   ============================================================ */
.wcr-accordion {
  padding: 0;
  border-bottom: 1px solid rgba(58,46,38,0.06);
  background: #FAFAF8;
}
.wcr-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wcr-accordion-summary::-webkit-details-marker { display: none; }
.wcr-accordion-summary::marker { display: none; }
.wcr-sh--accordion { margin-bottom: 0; }
.wcr-sh--accordion .wcr-sh-ja {
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 700;
  color: #3A2E26;
}
.wcr-accordion-chevron {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(155,199,164,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.2s;
}
.wcr-accordion-chevron::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-right: 2px solid #9BC7A4;
  border-bottom: 2px solid #9BC7A4;
  transform: rotate(45deg) translateY(-2px);
}
details.wcr-accordion[open] .wcr-accordion-chevron {
  transform: rotate(180deg);
  background: rgba(155,199,164,0.30);
}
.wcr-accordion-body {
  padding: 0 20px 22px;
}

/* ============================================================
   ① 回答から見えてきたこと（フレックスボックス修正）
   ============================================================ */
.wcr-insight-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 2px 12px rgba(58,46,38,0.06);
}
.wcr-insight-intro {
  font-size: 12px;
  color: #8A7A70;
  margin: 0 0 12px;
  line-height: 1.6;
}
.wcr-insight-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wcr-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FFF7F2;
}
.wcr-insight-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C8B8A8;
  margin-top: 5px;
}
.wcr-insight-text {
  flex: 1;
  font-size: 13px;
  color: #3A2E26;
  line-height: 1.55;
}
.wcr-insight-item--good   { background: #F2FBF4; }
.wcr-insight-item--good   .wcr-insight-dot { background: #7BBF8C; }
.wcr-insight-item--attention { background: #FFF8F0; }
.wcr-insight-item--attention .wcr-insight-dot { background: #E8A07A; }
.wcr-insight-item--warn   { background: #FFF2F2; }
.wcr-insight-item--warn   .wcr-insight-dot { background: #D47070; }

/* ============================================================
   ② 涙やけタイプカード
   ============================================================ */
.wcr-type-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(58,46,38,0.08);
  text-align: center;
}
.wcr-type-card--food_related    { background: linear-gradient(155deg, #ECF9EF 0%, #FFF8F2 100%); }
.wcr-type-card--care_related    { background: linear-gradient(155deg, #EAF3FB 0%, #FFF8F2 100%); }
.wcr-type-card--breed_related   { background: linear-gradient(155deg, #F5F0FD 0%, #FFF8F2 100%); }
.wcr-type-card--allergy_related { background: linear-gradient(155deg, #FEF4EB 0%, #FFF8F2 100%); }
.wcr-type-card--senior_related  { background: linear-gradient(155deg, #FDEAEA 0%, #FFF8F2 100%); }

.wcr-type-label-row {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 14px;
}
.wcr-type-symbol {
  width: 56px; height: 56px;
  border-radius: 16px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcr-type-symbol svg { width: 34px; height: 34px; }
.wcr-type-symbol--food_related    { background: rgba(123,191,140,0.18); }
.wcr-type-symbol--care_related    { background: rgba(122,176,212,0.18); }
.wcr-type-symbol--breed_related   { background: rgba(164,139,212,0.18); }
.wcr-type-symbol--allergy_related { background: rgba(212,160,122,0.18); }
.wcr-type-symbol--senior_related  { background: rgba(212,112,112,0.18); }

.wcr-type-name {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 800;
  color: #3A2E26;
  margin: 0 0 6px;
}
.wcr-type-tagline {
  font-size: 13px;
  color: #8A7A70;
  margin: 0 0 12px;
  font-weight: 500;
}
.wcr-type-summary {
  font-size: 14px;
  color: #5A4A40;
  line-height: 1.7;
  margin: 0 0 16px;
  text-align: left;
}
.wcr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.wcr-chip {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(155,199,164,0.20);
  color: #3E8A52;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================================
   ③ このタイプによく見られる傾向（アコーディオン）
   ============================================================ */
.wcr-tendency-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(58,46,38,0.05);
}
.wcr-tendency-head {
  font-size: 12px;
  font-weight: 700;
  color: #9BC7A4;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.wcr-tendency-list { display: flex; flex-direction: column; gap: 6px; }
.wcr-tendency-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #3A2E26;
  background: #F5FBF6;
  border-radius: 8px;
  line-height: 1.5;
}
.wcr-tendency-item::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9BC7A4;
  margin-top: 5px;
}

/* ============================================================
   ④ 原因候補ランキング
   ============================================================ */
.wcr-cause-cards { display: flex; flex-direction: column; gap: 12px; }
.wcr-cause-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 16px 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(58,46,38,0.06);
}
.wcr-cause-card--top {
  border-left: 4px solid #E8A07A;
  background: linear-gradient(to right, #FFF8F2, #fff);
  box-shadow: 0 4px 20px rgba(232,160,122,0.14);
}
.wcr-cause-rank-bg {
  position: absolute;
  right: 8px; bottom: -10px;
  font-size: 68px;
  font-weight: 900;
  color: rgba(58,46,38,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.wcr-cause-body { position: relative; z-index: 1; }
.wcr-cause-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wcr-cause-name { font-size: 15px; font-weight: 700; color: #3A2E26; }
.wcr-cause-pct  { font-size: 22px; font-weight: 800; color: #E8A07A; }
.wcr-cause-pct small { font-size: 12px; font-weight: 600; }
.wcr-cause-bar-slim {
  height: 5px;
  background: rgba(58,46,38,0.08);
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.wcr-cause-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #9BC7A4, #E8A07A);
  border-radius: 3px;
  transition: width 0.8s ease;
}
.wcr-cause-desc {
  font-size: 13px;
  color: #6A5A50;
  line-height: 1.55;
  margin: 0 0 8px;
}
.wcr-cause-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.wcr-cause-status--urgent   { background: rgba(232,160,122,0.18); color: #B05028; }
.wcr-cause-status--moderate { background: rgba(212,168,74,0.18);  color: #907020; }
.wcr-cause-status--mild     { background: rgba(155,199,164,0.18); color: #3E8A52; }

/* ============================================================
   ⑤ AI レポート（ダーク = 他と差別化）
   ============================================================ */
.wcr-report-card {
  background: #3A2E26;
  border-radius: 20px;
  padding: 24px 20px;
  margin: 0 20px 0;
}
.wcr-section .wcr-report-card {
  margin: 0;
}
/* AI report section は背景で囲む */
.wcr-section:has(.wcr-report-card) {
  background: #3A2E26;
  padding: 28px 20px;
}
.wcr-report-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.wcr-report-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8A07A;
  background: rgba(232,160,122,0.20);
  padding: 4px 10px;
  border-radius: 20px;
}
.wcr-report-super {
  font-size: 10px;
  color: rgba(255,255,255,0.40);
  font-weight: 500;
}
.wcr-report-headline {
  font-size: clamp(16px, 4vw, 19px);
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 12px;
}
.wcr-report-body {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  margin: 0 0 16px;
}
.wcr-first-step {
  background: rgba(155,199,164,0.18);
  border-radius: 12px;
  padding: 14px 16px;
}
.wcr-first-step-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 6px;
}
.wcr-first-step-text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.55;
}
/* AI report section の見出しを白に */
.wcr-section:has(.wcr-report-card) .wcr-sh-en,
.wcr-section:has(.wcr-report-card) .wcr-sh-ja {
  color: rgba(255,255,255,0.85);
}

/* ============================================================
   LINE CTA（緑+白 — 確実に表示）
   ============================================================ */
.wcr-line-cta-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: #F2FBF4;
  border-top: 1.5px solid rgba(6,199,85,0.18);
  border-bottom: 1.5px solid rgba(6,199,85,0.18);
}
.wcr-line-cta-compact-text {
  font-size: 13px;
  color: #3A2E26;
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
}
/* LINE ボタン — 高specificity + !important で確実表示 */
.wcr-result .wcr-line-cta-compact-btn,
button.wcr-line-cta-compact-btn {
  flex-shrink: 0;
  display: inline-block;
  background-color: #06C755 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px;
  border-radius: 24px;
  border: none !important;
  white-space: nowrap;
  transition: opacity 0.2s;
  text-decoration: none;
}
.wcr-result .wcr-line-cta-compact-btn:hover,
button.wcr-line-cta-compact-btn:hover { opacity: 0.88; }

/* フル版 LINE CTA（控えめ・ボタンで目立たせる） */
.wcr-line-cta-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 2px 14px rgba(58,46,38,0.06);
  text-align: center;
  border: 1px solid rgba(155,199,164,0.25);
}
.wcr-line-icon-circle {
  width: 48px; height: 48px;
  background: #06C755;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 2px 10px rgba(6,199,85,0.22);
}
.wcr-line-icon-inner {
  width: 28px; height: 26px;
  background: #fff;
  border-radius: 6px 6px 0 0;
  position: relative;
}
.wcr-line-icon-inner::before {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
}
.wcr-line-cta-texts { margin-bottom: 18px; }
.wcr-line-cta-title {
  font-size: 17px;
  font-weight: 800;
  color: #3A2E26;
  margin-bottom: 6px;
  line-height: 1.4;
}
.wcr-line-cta-desc {
  font-size: 13px;
  color: #6A5A50;
  line-height: 1.65;
}
/* フル LINE ボタン — 確実表示 */
.wcr-result .wcr-line-cta-btn-main,
button.wcr-line-cta-btn-main {
  display: block !important;
  width: 100%;
  background-color: #06C755 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 20px;
  border-radius: 28px;
  border: none !important;
  margin-bottom: 10px;
  transition: opacity 0.2s;
  box-shadow: 0 4px 16px rgba(6,199,85,0.30);
  letter-spacing: 0.02em;
}
.wcr-result .wcr-line-cta-btn-main:hover,
button.wcr-line-cta-btn-main:hover { opacity: 0.88; }
.wcr-line-cta-note {
  font-size: 11px;
  color: #8A7A70;
  margin: 0;
}

/* ============================================================
   ⑥ 仕組み解説（アコーディオン）
   ============================================================ */
.wcr-mechanism-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(58,46,38,0.05);
}
.wcr-mechanism-intro {
  font-size: 13px;
  color: #6A5A50;
  margin: 0 0 12px;
  line-height: 1.6;
}
.wcr-msteps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 380px) {
  .wcr-msteps { grid-template-columns: 1fr; }
}
.wcr-mstep {
  border-radius: 14px;
  padding: 14px 12px;
  position: relative;
  overflow: hidden;
}
.wcr-mstep-num {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.wcr-mstep-title {
  font-size: 12px;
  font-weight: 700;
  color: #3A2E26;
  margin-bottom: 4px;
}
.wcr-mstep-desc {
  font-size: 11.5px;
  color: #5A4A40;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   ⑦ 改善アクション
   ============================================================ */
.wcr-action-cards { display: flex; flex-direction: column; gap: 12px; }
.wcr-action-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 2px 12px rgba(58,46,38,0.06);
  border-left: 4px solid #C8B8A8;
}
.wcr-action-cards .wcr-action-card:first-child {
  border-left-color: #E8A07A;
  background: linear-gradient(to right, #FFF8F2, #fff);
  box-shadow: 0 4px 18px rgba(232,160,122,0.12);
}
.wcr-action-cards .wcr-action-card:nth-child(2) {
  border-left-color: #9BC7A4;
}
.wcr-action-priority {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C8B8A8;
  margin-bottom: 6px;
}
.wcr-action-cards .wcr-action-card:first-child .wcr-action-priority { color: #E8A07A; }
.wcr-action-cards .wcr-action-card:nth-child(2) .wcr-action-priority { color: #9BC7A4; }
.wcr-action-title {
  font-size: 15px;
  font-weight: 700;
  color: #3A2E26;
  margin: 0 0 10px;
  line-height: 1.4;
}
.wcr-action-detail-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(58,46,38,0.10);
  margin-bottom: 6px;
}
.wcr-action-detail-row--last {
  border-bottom: none;
  margin-bottom: 12px;
  padding-bottom: 0;
}
.wcr-action-detail-label { flex-shrink: 0; color: #8A7A70; font-weight: 600; }
.wcr-action-detail-text  { color: #3A2E26; }
.wcr-action-cta {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(155,199,164,0.18);
  color: #3A8050;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  transition: background 0.2s;
}
.wcr-action-cta:hover { background: rgba(155,199,164,0.30); }

/* ============================================================
   ⑧ 期待できる変化（明るいグリーン）
   ============================================================ */
.wcr-improve-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 2px 12px rgba(58,46,38,0.06);
}
.wcr-improve-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #9BC7A4, #6EB88A);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(110,184,138,0.25);
}
.wcr-improve-period-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.wcr-improve-period-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.wcr-improve-intro {
  font-size: 13px;
  color: #6A5A50;
  margin: 0 0 12px;
  line-height: 1.6;
}
.wcr-improve-list { display: flex; flex-direction: column; gap: 6px; }
.wcr-improve-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #F2FBF4;
  border-radius: 10px;
  font-size: 13px;
  color: #3A2E26;
  line-height: 1.5;
}
.wcr-improve-item::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #9BC7A4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9l4 4 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  margin-top: 1px;
}

/* ============================================================
   ⑨ よくある失敗（アコーディオン）
   ============================================================ */
.wcr-mistake-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(58,46,38,0.05);
}
.wcr-mistake-intro {
  font-size: 13px;
  color: #6A5A50;
  margin: 0 0 12px;
  line-height: 1.6;
}
.wcr-mistake-list { display: flex; flex-direction: column; gap: 6px; }
.wcr-mistake-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #FFF8F4;
  border-radius: 10px;
  font-size: 13px;
  color: #3A2E26;
  line-height: 1.5;
}
.wcr-mistake-item::before {
  content: '×';
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #E8907A;
  line-height: 1.4;
}

/* ============================================================
   ⑩ チェックリスト（明るいカード）
   ============================================================ */
.wcr-checklist-card {
  background: linear-gradient(155deg, #EDFBF0 0%, #FFF8F2 100%);
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(155,199,164,0.18);
  border: 1.5px solid rgba(155,199,164,0.30);
}
.wcr-checklist-intro {
  font-size: 13px;
  color: #4A5A48;
  margin: 0 0 14px;
  line-height: 1.6;
}
.wcr-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.wcr-check-item { display: block; }
.wcr-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 11px 13px;
  background: #fff;
  border-radius: 12px;
  transition: background 0.15s;
  box-shadow: 0 1px 4px rgba(58,46,38,0.05);
}
.wcr-check-label:hover { background: #F7FDF8; }
.wcr-check-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.wcr-check-box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid #BFD8C8;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 0;
}
.wcr-check-box::after {
  content: '';
  display: block;
  width: 5px; height: 9px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translateY(-1px);
  transition: border-color 0.15s;
}
.wcr-check-input:checked + .wcr-check-box {
  background: #9BC7A4;
  border-color: #9BC7A4;
}
.wcr-check-input:checked + .wcr-check-box::after {
  border-color: #fff;
}
.wcr-check-text {
  font-size: 13px;
  color: #3A2E26;
  line-height: 1.55;
  padding-top: 1px;
}
.wcr-check-input:checked ~ .wcr-check-text {
  color: #8A9A88;
  text-decoration: line-through;
}
.wcr-checklist-save-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: #3A8050;
  font-size: 13px;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
  border: 2px solid rgba(155,199,164,0.50);
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.wcr-checklist-save-btn:hover {
  background: rgba(155,199,164,0.12);
  border-color: #9BC7A4;
}

/* ============================================================
   次のステップブロック（記事・ケアアイテム・シェア）
   ============================================================ */
.wcr-next-section {
  padding: 0 20px 28px;
  background: #FFF8F2;
}
.wcr-next-block { margin-bottom: 24px; }
.wcr-next-block-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 10px;
}
.wcr-article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 6px rgba(58,46,38,0.05);
  transition: background 0.15s;
}
.wcr-article-item:hover { background: #FFF7F0; }
.wcr-article-item-text { font-size: 13px; font-weight: 600; color: #3A2E26; }
.wcr-article-arrow { font-size: 16px; color: #C8B8A8; }

.wcr-care-list { display: flex; flex-direction: column; gap: 8px; }
.wcr-care-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(58,46,38,0.05);
}
.wcr-care-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E8A07A;
  margin-top: 5px;
}
.wcr-care-name { font-size: 13px; font-weight: 700; color: #3A2E26; }
.wcr-care-desc { font-size: 12px; color: #8A7A70; margin-top: 2px; }
.wcr-care-note { font-size: 11px; color: #B0A098; margin: 8px 0 0; line-height: 1.5; }

/* ============================================================
   再診断（アコーディオン）
   ============================================================ */
.wcr-rediag-card {
  background: linear-gradient(155deg, #F2FBF4 0%, #FFF8F2 100%);
  border-radius: 16px;
  padding: 16px;
}
.wcr-rediag-intro {
  font-size: 13px;
  color: #5A4A40;
  margin: 0 0 16px;
  line-height: 1.6;
}
.wcr-rediag-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.wcr-rediag-flow-item {
  flex: 1;
  text-align: center;
  background: #fff;
  border-radius: 14px;
  padding: 14px 8px;
  box-shadow: 0 2px 10px rgba(58,46,38,0.06);
}
.wcr-rediag-flow-item--next { opacity: 0.6; }
.wcr-rediag-flow-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 4px;
}
.wcr-rediag-flow-name { font-size: 12px; color: #6A5A50; margin-bottom: 6px; }
.wcr-rediag-flow-score {
  font-size: 28px;
  font-weight: 800;
  color: #E8A07A;
}
.wcr-rediag-flow-score--tbd { color: #C8B8A8; }
.wcr-rediag-flow-score small { font-size: 13px; font-weight: 600; }
.wcr-rediag-flow-arrow { font-size: 20px; color: #C8B8A8; flex-shrink: 0; }
.wcr-rediag-btn {
  display: block;
  width: 100%;
  background: rgba(155,199,164,0.22);
  color: #3A8050;
  font-size: 13px;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 8px;
  border: none;
}
.wcr-rediag-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wcr-rediag-hint { font-size: 11px; color: #B0A098; text-align: center; margin: 0; }

/* ============================================================
   関連する他の診断（アコーディオン）
   ============================================================ */
.wcr-related-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(58,46,38,0.05);
}
.wcr-related-intro {
  font-size: 13px;
  color: #6A5A50;
  margin: 0 0 12px;
  line-height: 1.6;
}
.wcr-related-list { display: flex; flex-direction: column; gap: 8px; }
.wcr-related-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FFF8F2;
  border-radius: 12px;
}
.wcr-related-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C8B8A8;
}
.wcr-related-name { font-size: 13px; font-weight: 700; color: #3A2E26; }
.wcr-related-desc { font-size: 12px; color: #8A7A70; margin-top: 2px; }
.wcr-related-soon {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #B0A098;
  background: rgba(200,184,168,0.18);
  padding: 3px 8px;
  border-radius: 10px;
}

/* ============================================================
   関連する他の診断（独立セクション）
   ============================================================ */
.wcr-related-section {
  padding: 28px 20px 24px;
  background: #FAFAF8;
  border-top: 1px solid rgba(58,46,38,0.06);
}
.wcr-related-section .wcr-sh { margin-bottom: 16px; }

/* ============================================================
   シェアカード（明るいデザイン）
   ============================================================ */
.wcr-share-section {
  padding: 24px 20px 28px;
  background: #FFF8F2;
  border-top: 1px solid rgba(58,46,38,0.06);
}
.wcr-share-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(58,46,38,0.07);
  border: 1px solid rgba(155,199,164,0.20);
  margin-bottom: 14px;
}
.wcr-share-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9BC7A4;
  margin-bottom: 8px;
}
.wcr-share-headline {
  font-size: 17px;
  font-weight: 800;
  color: #3A2E26;
  margin-bottom: 10px;
  line-height: 1.3;
}
.wcr-share-type-badge {
  display: inline-block;
  background: rgba(232,160,122,0.14);
  color: #B05828;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.wcr-share-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
}
.wcr-share-score-num {
  font-size: 44px;
  font-weight: 900;
  color: #E8A07A;
  line-height: 1;
}
.wcr-share-score-sep {
  font-size: 20px;
  font-weight: 700;
  color: #C8B8A8;
  margin: 0 1px;
}
.wcr-share-score-max {
  font-size: 18px;
  font-weight: 700;
  color: #C8B8A8;
}
.wcr-share-risk-line {
  font-size: 13px;
  font-weight: 600;
  color: #6A5A50;
  margin-bottom: 14px;
}
.wcr-share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 18px;
}
.wcr-share-chip {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(155,199,164,0.16);
  color: #3E8A52;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.wcr-result .wcr-share-btn,
button.wcr-share-btn {
  display: block !important;
  width: 100%;
  background-color: #3A2E26 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px;
  border-radius: 12px;
  border: none !important;
  transition: background 0.2s;
  cursor: pointer;
}
.wcr-result .wcr-share-btn:hover,
button.wcr-share-btn:hover { background-color: #52402E !important; }
.wcr-disclaimer {
  font-size: 11px;
  color: #B0A098;
  line-height: 1.65;
  text-align: center;
  margin: 0;
  padding: 0 4px;
}

/* ============================================================
   再診断ボタン
   ============================================================ */
.wcr-retry-wrap {
  text-align: center;
  padding: 20px 20px 32px;
  background: #FFF8F2;
}
.wcr-result .wcr-retry-btn,
button.wcr-retry-btn {
  display: inline-block;
  padding: 12px 32px;
  background-color: rgba(58,46,38,0.09) !important;
  color: #3A2E26 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 24px;
  border: none !important;
  transition: background 0.2s;
  cursor: pointer;
}
.wcr-result .wcr-retry-btn:hover,
button.wcr-retry-btn:hover { background-color: rgba(58,46,38,0.16) !important; }

/* ============================================================
   エラー
   ============================================================ */
.wcr-error {
  padding: 40px 20px;
  text-align: center;
  color: #8A7A70;
}

/* ============================================================
   要因別スコア
   ============================================================ */
.wcr-factor-scores-section { background: #FAFDF9; border-radius: 16px; padding: 24px 20px; margin: 16px 0; }
.wcr-factor-intro { font-size: 13px; color: #7A6E68; margin: 0 0 16px; line-height: 1.6; }
.wcr-factor-bars  { display: flex; flex-direction: column; gap: 12px; }

.wcr-factor-row { display: flex; align-items: center; gap: 10px; }
.wcr-factor-label {
  flex: 0 0 100px;
  font-size: 12px;
  font-weight: 600;
  color: #3A2E26;
  line-height: 1.3;
}
.wcr-factor-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wcr-factor-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(58,46,38,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.wcr-factor-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(.22,1,.36,1);
}
.wcr-factor-score {
  flex: 0 0 40px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #3A2E26;
}
.wcr-factor-score small { font-size: 10px; font-weight: 400; color: #8A7A70; margin-left: 1px; }

/* ============================================================
   判定根拠
   ============================================================ */
.wcr-judgment-basis-section { background: #F8FBF8; border-radius: 16px; padding: 24px 20px; margin: 16px 0; }
.wcr-basis-intro { font-size: 13px; color: #7A6E68; margin: 0 0 14px; line-height: 1.6; }
.wcr-basis-list  { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.wcr-basis-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(155,199,164,0.35);
  border-radius: 99px;
  padding: 6px 14px 6px 8px;
}
.wcr-basis-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: rgba(155,199,164,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcr-basis-check svg { width: 12px; height: 12px; display: block; }
.wcr-basis-text {
  font-size: 12px;
  font-weight: 600;
  color: #3A2E26;
  white-space: nowrap;
}

/* ============================================================
   判定根拠 — 強化版
   ============================================================ */
.wcr-basis-item--key .wcr-basis-check svg path { stroke: #E8A07A; }
.wcr-basis-item--key .wcr-basis-text { color: #3A2E26; font-weight: 700; }
.wcr-basis-item--key { border-color: rgba(232,160,122,0.45); }

.wcr-basis-key-section {
  margin-top: 16px;
  background: #FFF8F2;
  border: 1px solid rgba(232,160,122,0.25);
  border-radius: 12px;
  padding: 14px 16px;
}
.wcr-basis-key-title {
  font-size: 11px;
  font-weight: 700;
  color: #E8A07A;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.wcr-basis-key-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wcr-basis-key-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wcr-basis-key-label { font-size: 13px; color: #3A2E26; }
.wcr-basis-key-value {
  font-size: 12px;
  font-weight: 700;
  color: #E8A07A;
  background: rgba(232,160,122,0.12);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 要因説明文 */
.wcr-factor-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wcr-factor-desc { font-size: 12px; color: #7A6E68; line-height: 1.6; margin: 6px 0 0; }

/* ============================================================
   プロフィール画面 (STEP 1)
   ============================================================ */
.wcdiag-profile-screen {
  background: #fff;
  border-radius: 20px;
  padding: 28px 20px 32px;
  box-shadow: 0 4px 24px rgba(58,46,38,.08);
}
.wcdiag-profile-header { text-align: center; margin-bottom: 24px; }
.wcdiag-step-badge {
  display: inline-block;
  background: linear-gradient(135deg,#9BC7A4,#BFE3C0);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.wcdiag-step-badge--diag { background: linear-gradient(135deg,#F6C7A8,#E8A07A); }
.wcdiag-step-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wcdiag-step-label { font-size: 12px; color: #8A7A70; font-weight: 600; }
.wcdiag-profile-title { font-size: 22px; font-weight: 800; color: #3A2E26; margin: 0 0 6px; }
.wcdiag-profile-sub { font-size: 13px; color: #8A7A70; margin: 0; line-height: 1.6; }

.wcdiag-pf-form { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.wcdiag-pf-field { display: flex; flex-direction: column; gap: 6px; }
.wcdiag-pf-field--half { flex: 1; min-width: 0; }
.wcdiag-pf-row { display: flex; gap: 12px; }
.wcdiag-pf-label { font-size: 13px; font-weight: 700; color: #3A2E26; display: flex; align-items: center; gap: 6px; }
.wcdiag-pf-tag {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: .02em;
}
.wcdiag-pf-required { background: #FDECEA; color: #C0392B; }
.wcdiag-pf-optional { background: #F0F0EE; color: #8A7A70; }

.wcdiag-pf-input,
.wcdiag-pf-select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #3A2E26;
  background: #F9F7F5;
  border: 1.5px solid #D5CBc4;
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.wcdiag-pf-input:focus,
.wcdiag-pf-select:focus {
  border-color: #9BC7A4;
  box-shadow: 0 0 0 3px rgba(155,199,164,.2);
  outline: none;
  background: #fff;
}
.wcdiag-pf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7A70' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.wcdiag-pf-num-wrap { display: flex; align-items: center; gap: 8px; }
.wcdiag-pf-number {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 700; color: #3A2E26; text-align: center;
  background: #F9F7F5; border: 1.5px solid #D5CBc4; border-radius: 12px;
  padding: 10px 8px;
  transition: border-color .2s, box-shadow .2s;
}
.wcdiag-pf-number:focus { border-color: #9BC7A4; box-shadow: 0 0 0 3px rgba(155,199,164,.2); outline: none; background: #fff; }
.wcdiag-pf-unit { font-size: 13px; color: #8A7A70; font-weight: 600; flex-shrink: 0; }

.wcdiag-pf-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wcdiag-pf-radio-btn {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 80px;
  font-size: 13px; font-weight: 600; color: #5A4E48;
  background: #F9F7F5;
  border: 1.5px solid #D5CBc4;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  line-height: 1.3;
}
.wcdiag-pf-radio-btn:hover { border-color: #9BC7A4; background: #F0FAF2; }
.wcdiag-pf-radio-btn.wcdiag-pf-selected {
  background: #EAF7ED;
  border-color: #9BC7A4;
  color: #2D6A40;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(155,199,164,.35);
}

.wcdiag-pf-error {
  font-size: 13px; color: #C0392B;
  background: #FDECEA; border-radius: 8px;
  padding: 10px 14px; margin-top: 4px;
  text-align: center;
}
.wcdiag-pf-submit {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  margin-top: 24px;
  background: linear-gradient(135deg, #9BC7A4 0%, #7BBF8C 100%);
  color: #fff;
  font-size: 16px; font-weight: 800;
  border: none; border-radius: 14px;
  padding: 16px 24px;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(123,191,140,.35);
}
.wcdiag-pf-submit:hover:not(:disabled) { opacity: .92; transform: translateY(-1px); }
.wcdiag-pf-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ============================================================
   クロス診断（次の診断）
   ============================================================ */
.wcr-next-diagnoses-section {
  padding: 28px 20px;
  background: #F8FBF8;
  border-top: 1px solid rgba(155,199,164,.15);
}
.wcr-next-diag-header { font-size: 17px; font-weight: 800; color: #3A2E26; margin-bottom: 4px; }
.wcr-next-diag-sub { font-size: 12px; color: #8A7A70; margin: 0 0 16px; }
.wcr-next-diag-list { display: flex; flex-direction: column; gap: 10px; }
.wcr-next-diag-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1px solid rgba(155,199,164,.25);
  border-radius: 14px;
  padding: 14px 16px;
}
.wcr-next-diag-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }
.wcr-next-diag-body { flex: 1; min-width: 0; }
.wcr-next-diag-name { font-size: 14px; font-weight: 700; color: #3A2E26; margin-bottom: 2px; }
.wcr-next-diag-desc { font-size: 12px; color: #7A6E68; line-height: 1.5; }
.wcr-next-diag-badge {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  background: #F0F0EE; color: #8A7A70;
  border-radius: 99px; padding: 4px 10px;
  white-space: nowrap;
}

/* ============================================================
   診断ハブページ (.wchub-*)
   ============================================================ */

.wchub-container { font-family: -apple-system, 'Hiragino Sans', sans-serif; }
.wchub-wrap { max-width: 680px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; }

/* プロフィールカード */
.wchub-profile-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #F0FAF4 0%, #E8F5FF 100%);
  border: 1px solid #C5E8D5;
  border-radius: 16px; padding: 16px 20px;
}
.wchub-profile-card--empty { background: #F8F8F8; border-color: #E0E0E0; }
.wchub-profile-empty { flex: 1; font-size: 13px; color: #888; line-height: 1.6; }
.wchub-profile-icon { font-size: 32px; flex-shrink: 0; }
.wchub-profile-info { flex: 1; min-width: 0; }
.wchub-profile-name { font-size: 17px; font-weight: 800; color: #3A2E26; }
.wchub-profile-meta { font-size: 12px; color: #7A6E68; margin-top: 2px; }
.wchub-profile-edit-btn {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: #27AE60; border: 1.5px solid #27AE60;
  background: #fff; border-radius: 99px;
  padding: 6px 14px; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.wchub-profile-edit-btn:hover { background: #27AE60; color: #fff; }

/* セクション共通 */
.wchub-section { }
.wchub-section-title {
  font-size: 16px; font-weight: 800; color: #3A2E26;
  margin: 0 0 12px; padding-left: 10px;
  border-left: 4px solid #27AE60;
}

/* 診断カードリスト */
.wchub-diag-list { display: flex; flex-direction: column; gap: 10px; }
.wchub-diag-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 14px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .1s;
}
.wchub-diag-card--ok {
  border-color: #C5E8D5;
  box-shadow: 0 1px 4px rgba(39,174,96,.08);
}
.wchub-diag-card--ok:hover {
  box-shadow: 0 4px 16px rgba(39,174,96,.18);
  transform: translateY(-1px);
}
.wchub-diag-card--soon { opacity: .65; cursor: default; }
.wchub-diag-card-icon { font-size: 28px; flex-shrink: 0; width: 38px; text-align: center; }
.wchub-diag-card-body { flex: 1; min-width: 0; }
.wchub-diag-card-name { font-size: 15px; font-weight: 700; color: #3A2E26; }
.wchub-diag-card-desc { font-size: 12px; color: #7A6E68; margin-top: 2px; }
.wchub-diag-last { font-size: 11px; color: #27AE60; margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wchub-diag-last--none { color: #B0A898; }
.wchub-diag-date { font-weight: 600; }
.wchub-diag-type-pill {
  background: #E8F5EE; color: #27AE60; border-radius: 99px;
  padding: 1px 8px; font-size: 10px; font-weight: 700;
}
.wchub-diag-card-arrow {
  flex-shrink: 0; font-size: 12px; font-weight: 700;
  color: #27AE60; white-space: nowrap;
}
.wchub-diag-card-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  background: #F0F0EE; color: #8A7A70;
  border-radius: 99px; padding: 4px 10px; white-space: nowrap;
}

/* 診断履歴 */
.wchub-hist-empty { font-size: 13px; color: #B0A898; padding: 16px 0; text-align: center; }
.wchub-hist-list { display: flex; flex-direction: column; gap: 8px; }
.wchub-hist-item {
  display: flex; align-items: center; gap: 12px;
  background: #FAFAFA; border: 1px solid #EEEEEE;
  border-radius: 12px; padding: 12px 14px;
}
.wchub-hist-item-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.wchub-hist-item-body { flex: 1; min-width: 0; }
.wchub-hist-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.wchub-hist-date { font-size: 11px; font-weight: 700; color: #8A7A70; }
.wchub-hist-diag { font-size: 12px; color: #3A2E26; font-weight: 600; }
.wchub-hist-item-bottom { display: flex; align-items: center; gap: 8px; }
.wchub-hist-type {
  font-size: 11px; background: #F0FAF4; color: #27AE60;
  border-radius: 99px; padding: 2px 8px; font-weight: 700;
}
.wchub-hist-score { font-size: 11px; color: #8A7A70; }

/* プロフィール編集フォーム */
.wchub-edit-form { padding: 4px 0; }
.wchub-edit-title { font-size: 17px; font-weight: 800; color: #3A2E26; margin: 0 0 20px; }
.wchub-pf-field { margin-bottom: 16px; }
.wchub-pf-row { display: flex; gap: 12px; }
.wchub-pf-row .wchub-pf-field { flex: 1; }
.wchub-pf-label { display: block; font-size: 13px; font-weight: 700; color: #3A2E26; margin-bottom: 6px; }
.wchub-pf-req { font-size: 10px; font-weight: 700; background: #FFECEC; color: #E05050; border-radius: 99px; padding: 1px 6px; margin-left: 4px; }
.wchub-pf-opt { font-size: 10px; background: #F0F0F0; color: #888; border-radius: 99px; padding: 1px 6px; margin-left: 4px; }
.wchub-pf-input, .wchub-pf-select {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #E0DDD8; border-radius: 10px;
  padding: 10px 12px; font-size: 14px;
  background: #FAFAFA; outline: none; transition: border-color .15s;
}
.wchub-pf-input:focus, .wchub-pf-select:focus { border-color: #27AE60; background: #fff; }
.wchub-pf-num-wrap { display: flex; align-items: center; gap: 6px; }
.wchub-pf-number {
  width: 80px; border: 1.5px solid #E0DDD8; border-radius: 10px;
  padding: 10px; font-size: 14px; background: #FAFAFA;
  outline: none; transition: border-color .15s; text-align: center;
}
.wchub-pf-number:focus { border-color: #27AE60; background: #fff; }
.wchub-pf-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.wchub-pf-radio {
  border: 1.5px solid #E0DDD8; border-radius: 99px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  background: #FAFAFA; color: #5A5050; cursor: pointer;
  transition: all .15s;
}
.wchub-pf-radio.wchub-pf-sel, .wchub-pf-radio:hover { border-color: #27AE60; background: #E8F5EE; color: #27AE60; }
.wchub-pf-error { font-size: 12px; color: #E05050; margin: 4px 0 0; }
.wchub-pf-buttons { display: flex; gap: 10px; margin-top: 24px; }
.wchub-pf-btn-cancel {
  flex: 1; padding: 13px; border: 1.5px solid #E0DDD8; border-radius: 12px;
  background: #fff; font-size: 14px; font-weight: 700; color: #8A7A70;
  cursor: pointer; transition: all .15s;
}
.wchub-pf-btn-cancel:hover { border-color: #C0BAB5; }
.wchub-pf-btn-save {
  flex: 2; padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #27AE60 0%, #1E8F4E 100%);
  font-size: 14px; font-weight: 800; color: #fff;
  cursor: pointer; transition: opacity .15s;
}
.wchub-pf-btn-save:hover { opacity: .9; }

/* ============================================================
   腸活診断 ヒーロー (.wcr-hero--chokatu)
   ============================================================ */
.wcr-hero--chokatu {
  background: linear-gradient(135deg, #E8F5EE 0%, #E8F5FF 100%);
}
.wcr-chok-type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid; border-radius: 99px;
  padding: 6px 14px; font-size: 14px; font-weight: 800;
  margin-top: 10px;
}
.wcr-chok-type-icon { font-size: 18px; }
.wcr-chok-type-name { font-size: 14px; }
.wcr-chok-risk-label { font-size: 12px; font-weight: 700; margin-top: 8px; }

/* 腸活 比較バッジ */
.wcr-chok-comparison {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px; padding: 10px 16px;
  border-radius: 12px; font-size: 13px; font-weight: 700;
}
.wcr-chok-comparison.wcr-cmp--improved { background: #E8F5EE; color: #27AE60; }
.wcr-chok-comparison.wcr-cmp--worsened { background: #FEF3EC; color: #E67E22; }
.wcr-cmp-sign { font-size: 16px; }
.wcr-cmp-diff { font-size: 20px; font-weight: 900; }
.wcr-cmp-text { font-size: 12px; }

/* 腸活 サマリー */
.wcr-chok-summary-section { padding: 20px 16px 4px; }
.wcr-chok-summary-card {
  background: #FAFAFA; border-radius: 14px;
  padding: 16px 18px;
}
.wcr-chok-summary-title { font-size: 16px; font-weight: 800; color: #3A2E26; margin: 0 0 8px; }
.wcr-chok-summary-body { font-size: 13px; color: #5A5050; line-height: 1.7; margin: 0; }

/* 腸活 要因バー */
.wcr-chok-factors { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.wcr-chok-factor-row { display: flex; align-items: center; gap: 10px; }
.wcr-chok-factor-label { width: 100px; font-size: 11px; font-weight: 600; color: #5A5050; flex-shrink: 0; }
.wcr-chok-factor-track { flex: 1; height: 10px; background: #F0F0F0; border-radius: 99px; overflow: hidden; }
.wcr-chok-factor-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.wcr-chok-factor-pct { width: 28px; text-align: right; font-size: 11px; font-weight: 700; color: #8A7A70; flex-shrink: 0; }
.wcr-chok-factor-note { font-size: 11px; color: #B0A898; margin: 10px 0 0; }

/* 腸活 アクションリスト */
.wcr-chok-action-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.wcr-chok-action-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: #F8FBF9; border: 1px solid #C5E8D5;
  border-radius: 12px; padding: 12px 14px;
}
.wcr-chok-action-num {
  flex-shrink: 0; width: 24px; height: 24px;
  background: #27AE60; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.wcr-chok-action-text { font-size: 13px; color: #3A2E26; line-height: 1.5; padding-top: 2px; }

/* 腸活 ハブリンク */
.wcr-chok-hub-link { text-align: center; padding: 14px 0 4px; }
.wcr-chok-hub-link a { font-size: 13px; color: #27AE60; text-decoration: none; font-weight: 600; }
.wcr-chok-hub-link a:hover { text-decoration: underline; }

/* 腸活結果ページ：クリッカブルなナビカード */
.wcr-next-diag-card--link { text-decoration: none; cursor: pointer; }
.wcr-next-diag-card--link:hover { box-shadow: 0 4px 14px rgba(39,174,96,.15); transform: translateY(-1px); transition: all .15s; }
.wcr-next-diag-btn {
  flex-shrink: 0; font-size: 12px; font-weight: 700;
  color: #27AE60; white-space: nowrap;
}

/* ============================================================
   追加修正 v1.2.0-fix
   ============================================================ */

/* 診断間ナビカード（リンク）の色 */
.wcr-next-diag-card--link { color: inherit; }

/* 任意質問バッジ */
.wcdiag-optional-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  background: #EFF6FF; color: #4A86CC;
  border: 1px solid #C8DFFE; border-radius: 99px;
  padding: 2px 8px; margin-left: 8px;
  vertical-align: middle;
}
.wcdiag-optional-hint {
  font-size: 11px; color: #4A86CC;
  margin: -4px 0 8px; padding: 0;
}

/* 腸活ヒーローの背景色上書き（tearstain の緑系グラデとは別系統） */
.wcr-hero--chokatu {
  background: linear-gradient(160deg, #E8F6EE 0%, #F0F8FF 55%, #EAF5F2 100%);
}
.wcr-hero--chokatu .wcr-eyebrow { color: #27AE60; background: rgba(39,174,96,0.12); }
.wcr-hero--chokatu .wcr-hero-deco--b {
  background: radial-gradient(circle, rgba(39,174,96,0.20) 0%, transparent 65%);
}

/* ============================================================
   v1.3.0 — 健康カルテ化 / 比較機能 / 再診断サジェスト
   ============================================================ */

/* ── ハブ: カルテヘッダー ────────────────────────────────── */
.wchub-karte-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 4px 8px;
}
.wchub-karte-header-body {
  flex: 1;
  min-width: 0;
}
.wchub-karte-title {
  font-size: 18px;
  font-weight: 800;
  color: #2C3E50;
  letter-spacing: -0.3px;
}
.wchub-karte-sub {
  font-size: 12px;
  color: #9A9A9A;
  margin-top: 4px;
}
.wchub-karte-open-btn {
  display: inline-block;
  background: #3EB489;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s;
}
.wchub-karte-open-btn:hover { background: #2E9A72; }

/* ── ハブ: 最新スコアサマリー ──────────────────────────── */
.wchub-score-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.wchub-score-card {
  background: #fff;
  border: 1px solid #E4EEE8;
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.wchub-score-card--none { opacity: 0.65; }
.wchub-score-card-icon  { font-size: 22px; }
.wchub-score-card-name  { font-size: 11px; color: #777; margin: 3px 0 8px; }
.wchub-score-card-score-wrap { line-height: 1; }
.wchub-score-card-num   { font-size: 30px; font-weight: 800; }
.wchub-score-card-max   { font-size: 12px; color: #bbb; font-weight: 400; }
.wchub-score-card-type  {
  font-size: 10px; color: #777;
  background: #F4F6F4; border-radius: 99px;
  padding: 2px 9px; display: inline-block; margin-top: 6px;
}
.wchub-score-card-date  { font-size: 10px; color: #C0C0C0; margin-top: 5px; }
.wchub-score-card-undiag { font-size: 14px; color: #C0C0C0; font-weight: 600; margin: 8px 0 4px; }
.wchub-score-card-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: #3EB489;
  text-decoration: none;
  font-weight: 700;
}
.wchub-score-card-link:hover { text-decoration: underline; }

/* ── ハブ: 履歴カード ───────────────────────────────────── */
.wchub-hist-card {
  background: #fff;
  border: 1px solid #E4EEE8;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.wchub-hist-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wchub-hist-card-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.wchub-hist-card-icon { font-size: 16px; }
.wchub-hist-card-name { font-size: 14px; font-weight: 700; color: #2C3E50; }
.wchub-hist-card-date { font-size: 11px; color: #B8B8B8; white-space: nowrap; }
.wchub-hist-card-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.wchub-hist-card-score-name {
  font-size: 10px;
  color: #999;
  font-weight: 600;
  flex-basis: 100%;
  margin-bottom: 2px;
}
.wchub-hist-card-score-bar-wrap {
  flex: 1;
  height: 6px;
  background: #EDEEED;
  border-radius: 99px;
  overflow: hidden;
}
.wchub-hist-card-score-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.wchub-hist-card-score-num { font-size: 17px; font-weight: 800; color: #2C3E50; flex-shrink: 0; }
.wchub-hist-card-score-max { font-size: 11px; color: #C0C0C0; flex-shrink: 0; }
.wchub-hist-diff {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
}
.wchub-hist-diff--up   { background: #E8F5EE; color: #27AE60; }
.wchub-hist-diff--down { background: #FEF2F0; color: #D47070; }
.wchub-hist-card-type {
  font-size: 11px; color: #666;
  background: #F4F6F4; border-radius: 99px;
  padding: 2px 10px; display: inline-block;
}

/* ── 結果ページ: 前回比較 ───────────────────────────────── */
.wcr-comparison {
  margin: 0 0 20px;
  padding: 16px;
  background: #F2FAF5;
  border-radius: 16px;
  border-left: 4px solid #7BBF8C;
}
.wcr-comparison--worsened {
  background: #FEF6F2;
  border-left-color: #E8907A;
}
.wcr-cmp-header {
  font-size: 11px;
  font-weight: 700;
  color: #5A8A6A;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wcr-comparison--worsened .wcr-cmp-header { color: #B06A4A; }
.wcr-cmp-scores {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wcr-cmp-score-box { text-align: center; flex: 1; }
.wcr-cmp-score-val {
  font-size: 32px;
  font-weight: 800;
  color: #9AA8A0;
  line-height: 1;
}
.wcr-cmp-score-val--current { color: #27AE60; }
.wcr-comparison--worsened .wcr-cmp-score-val--current { color: #E8907A; }
.wcr-cmp-score-label { font-size: 10px; color: #A0A0A0; margin-top: 4px; }
.wcr-cmp-arrow-wrap  { text-align: center; flex-shrink: 0; }
.wcr-cmp-arrow { font-size: 18px; color: #B0C8B8; }
.wcr-cmp-diff-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #27AE60;
  color: #fff;
  border-radius: 99px;
  padding: 2px 9px;
  margin-top: 4px;
}
.wcr-comparison--worsened .wcr-cmp-diff-badge { background: #E8907A; }
.wcr-cmp-message {
  font-size: 13px;
  font-weight: 600;
  color: #4A7A5A;
  text-align: center;
  margin-bottom: 14px;
}
.wcr-comparison--worsened .wcr-cmp-message { color: #9A5A3A; }
.wcr-cmp-factors-title {
  font-size: 10px;
  font-weight: 700;
  color: #8AAAA0;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.wcr-cmp-factors { border-top: 1px solid #D8EED8; padding-top: 6px; }
.wcr-comparison--worsened .wcr-cmp-factors { border-top-color: #F0D8D0; }
.wcr-cmp-factor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #EAF4EE;
  font-size: 13px;
}
.wcr-cmp-factor-row:last-child { border-bottom: none; }
.wcr-cmp-factor-name   { color: #4A5A50; }
.wcr-cmp-factor-change { font-weight: 700; font-size: 12px; }
.wcr-cmp-factor-change--up   { color: #27AE60; }
.wcr-cmp-factor-change--same { color: #A8A8A8; }
.wcr-cmp-factor-change--down { color: #E07060; }

/* ── 結果ページ: 再診断サジェスト（腸活・アイコン+本文の横並び） ─────
   後方の汎用 .wcr-rediag-suggest（涙やけ用・text-align:center）に
   上書きされないよう .wcr-result--chokatu で特異度を上げる */
.wcr-result--chokatu .wcr-rediag-suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 14px 16px;
  text-align: left;
  background: linear-gradient(135deg, #EBF8FF 0%, #F0FBF4 100%);
  border: 1px solid #C0E0D0;
  border-radius: 14px;
}
.wcr-result--chokatu .wcr-rediag-suggest-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.wcr-rediag-suggest-icon { font-size: 24px; flex-shrink: 0; }
.wcr-rediag-suggest-body { flex: 1; }
.wcr-rediag-suggest-title {
  font-size: 14px;
  font-weight: 700;
  color: #2C3E50;
}
.wcr-rediag-suggest-desc {
  font-size: 11px;
  color: #7A9A8A;
  margin-top: 2px;
  line-height: 1.5;
}

/* ============================================================
   v1.4.0 — 健康サマリー / 推移グラフ
   ============================================================ */

/* ── 健康サマリー ──────────────────────────────────────── */
.wchub-overall-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wchub-overall-ring-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
.wchub-overall-ring {
  width: 108px;
  height: 108px;
  transform: rotate(-90deg);
}
.wchub-overall-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wchub-overall-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.wchub-overall-slash {
  font-size: 10px;
  color: #bbb;
  font-weight: 400;
  margin-top: 1px;
}
.wchub-overall-caption {
  font-size: 8px;
  color: #aaa;
  margin-top: 4px;
  text-align: center;
  line-height: 1.3;
}

/* 個別スコアリスト */
.wchub-indiv-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wchub-indiv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #F7FAF7;
  border-radius: 10px;
  flex-wrap: wrap;
}
.wchub-indiv-item--none { opacity: 0.65; }
.wchub-indiv-icon  { font-size: 14px; flex-shrink: 0; }
.wchub-indiv-label { font-size: 11px; color: #666; font-weight: 600; flex-shrink: 0; }
.wchub-indiv-score { font-size: 20px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.wchub-indiv-max   { font-size: 10px; color: #bbb; flex-shrink: 0; }
.wchub-indiv-type  { font-size: 9px; color: #999; display: none; }
.wchub-indiv-level { font-size: 11px; font-weight: 700; }
.wchub-indiv-undiag { font-size: 11px; color: #ccc; }
.wchub-indiv-link {
  margin-left: auto;
  font-size: 11px;
  color: #3EB489;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.wchub-indiv-link:hover { text-decoration: underline; }

/* 説明文 */
.wchub-summary-note {
  font-size: 11px;
  color: #aaa;
  line-height: 1.6;
  margin: 10px 0 0;
  text-align: center;
}

/* ── 健康推移グラフ ─────────────────────────────────────── */
.wchub-trend-chart {
  background: #fff;
  border: 1px solid #E4EEE8;
  border-radius: 14px;
  padding: 14px 14px 10px;
  margin-bottom: 12px;
}
.wchub-trend-chart--empty { padding-bottom: 14px; }
.wchub-trend-chart-label {
  font-size: 13px;
  font-weight: 700;
  color: #3A4A40;
  margin-bottom: 10px;
}
.wchub-trend-note {
  font-size: 10px;
  color: #C0C0C0;
  margin: 4px 0 0;
  text-align: right;
}
.wchub-trend-empty-msg {
  font-size: 12px;
  color: #b0b0b0;
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

/* ============================================================
   仮説画面 (v3.0 分岐型問診)
   ============================================================ */
.wcdiag-hypothesis {
  padding: 24px 18px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  margin: 12px 0;
}
.wcdiag-hyp-header { text-align: center; margin-bottom: 20px; }
.wcdiag-hyp-title {
  font-size: 16px;
  font-weight: 800;
  color: #2D3A2E;
  margin-bottom: 6px;
}
.wcdiag-hyp-sub { font-size: 13px; color: #7A8A7C; }

.wcdiag-hyp-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.wcdiag-hyp-row {
  display: grid;
  grid-template-columns: 22px 22px 1fr 100px 34px;
  align-items: center;
  gap: 6px;
}
.wcdiag-hyp-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2D3A2E;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wcdiag-hyp-icon { font-size: 18px; text-align: center; }
.wcdiag-hyp-label { font-size: 13px; font-weight: 700; color: #2D3A2E; }
.wcdiag-hyp-bar-wrap { background: #F0F4F0; border-radius: 4px; height: 8px; overflow: hidden; }
.wcdiag-hyp-bar { height: 100%; border-radius: 4px; transition: width .5s ease; }
.wcdiag-hyp-pct { font-size: 12px; font-weight: 700; color: #555; text-align: right; }

.wcdiag-hyp-bridge {
  background: #F7F9F7;
  border-left: 3px solid #27AE60;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #4A5A4C;
  line-height: 1.6;
}

/* ============================================================
   涙やけ結果レンダラー v3.0 スタイル
   ============================================================ */

/* レッドフラグバナー */
.wcr-redflag {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FEF2F0;
  border: 2px solid #E74C3C;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.wcr-redflag-icon { font-size: 28px; flex-shrink: 0; }
.wcr-redflag-title { font-size: 14px; font-weight: 800; color: #C0392B; margin-bottom: 4px; }
.wcr-redflag-text { font-size: 13px; color: #5A3030; line-height: 1.6; margin: 0; }

/* ストーリーセクション */
.wcr-story-section { margin-bottom: 24px; }
.wcr-story-card {
  background: #F7F9F7;
  border-left: 4px solid #27AE60;
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
}
.wcr-story-text { font-size: 14px; color: #3A4A3C; line-height: 1.8; margin: 0; }

/* 原因ランキング */
.wcr-cause-ranking { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.wcr-cause-row { display: grid; grid-template-columns: 22px 22px 1fr 100px 34px; align-items: center; gap: 6px; }
.wcr-cause-rank-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.wcr-cause-rank--1 .wcr-cause-rank-badge { background: #D4A84A; }
.wcr-cause-rank--2 .wcr-cause-rank-badge { background: #999; }
.wcr-cause-rank--other .wcr-cause-rank-badge { background: #C0B090; }
.wcr-cause-icon { font-size: 17px; text-align: center; }
.wcr-cause-name { font-size: 13px; font-weight: 700; color: #2D3A2E; }
.wcr-cause-bar-wrap { background: #F0F4F0; border-radius: 4px; height: 8px; overflow: hidden; }
.wcr-cause-bar { height: 100%; border-radius: 4px; }
.wcr-cause-pct { font-size: 12px; font-weight: 700; color: #555; text-align: right; }
.wcr-cause-a-note {
  font-size: 12px; color: #7A8A7C;
  background: #F5F7F5; border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; line-height: 1.6;
}

/* 原因別アドバイスカード */
.wcr-advice-list { display: flex; flex-direction: column; gap: 14px; }
.wcr-advice-card {
  background: #fff;
  border: 1px solid #E8EDE8;
  border-left: 4px solid #27AE60;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.wcr-advice-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.wcr-advice-icon { font-size: 18px; }
.wcr-advice-name { font-size: 14px; font-weight: 800; }
.wcr-advice-rank {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  color: #fff; background: #7A8A7C;
  padding: 2px 7px; border-radius: 99px;
}
.wcr-advice-text { font-size: 13px; color: #4A5A4C; line-height: 1.7; margin: 0 0 10px; }
.wcr-advice-cta-wrap { margin-top: 8px; }
.wcr-advice-cta {
  display: inline-block;
  background: #2D3A2E; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px; border-radius: 99px;
  text-decoration: none;
}
.wcr-advice-cta:hover { background: #3E5040; }
.wcr-advice-cta--coming { color: #999; font-size: 12px; }

/* ============================================================
   v2.1 追加スタイル
   ============================================================ */

/* ── レッドフラグ（3段階） ─────────────────────────────────── */
.wcr-redflag {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-left: 4px solid #E74C3C;
  background: #FFF5F5;
  border-bottom: 1px solid rgba(231,76,60,0.15);
}
.wcr-redflag--caution {
  border-left-color: #F39C12;
  background: #FFFBF0;
  border-bottom-color: rgba(243,156,18,0.15);
}
.wcr-redflag--urgent {
  border-left-color: #E74C3C;
  background: #FFF5F5;
}
.wcr-redflag-level-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 6px;
}
.wcr-redflag-badge--urgent  { background: rgba(231,76,60,0.15);  color: #A03030; }
.wcr-redflag-badge--caution { background: rgba(243,156,18,0.15); color: #8B6914; }
.wcr-redflag-icon { font-size: 28px; flex-shrink: 0; }
.wcr-redflag-body { flex: 1; }
.wcr-redflag-title { font-size: 14px; font-weight: 800; color: #1A252F; margin-bottom: 6px; }
.wcr-redflag-text  { font-size: 13px; color: #5D4037; line-height: 1.7; margin: 0; }

/* ── 原因連鎖マップ ─────────────────────────────────────────── */
.wcr-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.wcr-chain-nodes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 16px;
}
.wcr-chain-node {
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wcr-chain-node--cause {
  background: #fff;
  border: 2px solid currentColor;
}
.wcr-chain-node-icon  { font-size: 18px; }
.wcr-chain-node-label { flex: 1; text-align: left; }
.wcr-chain-node--bridge {
  background: #F0F4F8;
  color: #7A8898;
  border: 1.5px dashed #C8D4DC;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
}
.wcr-chain-node--terminal {
  background: linear-gradient(135deg, #EEF6FF, #E8F0F8);
  border: 2px solid #5B9BD5;
  color: #2471A3;
  font-size: 14px;
  font-weight: 800;
}
.wcr-chain-terminal-icon { font-size: 16px; }
.wcr-chain-arrow {
  font-size: 20px;
  color: #C0CAD4;
  line-height: 1;
  padding: 3px 0;
  user-select: none;
}
.wcr-chain-explanation {
  font-size: 13px;
  color: #5A6A6C;
  line-height: 1.7;
  margin: 0;
  background: #F5FAF7;
  border-radius: 10px;
  padding: 12px 16px;
  border-left: 3px solid #9BC7A4;
  width: 100%;
}

/* ── 診断確信度 ─────────────────────────────────────────────── */
.wcr-confidence-section { background: #F9FAFB; }
.wcr-confidence { display: flex; flex-direction: column; gap: 10px; }
.wcr-confidence-bar-wrap {
  width: 100%;
  height: 10px;
  background: #E8EDF2;
  border-radius: 5px;
  overflow: hidden;
}
.wcr-confidence-bar {
  height: 100%;
  background: linear-gradient(90deg, #3EB489, #2ECC71);
  border-radius: 5px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.wcr-confidence-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wcr-confidence-pct {
  font-size: 28px;
  font-weight: 900;
  color: #2C3E50;
  line-height: 1;
}
.wcr-confidence-label {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
}
.wcr-conf--high        { background: rgba(46,204,113,0.15); color: #1A7740; }
.wcr-conf--medium      { background: rgba(52,152,219,0.15); color: #1A5276; }
.wcr-conf--low-medium  { background: rgba(241,196,15,0.15);  color: #7D6608; }
.wcr-conf--low         { background: rgba(230,126,34,0.15);  color: #784212; }
.wcr-conf--very-low    { background: rgba(231,76,60,0.15);   color: #922B21; }
.wcr-confidence-desc {
  font-size: 13px;
  color: #5D6D7E;
  line-height: 1.6;
  margin: 0;
}
.wcr-confidence-low-note {
  font-size: 12px;
  color: #7D6608;
  background: #FEFBEA;
  border: 1px solid #F8E08A;
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.6;
}

/* ── 改善予測 ───────────────────────────────────────────────── */
.wcr-improvement-section { background: #FAFCF8; }
.wcr-improvement-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(58,46,38,0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.wcr-improvement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(58,46,38,0.07);
  background: #fff;
}
.wcr-improvement-row:last-child { border-bottom: none; }
.wcr-improvement-row:nth-child(odd) { background: #FAFCF8; }
.wcr-improvement-cause {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.wcr-improvement-icon { font-size: 18px; flex-shrink: 0; }
.wcr-improvement-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wcr-improvement-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.wcr-improvement-pts {
  font-size: 15px;
  font-weight: 900;
  color: #27AE60;
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}
.wcr-improvement-period {
  font-size: 11px;
  color: #7A8898;
  white-space: nowrap;
}
.wcr-improvement-difficulty {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 99px;
}
.wcr-diff--low    { background: rgba(46,204,113,0.12); color: #1A7740; }
.wcr-diff--medium { background: rgba(241,196,15,0.15);  color: #7D6608; }
.wcr-diff--high   { background: rgba(231,76,60,0.12);   color: #922B21; }
.wcr-improvement-disclaimer {
  font-size: 11px;
  color: #95A5A6;
  line-height: 1.6;
  margin: 0;
}

/* ── 原因別アドバイス — 関連記事CTA ────────────────────────── */
.wcr-advice-article-wrap { margin-top: 8px; }
.wcr-advice-article-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #F5F8FA;
  border: 1px solid #E0E8EE;
  border-radius: 8px;
  text-decoration: none;
  color: #2C3E50;
  transition: background 0.15s, border-color 0.15s;
  font-size: 13px;
}
.wcr-advice-article-link:hover {
  background: #EBF5FB;
  border-color: #85C1E9;
  color: #1A5276;
}
.wcr-advice-article-icon  { font-size: 15px; flex-shrink: 0; }
.wcr-advice-article-title { flex: 1; line-height: 1.5; }
.wcr-advice-article-arrow { color: #BDC3C7; font-size: 18px; flex-shrink: 0; }
.wcr-advice-article-link--coming { cursor: default; opacity: 0.7; }
.wcr-advice-article-link--coming:hover { background: #F5F8FA; border-color: #E0E8EE; }
.wcr-advice-article-badge {
  font-size: 10px;
  color: #95A5A6;
  background: #ECF0F1;
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.wcr-advice-cta--primary {
  display: inline-block;
  background: #2D3A2E;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 99px;
  text-decoration: none;
}
.wcr-advice-cta--primary:hover { background: #3E5040; }

/* ── レスポンシブ (768px〜) ─────────────────────────────────── */
@media (min-width: 768px) {
  .wcr-chain-nodes { max-width: 440px; }
  .wcr-improvement-row { padding: 15px 20px; }
  .wcr-improvement-name { font-size: 14px; }
  .wcr-improvement-pts  { font-size: 16px; }
  .wcr-improvement-period { font-size: 12px; }
}

/* ============================================================
   v3.0 アダプティブ問診 UI
   ============================================================ */

/* テーマバッジ（各質問の確認テーマ） */
.wcdiag-theme-badge {
  display: inline-block;
  background: linear-gradient(135deg, #EBF5F0, #D5EDE3);
  color: #1A6645;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 99px;
  letter-spacing: .06em;
  margin-bottom: 8px;
  border: 1px solid #B2D8C8;
}

/* なぜこの質問か */
.wcdiag-why-text {
  font-size: 12px;
  color: #7B8FA1;
  line-height: 1.6;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #F8FAFB;
  border-radius: 8px;
  border-left: 3px solid #B2D8C8;
}

/* ============================================================
   インタースティシャル（眼科警告 / 仮説）
   ============================================================ */
.wcdiag-interstitial {
  background: #fff;
  border-radius: 16px;
  padding: 32px 20px 28px;
  box-shadow: 0 4px 24px rgba(44, 62, 80, .12);
  text-align: center;
}

.wcdiag-interstitial--eye {
  border: 2px solid #E8A07A;
}

.wcdiag-interstitial-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.wcdiag-interstitial-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
  letter-spacing: .05em;
}

.wcdiag-interstitial-badge--warn {
  background: #FEF2E6;
  color: #CC6600;
  border: 1px solid #F5C48A;
}

.wcdiag-interstitial-title {
  font-size: 18px;
  font-weight: 800;
  color: #1A252F;
  margin: 0 0 12px;
  line-height: 1.4;
}

.wcdiag-interstitial-body {
  font-size: 14px;
  color: #5D6D7E;
  line-height: 1.7;
  margin: 0 0 24px;
  text-align: left;
}

.wcdiag-interstitial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
}

/* ============================================================
   v3.0 結果レンダラー — ヒーロー主原因
   ============================================================ */
.wcr-hero-main-cause {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 18px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

.wcr-hero-cause-label {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  letter-spacing: .05em;
}

.wcr-hero-cause-icon { font-size: 18px; }

.wcr-hero-cause-name {
  font-size: 14px;
  font-weight: 800;
  background: rgba(255,255,255,0.95);
  padding: 2px 10px;
  border-radius: 6px;
}

/* ============================================================
   v3.0 結果レンダラー — 回答根拠バレット
   ============================================================ */
.wcr-evidence-section { margin-bottom: 0; }

.wcr-evidence-intro {
  font-size: 13px;
  color: #7B8FA1;
  margin: 0 0 14px;
  line-height: 1.6;
}

.wcr-evidence-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-evidence-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #F7FBF9;
  border: 1px solid #C8E6D8;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #2C3E50;
}

.wcr-evidence-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #3EB489;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  margin-top: 1px;
}

.wcr-evidence-text { flex: 1; }

/* ============================================================
   v3.0 結果レンダラー — Top 3 アクション
   ============================================================ */
.wcr-topactions-section { }

.wcr-action-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 新バリアント（wcr-action-cards とは別の .wcr-action-list 内） */
.wcr-action-list .wcr-action-card {
  background: #fff;
  border: 1px solid #E4EBF0;
  border-left: 4px solid #3EB489;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.wcr-action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.wcr-action-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.wcr-action-icon { font-size: 20px; flex-shrink: 0; }

.wcr-action-priority {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 99px;
  letter-spacing: .04em;
  margin-left: auto;
}

.wcr-action-priority--urgent {
  background: #FDECEA;
  color: #C0392B;
  border: 1px solid #F5C6C2;
}

.wcr-action-priority--high {
  background: #FEF3E2;
  color: #CC6600;
  border: 1px solid #FAD7A0;
}

.wcr-action-priority--medium {
  background: #E8F5F0;
  color: #1A6645;
  border: 1px solid #B2D8C8;
}

.wcr-action-priority--low {
  background: #EAF2FB;
  color: #1A5276;
  border: 1px solid #AED6F1;
}

.wcr-action-text {
  font-size: 15px;
  font-weight: 700;
  color: #1A252F;
  line-height: 1.45;
  margin: 0 0 8px;
}

.wcr-action-detail {
  font-size: 13px;
  color: #5D6D7E;
  line-height: 1.7;
  margin: 0 0 10px;
}

.wcr-action-period {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #8A9BA8;
  background: #F5F8FA;
  padding: 5px 10px;
  border-radius: 6px;
}

.wcr-action-period-icon { font-size: 13px; }
.wcr-action-period-text { font-weight: 600; }

/* ============================================================
   v3.0 結果レンダラー — 次のステップ（統合セクション）
   ============================================================ */
.wcr-next-steps-section { }

.wcr-next-diag-rec {
  display: inline-block;
  background: #FF6B35;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .04em;
}

/* レッドフラグの水準バッジ */
.wcr-redflag-level-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 6px;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.wcr-redflag-badge--urgent {
  background: #FDECEA;
  color: #C0392B;
  border: 1px solid #F5C6C2;
}

.wcr-redflag-badge--caution {
  background: #FEF9E7;
  color: #B7770D;
  border: 1px solid #F9E0A0;
}

.wcr-redflag--caution {
  border-color: #F0C040;
  background: #FFFBEE;
}

.wcr-redflag-body { flex: 1; }

/* ============================================================
   プロフィール画面の追加スタイル
   ============================================================ */
.wcdiag-profile-sub {
  font-size: 13px;
  color: #7B8FA1;
  line-height: 1.6;
  margin: 0;
}

.wcdiag-pf-error {
  font-size: 13px;
  color: #C0392B;
  background: #FDECEA;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 4px 0 0;
  font-weight: 600;
}

@media (min-width: 768px) {
  .wcr-action-list { gap: 16px; }
  .wcr-action-text { font-size: 16px; }
  .wcr-evidence-item { padding: 14px 16px; font-size: 15px; }
}

/* ============================================================
   Human Touch Layer v3.1
   ============================================================ */

/* ── 診断開始カード ────────────────────────────────────── */
.wcdiag-start-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  padding: 40px 28px 32px;
  text-align: center;
}

.wcdiag-start-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
}

.wcdiag-start-title {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 12px;
}

.wcdiag-start-sub {
  font-size: 16px;
  color: #2C3E50;
  line-height: 1.8;
  margin: 0 0 20px;
}

.wcdiag-start-note {
  font-size: 13px;
  color: #7F8C8D;
  background: #f6faf8;
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.7;
  margin: 0 0 28px;
}

.wcdiag-start-begin-btn {
  width: 100%;
  max-width: 320px;
}

/* ── 質問 intro テキスト ──────────────────────────────── */
.wcdiag-question-intro {
  font-size: 13px;
  color: #7F8C8D;
  background: #f8fbf9;
  border-left: 3px solid #3EB489;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 0 0 12px;
  line-height: 1.6;
}

/* ── 観察プロンプト callout ───────────────────────────── */
.wcdiag-observation-prompt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(135deg, #EFF9F5 0%, #F4FAF7 100%);
  border: 1.5px solid #B8E6D4;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
}

.wcdiag-obs-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.wcdiag-obs-text {
  font-size: 14px;
  color: #1A5C3A;
  line-height: 1.75;
  margin: 0;
  font-weight: 500;
}

/* ── ヒントテキスト ───────────────────────────────────── */
.wcdiag-question-hint {
  font-size: 12px;
  color: #95A5A6;
  line-height: 1.6;
  margin: 12px 0 0;
  padding: 0 4px;
}

/* ── リアクション ─────────────────────────────────────── */
.wcdiag-reaction {
  background: linear-gradient(135deg, #EBF9F3 0%, #F0FAF6 100%);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 14px 0 0;
  font-size: 14px;
  color: #1D6B47;
  font-weight: 500;
  line-height: 1.6;
  animation: wcdiag-reaction-in .25s ease-out;
}

@keyframes wcdiag-reaction-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 仮説カード内 サマリーバレット ────────────────────── */
.wcdiag-summary-section {
  background: #F8FBF9;
  border: 1px solid #C8E6D8;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 20px;
}

.wcdiag-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.wcdiag-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcdiag-sum-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: #2C3E50;
  line-height: 1.5;
}

.wcdiag-sum-check {
  color: #3EB489;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── クロージングセクション ───────────────────────────── */
.wcr-closing-section {
  background: linear-gradient(135deg, #F3FBF7 0%, #EBF7F2 100%);
  border: 1px solid #C8E6D8;
  border-radius: 18px;
  padding: 36px 24px 32px;
  margin: 24px 0 0;
  text-align: center;
}

.wcr-closing-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 16px;
}

.wcr-closing-title {
  font-size: 18px;
  font-weight: 700;
  color: #1D6B47;
  line-height: 1.7;
  margin: 0 0 14px;
}

.wcr-closing-reframe {
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #2C3E50;
  font-weight: 600;
  margin: 0 0 16px;
  border-left: 3px solid #3EB489;
  text-align: left;
}

.wcr-closing-body {
  font-size: 14px;
  color: #4A6741;
  line-height: 1.8;
  margin: 0 0 10px;
}

.wcr-closing-end {
  font-size: 14px;
  color: #4A6741;
  line-height: 1.8;
  margin: 0 0 20px;
}

.wcr-closing-sign {
  font-size: 12px;
  color: #95A5A6;
  font-style: italic;
  letter-spacing: .04em;
}

/* ============================================================
   Cinematic Diagnosis Engine v4.0
   ============================================================ */

/* ── フェードアニメーション ───────────────────────────────── */
.wcdiag-fade-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.wcdiag-fade-in-seq {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: auto;
}

/* ── ウェルカム画面 ───────────────────────────────────────── */
.wcdiag-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 24px 40px;
  text-align: center;
  gap: 0;
}

.wcdiag-welcome-l1,
.wcdiag-welcome-l2,
.wcdiag-welcome-l3 {
  font-size: 22px;
  font-weight: 700;
  color: #2C3E50;
  line-height: 1.9;
  margin: 0;
  letter-spacing: .01em;
}

.wcdiag-welcome-l2 {
  color: #3EB489;
}

.wcdiag-welcome-l3 {
  color: #5A7A6A;
}

.wcdiag-welcome-cta {
  margin-top: 36px;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(62,180,137,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  letter-spacing: .04em;
}

.wcdiag-welcome-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 24px rgba(62,180,137,.45);
}

.wcdiag-welcome-skip {
  margin-top: 16px;
  background: none;
  border: none;
  color: #B0BEC5;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 16px;
  letter-spacing: .06em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 診断開始シネマ ───────────────────────────────────────── */
.wcdiag-start-cinema {
  padding: 48px 24px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.wcdiag-sc-name {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0;
  line-height: 2;
}

.wcdiag-sc-breed {
  font-size: 16px;
  color: #3EB489;
  font-weight: 600;
  margin: 8px 0 0;
  line-height: 1.8;
}

.wcdiag-sc-note {
  font-size: 13px;
  color: #7F8C8D;
  margin: 16px 0 0;
  background: #F6FAF8;
  border-radius: 10px;
  padding: 10px 18px;
  line-height: 1.7;
}

.wcdiag-sc-btn {
  margin-top: 32px;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 15px 36px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(62,180,137,.3);
  transition: transform .15s ease;
  letter-spacing: .04em;
}

.wcdiag-sc-btn:hover {
  transform: translateY(-2px);
}

/* ── ドット式プログレス ───────────────────────────────────── */
.wcdiag-progress-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0 0 24px;
}

.wcdiag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0E8E4;
  transition: background .3s ease, transform .3s ease;
}

.wcdiag-dot--done {
  background: #3EB489;
}

.wcdiag-dot--current {
  background: #3EB489;
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(62,180,137,.2);
}

/* ── テンポ別プリアンブル ─────────────────────────────────── */
.wcdiag-hook-text {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: .01em;
  line-height: 1.6;
}

.wcdiag-hook-sub {
  font-size: 13px;
  color: #7F8C8D;
  text-align: center;
  margin: 0 0 20px;
  font-style: italic;
}

.wcdiag-echo-text {
  font-size: 14px;
  color: #3EB489;
  font-weight: 600;
  background: #F0FAF6;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  line-height: 1.65;
}

.wcdiag-pause-line {
  width: 40px;
  height: 2px;
  background: #D0E8DC;
  border-radius: 2px;
  margin: 0 auto 24px;
}

/* ── 観察カード（新版）──────────────────────────────────── */
.wcdiag-obs-card {
  background: linear-gradient(135deg, #EFF9F5 0%, #F4FAF7 100%);
  border: 1.5px solid #B8E6D4;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
}

.wcdiag-obs-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(62,180,137,.12);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.wcdiag-obs-text {
  font-size: 14px;
  color: #1A5C3A;
  line-height: 1.75;
  margin: 0 0 10px;
  font-weight: 500;
}

.wcdiag-obs-foot {
  font-size: 12px;
  color: #5A9A7A;
  margin: 0;
  font-style: italic;
}

/* ── 緊急リアクション ─────────────────────────────────────── */
.wcdiag-urgent-reaction {
  background: #FFF3E0;
  border-left: 3px solid #FF9800;
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  margin: 12px 0 0;
  font-size: 14px;
  color: #E65100;
  font-weight: 600;
  line-height: 1.6;
  animation: wcdiag-reaction-in .25s ease-out;
}

/* ── Thinking Card 1 ─────────────────────────────────────── */
.wcdiag-thinking-card {
  padding: 56px 28px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.wcdiag-tc-body {
  margin-bottom: 36px;
}

.wcdiag-tc-body p {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0;
  line-height: 2.2;
}

.wcdiag-tc-btn {
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .15s ease;
}

.wcdiag-tc-btn:hover { transform: translateY(-2px); }

/* ── 仮説転換カード ───────────────────────────────────────── */
.wcdiag-hypothesis-change {
  padding: 56px 28px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.wcdiag-hc-wait {
  font-size: 28px;
  font-weight: 800;
  color: #E67E22;
  margin: 0;
  letter-spacing: .02em;
}

.wcdiag-hc-change {
  font-size: 18px;
  font-weight: 700;
  color: #2C3E50;
  margin: 16px 0 0;
  line-height: 1.7;
}

.wcdiag-hc-next {
  font-size: 14px;
  color: #7F8C8D;
  margin: 8px 0 0;
}

.wcdiag-hc-btn {
  margin-top: 36px;
  background: #2C3E50;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .15s ease;
}

.wcdiag-hc-btn:hover { transform: translateY(-2px); }

/* ── ローディングシネマ ───────────────────────────────────── */
.wcdiag-loading-cinema {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 24px;
  text-align: center;
  gap: 0;
}

.wcdiag-lc-name {
  font-size: 28px;
  font-weight: 800;
  color: #2C3E50;
  margin: 0;
  letter-spacing: .02em;
}

.wcdiag-lc-done {
  font-size: 20px;
  font-weight: 700;
  color: #3EB489;
  margin: 20px 0 0;
  letter-spacing: .04em;
}

/* ============================================================
   結果ページ v4.0（Cinematic）
   ============================================================ */

/* ── S1. 安堵 ────────────────────────────────────────────── */
.wcr-relief {
  padding: 56px 24px 48px;
  text-align: center;
}

.wcr-relief-name {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0;
  letter-spacing: .01em;
}

.wcr-relief-message {
  font-size: 28px;
  font-weight: 800;
  color: #3EB489;
  margin: 10px 0 0;
  letter-spacing: .02em;
}

/* ── S2. 眼科警告 ────────────────────────────────────────── */
.wcr-eye-warn {
  background: #FFF8F0;
  border: 1.5px solid #FFCC80;
  border-radius: 14px;
  padding: 20px 20px 18px;
  margin: 0 0 28px;
  text-align: center;
}

.wcr-ew-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.wcr-ew-title {
  font-size: 16px;
  font-weight: 700;
  color: #E65100;
  margin: 0 0 10px;
}

.wcr-ew-body {
  font-size: 14px;
  color: #5D4037;
  line-height: 1.75;
  margin: 0;
}

/* ── S3. 診断ストーリー ───────────────────────────────────── */
.wcr-story {
  margin: 0 0 32px;
  padding: 0 4px;
}

.wcr-story-text {
  font-size: 15px;
  color: #3C4F5E;
  line-height: 2;
  margin: 0;
  font-weight: 500;
}

/* ── S4. 主要アクション ───────────────────────────────────── */
.wcr-primary-action {
  background: #F7FDFA;
  border-left: 4px solid #3EB489;
  border-radius: 0 14px 14px 0;
  padding: 22px 20px;
  margin: 0 0 20px;
}

.wcr-pa-label {
  font-size: 10px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.wcr-pa-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.wcr-pa-text {
  font-size: 18px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0;
  line-height: 1.55;
}

/* ── S5. なぜこのアクションか ────────────────────────────── */
.wcr-why-action {
  background: #FAFAFA;
  border-radius: 12px;
  padding: 18px 18px;
  margin: 0 0 24px;
}

.wcr-why-label {
  font-size: 11px;
  font-weight: 700;
  color: #95A5A6;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.wcr-why-text {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.8;
  margin: 0;
}

/* ── S6. 期待される変化 ───────────────────────────────────── */
.wcr-expected-changes {
  margin: 0 0 28px;
}

.wcr-ec-label {
  font-size: 12px;
  font-weight: 700;
  color: #5A7A6A;
  letter-spacing: .06em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.wcr-ec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcr-ec-item {
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.6;
  padding: 10px 14px 10px 36px;
  background: #F0FAF6;
  border-radius: 10px;
  position: relative;
  font-weight: 500;
}

.wcr-ec-item::before {
  content: '✓';
  position: absolute;
  left: 14px;
  color: #3EB489;
  font-weight: 700;
}

/* ── S7. 今日やること ─────────────────────────────────────── */
.wcr-today-action {
  background: linear-gradient(135deg, #F3FBF7 0%, #EBF9F2 100%);
  border: 1.5px solid #C8E6D8;
  border-radius: 14px;
  padding: 22px 20px;
  margin: 0 0 28px;
  text-align: center;
}

.wcr-ta-label {
  font-size: 11px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.wcr-ta-text {
  font-size: 16px;
  font-weight: 700;
  color: #1D6B47;
  margin: 0;
  line-height: 1.65;
}

/* ── S8. 再診断 ───────────────────────────────────────────── */
.wcr-rediag {
  text-align: center;
  margin: 0 0 32px;
  padding: 20px 16px;
}

.wcr-rediag-text {
  font-size: 15px;
  color: #5A7A6A;
  margin: 0 0 12px;
  font-weight: 500;
}

.wcr-rediag-link {
  display: inline-block;
  color: #3EB489;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid #3EB489;
  padding-bottom: 2px;
  letter-spacing: .04em;
}

/* ── S9. 詳しく見るアコーディオン ────────────────────────── */
.wcr-details-accordion {
  margin: 0 0 32px;
  border: 1.5px solid #E0EDEA;
  border-radius: 14px;
  overflow: hidden;
}

.wcr-details-toggle {
  width: 100%;
  background: #F8FBF9;
  border: none;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #5A7A6A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .03em;
}

.wcr-details-arrow {
  font-size: 12px;
  color: #95A5A6;
  transition: transform .25s ease;
}

.wcr-details-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wcr-details-body[hidden] {
  display: none;
}

.wcr-details-section {
  border-top: 1px solid #EEF3F1;
  padding-top: 18px;
}

.wcr-details-section:first-child {
  border-top: none;
  padding-top: 0;
}

.wcr-details-heading {
  font-size: 12px;
  font-weight: 700;
  color: #95A5A6;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.wcr-articles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcr-article-link {
  display: block;
  font-size: 14px;
  color: #3EB489;
  text-decoration: none;
  padding: 10px 14px;
  background: #F0FAF6;
  border-radius: 8px;
  font-weight: 600;
}

.wcr-article-link:hover {
  background: #E0F5EC;
}

/* ── S10. クロージング v2 ────────────────────────────────── */
.wcr-closing-v2 {
  padding: 48px 24px 40px;
  text-align: center;
}

.wcr-closing-message {
  font-size: 20px;
  font-weight: 700;
  color: #3EB489;
  margin: 0;
  line-height: 1.75;
  letter-spacing: .02em;
}

/* ============================================================
   v4.1 — 結果ページ修正・追加スタイル
   ============================================================ */

/* ── ローディングスピナー ─────────────────────────────────── */
.wcdiag-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 48px 24px;
  text-align: center;
  gap: 20px;
}

.wcdiag-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E0EDEA;
  border-top-color: #3EB489;
  border-radius: 50%;
  animation: wcdiag-spin 0.8s linear infinite;
}

@keyframes wcdiag-spin {
  to { transform: rotate(360deg); }
}

.wcdiag-loading-text {
  font-size: 15px;
  color: #5A7A6A;
  margin: 0;
  font-weight: 500;
}

/* ── 共通セクション ───────────────────────────────────────── */
.wcr-section {
  margin: 0 0 32px;
}

.wcr-section-heading {
  font-size: 16px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #EEF3F1;
}

/* ── S1. ヘッダー ─────────────────────────────────────────── */
.wcr-header {
  padding: 28px 0 24px;
  margin: 0 0 28px;
  border-bottom: 1px solid #E8F0EC;
}

.wcr-header-title {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 8px;
  line-height: 1.4;
}

.wcr-header-subtitle {
  font-size: 13px;
  color: #7F8C8D;
  margin: 0 0 14px;
  line-height: 1.65;
}

.wcr-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FAF6;
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
}

.wcr-header-badge-icon {
  font-size: 16px;
  line-height: 1;
}

.wcr-header-badge-label {
  font-size: 13px;
  font-weight: 600;
}

/* ── S2. 眼科警告 ────────────────────────────────────────── */
.wcr-eye-warn {
  background: #FFF8F0;
  border: 1.5px solid #FFCC80;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 28px;
}

.wcr-ew-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.wcr-ew-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.wcr-ew-title {
  font-size: 14px;
  font-weight: 700;
  color: #E65100;
}

.wcr-ew-body {
  font-size: 13px;
  color: #5D4037;
  line-height: 1.75;
  margin: 0;
}

/* ── S3. 主要原因カード ───────────────────────────────────── */
.wcr-main-cause-card {
  background: #F7FDFA;
  border: 1.5px solid #B8E6D4;
  border-radius: 12px;
  padding: 18px 18px 16px;
}

.wcr-mc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.wcr-mc-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.wcr-mc-name {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}

.wcr-mc-pct {
  font-size: 16px;
  font-weight: 700;
  color: #1D6B47;
  flex-shrink: 0;
}

.wcr-mc-bar-wrap {
  background: #D0E8DC;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin: 0 0 12px;
}

.wcr-mc-bar {
  height: 100%;
  border-radius: 4px;
}

.wcr-mc-desc {
  font-size: 13px;
  color: #4A6A58;
  line-height: 1.75;
  margin: 0;
}

/* ── S4. 根拠テキスト ─────────────────────────────────────── */
.wcr-reasoning-text {
  font-size: 14px;
  color: #3C4F5E;
  line-height: 1.9;
  margin: 0;
}

/* ── S5. 回答から見えたサイン（flex構造、重なりなし）──────── */
.wcr-sign-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcr-sign-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: #F6FAF8;
  border-radius: 8px;
}

.wcr-sign-check {
  flex-shrink: 0;
  color: #3EB489;
  font-weight: 700;
  font-size: 14px;
  margin-top: 1px;
  width: 16px;
  text-align: center;
}

.wcr-sign-text {
  flex: 1;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.6;
}

/* ── S6. ケアアクション ───────────────────────────────────── */
.wcr-care-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-care-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #E0EDEA;
  border-radius: 10px;
}

.wcr-care-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  width: 24px;
  text-align: center;
}

.wcr-care-body {
  flex: 1;
}

.wcr-care-name {
  font-size: 14px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 4px;
}

.wcr-care-detail {
  font-size: 13px;
  color: #6B7F8C;
  line-height: 1.65;
  margin: 0;
}

/* ── S7. タイムライン ─────────────────────────────────────── */
.wcr-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wcr-timeline-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.wcr-timeline-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  padding-top: 3px;
}

.wcr-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3EB489;
  flex-shrink: 0;
}

.wcr-timeline-line {
  width: 2px;
  height: 28px;
  background: #D0E8DC;
  margin: 4px 0;
}

.wcr-timeline-content {
  flex: 1;
  padding-bottom: 20px;
}

.wcr-timeline-item:last-child .wcr-timeline-content {
  padding-bottom: 0;
}

.wcr-timeline-period {
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .06em;
  margin: 0 0 4px;
}

.wcr-timeline-text {
  font-size: 14px;
  color: #3C4F5E;
  line-height: 1.65;
  margin: 0;
}

/* ── S8. 注意サイン ───────────────────────────────────────── */
.wcr-caution-section {
  background: #FFF8F0;
  border: 1.5px solid #FFCC80;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 32px;
}

.wcr-caution-heading {
  font-size: 13px;
  font-weight: 700;
  color: #E65100;
  margin: 0 0 12px;
}

.wcr-caution-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcr-caution-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.wcr-caution-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FF9800;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.wcr-caution-text {
  flex: 1;
  font-size: 13px;
  color: #5D4037;
  line-height: 1.6;
}

.wcr-caution-note {
  font-size: 12px;
  color: #8D6E63;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #FFE0B2;
}

/* ── S9. 原因内訳（横長カード）──────────────────────────── */
.wcr-rank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wcr-rank-card {
  background: #fff;
  border: 1.5px solid #E0EDEA;
  border-radius: 12px;
  padding: 16px 16px 14px;
}

.wcr-rank-card--top {
  border-color: #B8E6D4;
  background: #F7FDFA;
}

.wcr-rank-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.wcr-rank-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #BDC3C7;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wcr-rank-card--top .wcr-rank-num {
  background: #3EB489;
}

.wcr-rank-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.wcr-rank-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #2C3E50;
}

.wcr-rank-pct {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.wcr-rank-desc {
  font-size: 13px;
  color: #5A6B7A;
  line-height: 1.65;
  margin: 0 0 10px;
}

.wcr-rank-bar-wrap {
  background: #EEF3F1;
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}

.wcr-rank-bar {
  height: 100%;
  border-radius: 4px;
  min-width: 4px;
}

/* ── S10. 関連記事・次の診断 ─────────────────────────────── */
.wcr-next-block {
  margin: 0 0 20px;
}

.wcr-next-block-heading {
  font-size: 13px;
  font-weight: 700;
  color: #7F8C8D;
  letter-spacing: .06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.wcr-articles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcr-article-link {
  display: block;
  font-size: 14px;
  color: #2C6E5A;
  text-decoration: none;
  padding: 10px 14px;
  background: #F0FAF6;
  border-radius: 8px;
  font-weight: 500;
  border-left: 3px solid #3EB489;
}

.wcr-article-link:hover { background: #E0F5EC; }

.wcr-next-diag-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #E0EDEA;
  border-radius: 10px;
}

.wcr-next-diag-left { flex: 1; }

.wcr-next-diag-name {
  font-size: 14px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcr-next-diag-rec {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #3EB489;
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: .04em;
}

.wcr-next-diag-desc {
  font-size: 12px;
  color: #7F8C8D;
  line-height: 1.5;
}

.wcr-next-diag-btn {
  flex-shrink: 0;
  background: #3EB489;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.wcr-next-diag-badge {
  flex-shrink: 0;
  font-size: 11px;
  color: #95A5A6;
  background: #F4F6F7;
  border-radius: 10px;
  padding: 4px 10px;
}

.wcr-rediag-suggest {
  text-align: center;
  padding: 20px 0 8px;
}

.wcr-rediag-text {
  font-size: 13px;
  color: #7F8C8D;
  margin: 0 0 10px;
  line-height: 1.65;
}

.wcr-rediag-link {
  display: inline-block;
  color: #3EB489;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid #3EB489;
  padding-bottom: 2px;
}

.wcr-hub-link {
  text-align: center;
  margin-top: 16px;
}

.wcr-hub-link a {
  font-size: 13px;
  color: #95A5A6;
  text-decoration: none;
}

/* ── 詳しく見るアコーディオン ─────────────────────────────── */
.wcr-details-accordion {
  margin: 0 0 24px;
  border: 1.5px solid #E0EDEA;
  border-radius: 12px;
  overflow: hidden;
}

.wcr-details-toggle {
  width: 100%;
  background: #F8FBF9;
  border: none;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #7F8C8D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .03em;
}

.wcr-details-arrow {
  font-size: 11px;
  color: #BDC3C7;
}

.wcr-details-body {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wcr-details-body[hidden] { display: none; }

.wcr-details-section + .wcr-details-section {
  border-top: 1px solid #EEF3F1;
  padding-top: 16px;
}

.wcr-details-heading {
  font-size: 12px;
  font-weight: 700;
  color: #95A5A6;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.wcr-conf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
}

.wcr-conf-bar-wrap {
  flex: 1;
  background: #EEF3F1;
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}

.wcr-conf-bar {
  height: 100%;
  background: #3EB489;
  border-radius: 4px;
}

.wcr-conf-pct {
  font-size: 14px;
  font-weight: 700;
  color: #3EB489;
  flex-shrink: 0;
}

.wcr-conf-desc {
  font-size: 13px;
  color: #5A7A6A;
  margin: 0;
  line-height: 1.6;
}

.wcr-cmp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.wcr-cmp-val {
  font-size: 16px;
  font-weight: 700;
  color: #2C3E50;
}

.wcr-cmp-val--now {
  color: #3EB489;
}

.wcr-cmp-arrow {
  font-size: 12px;
  color: #7F8C8D;
}

.wcr-cmp-natural {
  font-size: 13px;
  color: #5A7A6A;
  margin: 0;
  line-height: 1.65;
}

/* ── リトライボタン ───────────────────────────────────────── */
.wcr-retry-wrap {
  text-align: center;
  padding: 8px 0 32px;
}

.wcr-retry-btn {
  background: none;
  border: 1.5px solid #BDC3C7;
  border-radius: 20px;
  padding: 10px 28px;
  font-size: 13px;
  color: #7F8C8D;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
}

.wcr-retry-btn:hover {
  border-color: #95A5A6;
  color: #5A6A7A;
}

/* ============================================================
   v4.2 追加スタイル
   ============================================================ */

/* ── SVGアイコン共通 ─────────────────────────────────────── */
.wcr-mc-icon svg,
.wcr-rank-icon svg,
.wcr-ew-icon svg,
.wcr-header-badge-icon svg,
.wcr-tie-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wcr-mc-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.wcr-rank-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wcr-ew-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wcr-header-badge-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
}

/* ── 同率バッジ（ヘッダー） ──────────────────────────────── */
.wcr-header-badge--tie {
  background: #F3F0F9;
  gap: 4px;
}

.wcr-header-badge--tie .wcr-header-badge-icon {
  color: #8B7BA8;
}

.wcr-header-badge--tie .wcr-header-badge-label {
  color: #5A4A7A;
}

/* ── S3. 同率原因カード ──────────────────────────────────── */
.wcr-tie-causes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wcr-tie-card {
  background: #F7FDFA;
  border: 1.5px solid #D0E8DC;
  border-radius: 12px;
  padding: 16px 18px;
}

.wcr-tie-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.wcr-tie-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #B8DAC9;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wcr-tie-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.wcr-tie-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.wcr-tie-pct {
  font-size: 15px;
  font-weight: 700;
  color: #1D6B47;
  flex-shrink: 0;
}

.wcr-tie-desc {
  font-size: 13px;
  color: #4A6B5A;
  line-height: 1.7;
  margin: 10px 0 0;
}

/* ── S4. 判断に迷うポイント ─────────────────────────────── */
.wcr-ambiguity-note {
  background: #FFF9E6;
  border: 1.5px solid #FFD54F;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 28px;
}

.wcr-ambiguity-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #BF8500;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.wcr-ambiguity-message {
  font-size: 14px;
  font-weight: 600;
  color: #4A3A00;
  margin: 0 0 6px;
  line-height: 1.6;
}

.wcr-ambiguity-detail {
  font-size: 13px;
  color: #6A5500;
  line-height: 1.7;
  margin: 0;
}

/* ── S5. 確信度低CTA ─────────────────────────────────────── */
.wcr-conf-cta {
  background: #F5F5F5;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 28px;
}

.wcr-conf-cta-head {
  margin: 0 0 12px;
}

.wcr-conf-cta-title {
  font-size: 14px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 4px;
}

.wcr-conf-cta-sub {
  font-size: 13px;
  color: #7F8C8D;
  line-height: 1.6;
}

.wcr-cta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcr-cta-item {
  font-size: 13px;
  color: #3A5068;
  padding: 6px 10px;
  background: #fff;
  border-radius: 6px;
  line-height: 1.6;
  border-left: 3px solid #8ECAB0;
}

.wcr-cta-note {
  font-size: 12px;
  color: #95A5A6;
  margin: 0;
  line-height: 1.6;
}

/* ── S8. 次の一手 ────────────────────────────────────────── */
.wcr-next-steps-section {
  background: linear-gradient(135deg, #F7FDFA 0%, #EDF7F2 100%);
  border-radius: 12px;
  padding: 20px 18px;
  margin: 0 0 12px;
}

.wcr-next-steps-section .wcr-section-heading {
  color: #1D6B47;
}

.wcr-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.wcr-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3EB489;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.wcr-step-text {
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.65;
  flex: 1;
}

/* ── S9. ケアアイテム（アイコンなし版） ─────────────────── */
.wcr-care-item {
  padding: 12px 14px;
  background: #F7FDFA;
  border: 1.5px solid #D0E8DC;
  border-left-width: 3px;
  border-left-color: #3EB489;
  border-radius: 8px;
}

.wcr-care-name {
  font-size: 14px;
  font-weight: 700;
  color: #1D6B47;
  margin: 0 0 4px;
}

.wcr-care-detail {
  font-size: 13px;
  color: #4A6B5A;
  line-height: 1.7;
  margin: 0;
}

/* ── S12. ランキングカード内の理由 ──────────────────────── */
.wcr-rank-reason {
  font-size: 12px;
  color: #8A9BAA;
  line-height: 1.65;
  margin: 6px 0 0;
  padding: 6px 10px;
  background: #F5F7FA;
  border-radius: 4px;
  font-style: italic;
}

/* ── 前回比較: 自然言語テキストを先頭に ─────────────────── */
.wcr-cmp-natural {
  margin: 0 0 8px;
}

.wcr-cmp-row {
  font-size: 12px;
  color: #95A5A6;
}

.wcr-cmp-val {
  font-size: 13px;
  font-weight: 600;
  color: #7F8C8D;
}

.wcr-cmp-val--now {
  color: #3EB489;
}

.wcr-cmp-arrow {
  font-size: 12px;
  color: #95A5A6;
}

/* ============================================================
   v4.3 追加スタイル
   ============================================================ */

/* ── S4. 追加確認CTA ─────────────────────────────────────── */
.wcr-extra-cta {
  background: linear-gradient(135deg, #EAF4FF 0%, #E8F5F0 100%);
  border: 1.5px solid #B8D8F0;
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin: 0 0 28px;
}

.wcr-extra-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A4A7A;
  margin: 0 0 8px;
}

.wcr-extra-cta-desc {
  font-size: 13px;
  color: #2C4E6A;
  line-height: 1.75;
  margin: 0 0 14px;
}

.wcr-extra-btn {
  display: inline-block;
  background: #2A7EC8;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s;
}

.wcr-extra-btn:hover { background: #1A6AB0; }

/* ── 追加質問パネル ──────────────────────────────────────── */
.wcr-extra-panel {
  margin-top: 16px;
}

.wcr-extra-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wcr-extra-panel-note {
  font-size: 12px;
  color: #7F8C8D;
  margin: 0;
  text-align: center;
}

.wcr-extra-question {
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  border: 1.5px solid #D0E8DC;
}

.wcr-extra-q-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2A7EC8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.wcr-extra-q-body { flex: 1; }

.wcr-extra-q-text {
  font-size: 14px;
  font-weight: 600;
  color: #2C3E50;
  margin: 0 0 10px;
  line-height: 1.6;
}

.wcr-extra-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcr-extra-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #E0EDEA;
  background: #F7FDFA;
  transition: border-color .12s, background .12s;
}

.wcr-extra-option:hover {
  border-color: #3EB489;
  background: #EDF9F3;
}

.wcr-extra-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #3EB489;
  flex-shrink: 0;
}

.wcr-extra-option:has(input:checked) {
  border-color: #3EB489;
  background: #E0F5EC;
}

.wcr-extra-option-label {
  font-size: 13px;
  color: #2C3E50;
  line-height: 1.5;
}

.wcr-extra-submit {
  display: block;
  width: 100%;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s, opacity .15s;
}

.wcr-extra-submit:disabled {
  background: #BDC3C7;
  cursor: default;
  opacity: .7;
}

.wcr-extra-submit:not(:disabled):hover { background: #2E9A72; }

/* ── 追加確認済みバッジ ──────────────────────────────────── */
.wcr-header-badge--extra {
  background: #EDF9F3;
  border: 1.5px solid #A8DEC5;
}

.wcr-header-badge--extra .wcr-header-badge-label {
  color: #1D6B47;
}

/* ── アコーディオンのラベル変更に伴う幅調整 ─────────────── */
.wcr-details-toggle {
  font-size: 13px;
}

/* ── obsカード フッター削除後の余白調整 ─────────────────── */
.wcdiag-obs-card {
  padding-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════
   v4.4: 追加確認後セクション
   ═══════════════════════════════════════════════════════════ */

/* ── ラッパー ──────────────────────────────────────────────── */
.wcr-extra-result {
  margin: 0 0 8px;
}

/* ── 確認済みバナー ─────────────────────────────────────────── */
.wcr-extra-confirmed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EDF9F3;
  border: 1.5px solid #A8DEC5;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.wcr-extra-confirmed-badge {
  flex-shrink: 0;
  background: #27AE60;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .3px;
}

.wcr-extra-confirmed-text {
  color: #1D6B47;
  font-size: 13px;
  line-height: 1.5;
}

/* ── 追加確認で分かったこと ─────────────────────────────────── */
.wcr-extra-sign-list {
  list-style: none;
  margin: 12px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcr-extra-sign-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.5;
}

.wcr-extra-sign-check {
  flex-shrink: 0;
  color: #27AE60;
  font-weight: 700;
  margin-top: 1px;
}

.wcr-extra-conclusion {
  font-size: 14px;
  color: #444;
  background: #F5F7FA;
  border-left: 3px solid #27AE60;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: 12px;
  line-height: 1.6;
}

/* ── 結果の変化（ビフォーアフター） ────────────────────────── */
.wcr-before-after {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.wcr-ba-before,
.wcr-ba-after {
  background: #F9FAFB;
  border: 1.5px solid #DDE3EA;
  border-radius: 10px;
  padding: 14px 16px;
}

.wcr-ba-after {
  border-color: #A8DEC5;
  background: #EDF9F3;
}

.wcr-ba-divider {
  text-align: center;
  font-size: 18px;
  color: #95A5A6;
  padding: 6px 0;
  line-height: 1;
}

.wcr-ba-label {
  font-size: 11px;
  font-weight: 700;
  color: #7F8C8D;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.wcr-ba-label--after {
  color: #1D6B47;
}

.wcr-ba-text {
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.6;
  margin: 0;
}

/* ── 次に優先すること ─────────────────────────────────────── */
.wcr-priority-note {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 14px;
}

/* まだ競合中（split表示） */
.wcr-priority-split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-priority-item {
  background: #F9FAFB;
  border: 1.5px solid #DDE3EA;
  border-radius: 10px;
  padding: 14px 16px;
}

.wcr-priority-item--first {
  border-color: #F4B942;
  background: #FFFBF0;
}

.wcr-priority-item-tag {
  font-size: 11px;
  font-weight: 700;
  color: #7F8C8D;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.wcr-priority-item--first .wcr-priority-item-tag {
  color: #9A6A00;
}

.wcr-priority-item-cause {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.wcr-priority-item-step {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* 絞り込まれた場合（resolved表示） */
.wcr-priority-resolved {
  background: #EDF9F3;
  border: 1.5px solid #A8DEC5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.wcr-priority-resolved-label {
  font-size: 11px;
  font-weight: 700;
  color: #1D6B47;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.wcr-priority-resolved-cause {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.wcr-priority-resolved-reason {
  font-size: 13px;
  color: #3A5F4B;
  line-height: 1.5;
  margin: 0;
}

.wcr-priority-step1-box {
  background: #F5F7FA;
  border-left: 3px solid #3EB489;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
}

.wcr-priority-step1-label {
  font-size: 11px;
  font-weight: 700;
  color: #27AE60;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.wcr-priority-step1-text {
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   v4.5: 納得感UI
   ═══════════════════════════════════════════════════════════ */

/* ── 星評価（主因カード・タイカード・ランクカード） ───────── */
.wcr-mc-stars,
.wcr-tie-stars,
.wcr-rank-stars {
  font-size: 15px;
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-left: auto;
}

.wcr-mc-stars {
  font-size: 18px;
}

/* ── 根拠サイン（"今回そう考えた理由"） ────────────────── */
.wcr-sign-conclusion {
  font-size: 14px;
  color: #1D6B47;
  background: #EDF9F3;
  border-left: 3px solid #27AE60;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: 12px;
  line-height: 1.6;
}

/* ── 今日やること ──────────────────────────────────────── */
.wcr-today-section {
  background: #FFFBF0;
  border: 1.5px solid #F4B942;
  border-radius: 14px;
  padding: 18px 18px 14px;
}

.wcr-today-section .wcr-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcr-today-badge {
  font-size: 11px;
  font-weight: 700;
  background: #F4B942;
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
}

.wcr-today-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-today-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #2C3E50;
  line-height: 1.5;
}

.wcr-today-check {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: #9A6A00;
  margin-top: -1px;
}

/* ── 原因ランキングカード拡張 ───────────────────────────── */
.wcr-rank-signs-row {
  margin: 10px 0 6px;
}

.wcr-rank-signs-label {
  font-size: 11px;
  font-weight: 700;
  color: #7F8C8D;
  letter-spacing: .3px;
  display: block;
  margin-bottom: 6px;
}

.wcr-rank-signs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wcr-rank-sign-chip {
  font-size: 12px;
  color: #2C3E50;
  background: #F5F7FA;
  border: 1px solid #DDE3EA;
  border-radius: 20px;
  padding: 3px 10px;
  line-height: 1.4;
}

.wcr-rank-card--top .wcr-rank-sign-chip {
  background: #EDF9F3;
  border-color: #A8DEC5;
}

.wcr-rank-exclude {
  margin-top: 10px;
  border-top: 1px solid #F0F0F0;
  padding-top: 10px;
}

.wcr-rank-exclude-label {
  font-size: 11px;
  font-weight: 700;
  color: #95A5A6;
  letter-spacing: .3px;
  display: block;
  margin-bottom: 4px;
}

.wcr-rank-exclude-text {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  margin: 0;
}

/* ── 経過観察タイムライン（4ステップ） ──────────────────── */
.wcr-timeline-dot--today {
  background: #27AE60 !important;
  border-color: #27AE60 !important;
}

.wcr-timeline-dot--last {
  background: #3EB489 !important;
  border-color: #3EB489 !important;
}

.wcr-timeline-period--today {
  color: #27AE60;
  font-weight: 700;
}

/* ── 今回確認した内容 ──────────────────────────────────── */
.wcr-considered-list {
  list-style: none;
  margin: 12px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 440px) {
  .wcr-considered-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wcr-considered-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F5F7FA;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #2C3E50;
}

.wcr-considered-check {
  color: #27AE60;
  font-weight: 700;
  flex-shrink: 0;
}

.wcr-considered-conclusion {
  font-size: 14px;
  color: #1D6B47;
  background: #EDF9F3;
  border-left: 3px solid #27AE60;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: 8px;
  line-height: 1.6;
}

/* ── 再診断の案内 ──────────────────────────────────────── */
.wcr-result-caveat {
  background: #F9FAFB;
  border: 1.5px solid #DDE3EA;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.wcr-caveat-text {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin: 0 0 8px;
}

.wcr-caveat-sub {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 8px;
}

.wcr-caveat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wcr-caveat-list li {
  font-size: 13px;
  color: #555;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.wcr-caveat-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #95A5A6;
}

/* ═══════════════════════════════════════════════════════════
   健康カルテ (v1.0)  — wk-* 名前空間
   ═══════════════════════════════════════════════════════════ */

/* ── ベース ────────────────────────────────────────────────── */
#wancare-health-karte {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  color: #1A1A2E;
  -webkit-font-smoothing: antialiased;
}

.wk-section {
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin: 12px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
}

.wk-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: #8E8E93;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ── Hero ──────────────────────────────────────────────────── */
.wk-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 20px 18px;
  margin: 12px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
}

/* v1.1: プロフィール行 */
.wk-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A8DEC5 0%, #3EB489 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.wk-hero-profile {
  flex: 1;
  min-width: 0;
}

.wk-hero-name {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0 0 2px;
  line-height: 1.2;
}

.wk-hero-breed {
  font-size: 12px;
  color: #6C6C80;
}

.wk-hero-edit-btn {
  background: none;
  border: none;
  color: #C7C7CC;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.wk-hero-edit-btn:hover { color: #3EB489; }

/* v1.1: 今日の状態 */
.wk-hero-today {
  background: #F0FAF5;
  border-radius: 12px;
  padding: 14px 16px;
}

.wk-hero-today-label {
  font-size: 10px;
  font-weight: 700;
  color: #3EB489;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.wk-hero-today-status {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A2E;
  line-height: 1.3;
}

.wk-hero-today-since {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 2px;
}

.wk-hero-today-action {
  font-size: 13px;
  color: #3C3C43;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

.wk-hero-today-check {
  color: #3EB489;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 健康サマリー グリッド ──────────────────────────────────── */
.wk-sum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 400px) {
  .wk-sum-grid { grid-template-columns: repeat(2, 1fr); }
}

.wk-sum-card {
  background: #F9F9FB;
  border: 1.5px solid #EBEBF0;
  border-radius: 14px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 90px;
}

.wk-sum-card--dim { opacity: .55; }

.wk-sum-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wk-sum-icon { font-size: 18px; line-height: 1; }

.wk-sum-label {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
}

.wk-sum-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.wk-sum-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
}

.wk-sum-date {
  font-size: 10px;
  color: #AEAEB2;
}

.wk-sum-cta {
  font-size: 11px;
  color: #3EB489;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #3EB489;
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 2px;
}

.wk-sum-coming {
  font-size: 10px;
  color: #AEAEB2;
}

/* ── 最新診断 ──────────────────────────────────────────────── */
.wk-latest-card {
  background: #F9F9FB;
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wk-latest-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wk-latest-type {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
}

.wk-latest-date {
  font-size: 12px;
  color: #8E8E93;
  margin-left: auto;
}

.wk-latest-badge {
  font-size: 11px;
  font-weight: 700;
  background: #27AE60;
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
}

.wk-latest-cause {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-latest-cause-label {
  font-size: 11px;
  color: #8E8E93;
  flex-shrink: 0;
}

.wk-latest-cause-val {
  font-size: 15px;
  font-weight: 700;
  color: #3EB489;
}

.wk-latest-tasks-label {
  font-size: 12px;
  font-weight: 700;
  color: #6C6C80;
  margin-bottom: 8px;
}

.wk-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #3C3C43;
  line-height: 1.5;
}

.wk-task-check {
  flex-shrink: 0;
  font-size: 16px;
  color: #C7C7CC;
  margin-top: -1px;
}

.wk-latest-followup {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #EBEBF0;
  padding-top: 10px;
}

.wk-latest-followup-label {
  font-size: 11px;
  color: #8E8E93;
}

.wk-latest-followup-date {
  font-size: 13px;
  font-weight: 600;
  color: #3C3C43;
  margin-left: auto;
}

/* ── タイムライン ──────────────────────────────────────────── */
.wk-tl-list {
  display: flex;
  flex-direction: column;
}

.wk-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wk-tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
}

.wk-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3EB489;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #3EB489;
  flex-shrink: 0;
  margin-top: 3px;
}

.wk-tl-line {
  width: 2px;
  background: #E5E5EA;
  flex: 1;
  min-height: 24px;
  margin: 4px 0;
}

.wk-tl-body {
  padding-bottom: 18px;
  flex: 1;
  min-width: 0;
}

.wk-tl-item--last .wk-tl-body { padding-bottom: 0; }

.wk-tl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wk-tl-icon { font-size: 14px; }

.wk-tl-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  flex: 1;
}

.wk-tl-date {
  font-size: 12px;
  color: #AEAEB2;
  flex-shrink: 0;
}

.wk-tl-summary {
  font-size: 13px;
  color: #6C6C80;
  margin: 4px 0 0;
  line-height: 1.5;
}

.wk-tl-badge {
  font-size: 11px;
  font-weight: 700;
  background: #EDF9F3;
  color: #27AE60;
  border: 1px solid #A8DEC5;
  border-radius: 20px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 6px;
}

.wk-tl-more-btn {
  width: 100%;
  margin-top: 10px;
  background: none;
  border: 1.5px solid #EBEBF0;
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  color: #3EB489;
  cursor: pointer;
  font-weight: 600;
}
.wk-tl-more-btn:hover { background: #F9F9FB; }

/* ── 写真比較 ──────────────────────────────────────────────── */
.wk-photo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-photo-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.wk-photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #F2F2F7;
  border: 2px dashed #C7C7CC;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wk-photo-placeholder-icon { font-size: 28px; }

.wk-photo-placeholder-text {
  font-size: 12px;
  color: #8E8E93;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.wk-photo-add-btn {
  font-size: 12px;
  color: #C7C7CC;
  background: none;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: not-allowed;
}

.wk-photo-arrow {
  font-size: 20px;
  color: #C7C7CC;
  flex-shrink: 0;
}

.wk-photo-note {
  font-size: 12px;
  color: #AEAEB2;
  text-align: center;
  margin: 10px 0 0;
}

/* ── 継続中のケア ───────────────────────────────────────────── */
.wk-care-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wk-care-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F9F9FB;
  border-radius: 12px;
  border: 1.5px solid #EBEBF0;
}

.wk-care-item--done { opacity: .5; }

.wk-care-check-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.wk-care-check {
  width: 20px;
  height: 20px;
  accent-color: #27AE60;
  cursor: pointer;
  flex-shrink: 0;
}

.wk-care-label {
  font-size: 14px;
  color: #1A1A2E;
  cursor: pointer;
  line-height: 1.4;
}

.wk-care-meta { flex-shrink: 0; }

.wk-care-days {
  font-size: 12px;
  color: #8E8E93;
}

/* ── 次におすすめ ──────────────────────────────────────────── */
.wk-rec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F9F9FB;
  border-radius: 12px;
  border: 1.5px solid #EBEBF0;
}

.wk-rec-icon { font-size: 18px; flex-shrink: 0; }

.wk-rec-link {
  font-size: 14px;
  color: #3EB489;
  text-decoration: none;
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-rec-text {
  font-size: 14px;
  color: #3C3C43;
  flex: 1;
}

.wk-rec-arrow { color: #C7C7CC; }

/* ── 診断履歴 ──────────────────────────────────────────────── */
.wk-hist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hist-card {
  background: #F9F9FB;
  border: 1.5px solid #EBEBF0;
  border-radius: 14px;
  padding: 14px 16px;
}

.wk-hist-card--latest {
  border-color: #A8DEC5;
  background: #EDF9F3;
}

.wk-hist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wk-hist-type {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
}

.wk-hist-date {
  font-size: 12px;
  color: #8E8E93;
}

.wk-hist-cause {
  font-size: 15px;
  font-weight: 700;
  color: #3EB489;
  margin-bottom: 8px;
}

.wk-hist-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wk-hist-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
}

.wk-hist-badge--followup {
  background: #EDF9F3;
  color: #27AE60;
  border-color: #A8DEC5;
}

.wk-hist-badge--latest {
  background: #F0F8FF;
  color: #2980B9;
  border-color: #AED6F1;
}

/* ── セットアップ画面 ──────────────────────────────────────── */
.wk-setup-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.wk-setup-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);
  max-width: 480px;
  width: 100%;
}

.wk-setup-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 12px;
}

.wk-setup-title {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A2E;
  text-align: center;
  margin: 0 0 10px;
}

.wk-setup-desc {
  font-size: 14px;
  color: #6C6C80;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 24px;
}

.wk-setup-form { display: flex; flex-direction: column; gap: 14px; }

.wk-field { display: flex; flex-direction: column; gap: 5px; }

.wk-field-row {
  display: flex;
  gap: 16px;
}

.wk-field-row .wk-field { flex: 1; }

.wk-label {
  font-size: 13px;
  font-weight: 600;
  color: #3C3C43;
  display: flex;
  align-items: center;
  gap: 5px;
}

.wk-req {
  font-size: 10px;
  color: #FF3B30;
  background: #FFF0EF;
  border: 1px solid #FFB3AF;
  border-radius: 4px;
  padding: 1px 5px;
}

.wk-opt {
  font-size: 10px;
  color: #8E8E93;
  background: #F2F2F7;
  border-radius: 4px;
  padding: 1px 5px;
}

.wk-input, .wk-select {
  width: 100%;
  border: 1.5px solid #E5E5EA;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  color: #1A1A2E;
  background: #FAFAFA;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s;
}

.wk-input:focus, .wk-select:focus { border-color: #3EB489; background: #fff; }

.wk-setup-error {
  font-size: 13px;
  color: #FF3B30;
  margin: 0;
}

.wk-setup-btn {
  width: 100%;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s;
}
.wk-setup-btn:hover { background: #2E9A72; }

/* ── 空ステート ─────────────────────────────────────────────── */
.wk-empty-card {
  background: #F9F9FB;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
}

.wk-empty-text {
  font-size: 14px;
  color: #8E8E93;
  margin: 0 0 12px;
  line-height: 1.6;
}

.wk-empty-cta {
  font-size: 14px;
  color: #3EB489;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #3EB489;
  border-radius: 10px;
  padding: 8px 20px;
  display: inline-block;
}

/* ── プロフィール編集モーダル ──────────────────────────────── */
.wk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  padding: 0;
}

@media (min-width: 480px) {
  .wk-modal-overlay { align-items: center; }
}

.wk-modal {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 32px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: wkSlideUp .2s ease;
}

@media (min-width: 480px) {
  .wk-modal { border-radius: 20px; }
}

@keyframes wkSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.wk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.wk-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
}

.wk-modal-close {
  background: #F2F2F7;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  color: #6C6C80;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wk-profile-form { display: flex; flex-direction: column; gap: 14px; }

.wk-modal-save-btn {
  width: 100%;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.wk-modal-save-btn:hover { background: #2E9A72; }

/* ============================================================
   v1.1 追加 CSS — 健康カルテ改善 + 導線
   ============================================================ */

/* ── サマリーカード: 次にやること ───────────────────────── */
.wk-sum-todo-link {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #3EB489;
  text-decoration: none;
  font-weight: 600;
}
.wk-sum-todo-link:hover { text-decoration: underline; }

.wk-sum-todo-text {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #6C6C80;
}

/* ── タイムライン: セクションヘッダー + 追加ボタン ────────── */
.wk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.wk-section-head .wk-section-heading {
  margin-bottom: 0;
}

.wk-tl-add-btn {
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.wk-tl-add-btn:hover { background: #2E9A72; }

.wk-tl-source {
  font-size: 10px;
  color: #AEAEB2;
  background: #F2F2F7;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.wk-tl-empty {
  padding: 16px 0;
  text-align: center;
  color: #8E8E93;
}

/* ── ケア習慣: 今日やった + 7日ドット ─────────────────── */
.wk-care-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wk-care-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  flex: 1;
  line-height: 1.3;
}

.wk-care-today-btn {
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s;
}
.wk-care-today-btn:hover:not(:disabled) { background: #2E9A72; }
.wk-care-today-btn--done {
  background: #E5E5EA;
  color: #6C6C80;
  cursor: default;
}

.wk-care-week {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.wk-care-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E5E5EA;
  flex-shrink: 0;
}

.wk-care-dot--done {
  background: #3EB489;
}

/* ── テキストエリア（イベントモーダル用）─────────────────── */
.wk-textarea {
  border: 1.5px solid #E5E5EA;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1A1A2E;
  background: #FAFAFA;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.wk-textarea:focus {
  outline: none;
  border-color: #3EB489;
  background: #fff;
}

#wk-event-form { display: flex; flex-direction: column; gap: 14px; }

/* ── 導線: 診断結果 → 健康カルテ CTA ──────────────────── */
.wcr-karte-cta {
  background: #F0FAF5;
  border: 1.5px solid #A8DEC5;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 16px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcr-karte-cta-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A5C3A;
  margin: 0 0 3px;
}

.wcr-karte-cta-desc {
  font-size: 13px;
  color: #4C7A62;
  margin: 0;
  line-height: 1.5;
}

.wcr-karte-cta-btn {
  display: inline-block;
  background: #3EB489;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: background .2s;
  align-self: flex-start;
}
.wcr-karte-cta-btn:hover { background: #2E9A72; }

/* ============================================================
   Phase 5.0 — 健康カルテ ホーム画面 全面刷新
   新クラス: wki, wk-root, wk-section-label, wk-hero(v5),
             wk-mission-*, wk-streak-*, wk-photo-today-*,
             wk-changes-*, wk-area-*, wk-tl-group-*,
             wk-rec-card-*, wk-hist-row-*
   ============================================================ */

/* ── ルートコンテナ ─────────────────────────────────────────── */
.wk-root {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 4px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── SVG ラインアイコン ─────────────────────────────────────── */
.wki {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.wki--sm  { width: 13px; height: 13px; }
.wki--xs  { width: 10px; height: 10px; }
.wki--star{ width: 14px; height: 14px; }

/* ── セクションラベル (Notion スタイル) ──────────────────────── */
.wk-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────── */
/* S1. Hero v5.0                                               */
/* ─────────────────────────────────────────────────────────── */
.wk-hero {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px 18px;
  margin: 8px 0 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* プロフィール行 */
.wk-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-hero-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A8DEC5 0%, #3EB489 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.wk-hero-info { flex: 1; min-width: 0; }

.wk-hero-name {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.2;
  margin: 0 0 2px;
}

.wk-hero-breed {
  font-size: 12px;
  color: #999;
}

.wk-hero-edit-btn {
  background: none;
  border: none;
  color: #C0C0C0;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.wk-hero-edit-btn:hover { color: #3EB489; background: #F0FAF5; }

/* 健康状態スター行 */
.wk-hero-status {
  padding-bottom: 14px;
  border-bottom: 1px solid #F0F0F0;
}

.wk-hero-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-stars {
  display: flex;
  gap: 3px;
}

.wk-star { display: flex; align-items: center; }

.wk-star--fill { color: #F5A623; }
.wk-star:not(.wk-star--fill) { color: #DDD; }

.wk-hero-status-label {
  font-size: 14px;
  font-weight: 600;
  color: #3C3C43;
}

/* タスクリスト（Hero内・コンパクト） */
.wk-hero-tasks-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 10px;
}

.wk-hero-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  transition: opacity .15s;
}
.wk-hero-task:hover:not(.wk-hero-task--done) { opacity: .75; }

.wk-hero-task-icon { color: #CCCCCC; display: flex; }
.wk-hero-task--done .wk-hero-task-icon { color: #3EB489; }

.wk-hero-task-label {
  font-size: 14px;
  color: #2C2C2E;
  flex: 1;
  line-height: 1.3;
}
.wk-hero-task--done .wk-hero-task-label {
  color: #AEAEB2;
  text-decoration: line-through;
}

/* プログレスバー */
.wk-hero-progress {
  background: #F8F8FA;
  border-radius: 12px;
  padding: 14px 16px;
}

.wk-hero-progress-bar-wrap {
  height: 6px;
  background: #E5E5EA;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.wk-hero-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: #3EB489;
  transition: width .5s ease;
}

.wk-hero-progress-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-hero-progress-pct {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.wk-hero-progress-msg {
  font-size: 12px;
  color: #8E8E93;
}

/* ─────────────────────────────────────────────────────────── */
/* S2. 今日のミッション                                        */
/* ─────────────────────────────────────────────────────────── */
.wk-mission-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-mission-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #FAFAFA;
  border: 1.5px solid #EBEBEB;
  border-radius: 13px;
  transition: border-color .15s, background .15s;
  cursor: default;
}
.wk-mission-card:hover:not(.wk-mission-card--done) { border-color: #3EB489; }
.wk-mission-card--done {
  background: #F0FAF5;
  border-color: #A8DEC5;
  opacity: .75;
}

.wk-mission-check {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #CCCCCC;
  display: flex;
  flex-shrink: 0;
  transition: color .15s;
}
.wk-mission-card--done .wk-mission-check { color: #3EB489; cursor: default; }
.wk-mission-check:hover:not(:disabled) { color: #3EB489; }

.wk-mission-body { flex: 1; min-width: 0; }

.wk-mission-label {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 4px;
}
.wk-mission-card--done .wk-mission-label {
  color: #AEAEB2;
  text-decoration: line-through;
}

.wk-mission-duration {
  font-size: 12px;
  color: #8E8E93;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─────────────────────────────────────────────────────────── */
/* S3. 継続日数                                               */
/* ─────────────────────────────────────────────────────────── */
.wk-streak-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #EBEBEB;
}

.wk-streak-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AEAEB2;
  flex-shrink: 0;
}
.wk-streak-icon--active {
  background: #FFF3E0;
  color: #E67E22;
}

.wk-streak-body { flex: 1; min-width: 0; }

.wk-streak-count {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: 2px;
}

.wk-streak-msg {
  font-size: 13px;
  font-weight: 600;
  color: #3C3C43;
}

.wk-streak-sub {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 2px;
}

.wk-streak-best {
  font-size: 11px;
  font-weight: 600;
  color: #AEAEB2;
  text-align: right;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────── */
/* S4. 今日の写真                                              */
/* ─────────────────────────────────────────────────────────── */
.wk-photo-today {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #FAFAFA;
  border: 1.5px solid #EBEBEB;
  border-radius: 14px;
}

.wk-photo-today-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #E8F5EE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3EB489;
  flex-shrink: 0;
}

.wk-photo-today-body { flex: 1; }

.wk-photo-today-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 2px;
}

.wk-photo-today-sub {
  font-size: 12px;
  color: #8E8E93;
}

.wk-photo-today-btn {
  background: #E8F5EE;
  color: #3EB489;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: not-allowed;
  flex-shrink: 0;
  opacity: .6;
}

.wk-photo-coming {
  font-size: 11px;
  color: #AEAEB2;
  text-align: center;
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────── */
/* S5. 今日の変化                                              */
/* ─────────────────────────────────────────────────────────── */
.wk-changes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.wk-change-item {
  background: #FAFAFA;
  border: 1.5px solid #EBEBEB;
  border-radius: 12px;
  padding: 14px 14px 12px;
}

.wk-change-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
}

.wk-change-value {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 3px;
}

.wk-change-sub {
  font-size: 11px;
  color: #8E8E93;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────── */
/* S6. 健康エリアカード                                        */
/* ─────────────────────────────────────────────────────────── */
.wk-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .wk-area-grid { grid-template-columns: repeat(3, 1fr); }
}

.wk-area-card {
  background: #fff;
  border: 1.5px solid #EBEBEB;
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.wk-area-card:hover:not(.wk-area-card--dim) {
  border-color: #A8DEC5;
  box-shadow: 0 2px 8px rgba(62,180,137,.1);
}
.wk-area-card--dim { opacity: .55; }

.wk-area-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-area-icon {
  color: #3EB489;
  display: flex;
  flex-shrink: 0;
}
.wk-area-card--dim .wk-area-icon { color: #AEAEB2; }

.wk-area-name {
  font-size: 13px;
  font-weight: 700;
  color: #2C2C2E;
  flex: 1;
  min-width: 0;
}

.wk-area-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.wk-area-badge--green  { background: #E8F5EE; color: #27AE60; }
.wk-area-badge--blue   { background: #EBF5FB; color: #2980B9; }
.wk-area-badge--orange { background: #FEF9E7; color: #E67E22; }
.wk-area-badge--gray   { background: #F2F2F7; color: #6C6C80; }
.wk-area-badge--dim    { background: #F2F2F7; color: #AEAEB2; }

.wk-area-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wk-area-since {
  font-size: 11px;
  color: #8E8E93;
}

.wk-area-next {
  font-size: 11px;
  color: #3EB489;
  font-weight: 600;
}

.wk-area-coming {
  font-size: 11px;
  color: #AEAEB2;
}

.wk-area-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  margin-top: 2px;
}
.wk-area-cta:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────── */
/* S7. タイムライン v5.0 (日付グループ型フィード)              */
/* ─────────────────────────────────────────────────────────── */
.wk-tl-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-tl-group {
  display: flex;
  flex-direction: column;
}

.wk-tl-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 8px;
}

.wk-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F5F5F5;
}
.wk-tl-item:last-child { border-bottom: none; }

.wk-tl-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C6C80;
  flex-shrink: 0;
}

.wk-tl-item-body { flex: 1; min-width: 0; }

.wk-tl-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 2px;
}

.wk-tl-item-sub {
  font-size: 12px;
  color: #8E8E93;
  line-height: 1.4;
}

.wk-tl-item-time {
  font-size: 11px;
  color: #AEAEB2;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─────────────────────────────────────────────────────────── */
/* S8. 次におすすめ v5.0                                       */
/* ─────────────────────────────────────────────────────────── */
.wk-rec-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-rec-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 16px;
  background: #FAFAFA;
  border: 1.5px solid #EBEBEB;
  border-radius: 14px;
  transition: border-color .15s;
}
.wk-rec-card:hover { border-color: #3EB489; }

.wk-rec-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFF9E6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E6A817;
  flex-shrink: 0;
}

.wk-rec-card-body { flex: 1; min-width: 0; }

.wk-rec-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 3px;
  line-height: 1.4;
}

.wk-rec-card-sub {
  font-size: 12px;
  color: #8E8E93;
  line-height: 1.4;
}

.wk-rec-card-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
.wk-rec-card-btn:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────── */
/* S9. 診断履歴 v5.0 (行スタイル)                             */
/* ─────────────────────────────────────────────────────────── */
.wk-hist-list {
  display: flex;
  flex-direction: column;
}

.wk-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
}
.wk-hist-row:last-child { border-bottom: none; }
.wk-hist-row--latest { background: none; }

.wk-hist-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C6C80;
  flex-shrink: 0;
}
.wk-hist-row--latest .wk-hist-row-icon { background: #E8F5EE; color: #3EB489; }

.wk-hist-row-body { flex: 1; min-width: 0; }

.wk-hist-row-type {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
}

.wk-hist-row-cause {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 1px;
}

.wk-hist-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.wk-hist-row-date {
  font-size: 11px;
  color: #AEAEB2;
}

.wk-hist-latest-badge {
  font-size: 10px;
  font-weight: 700;
  background: #E8F5EE;
  color: #27AE60;
  border-radius: 6px;
  padding: 2px 6px;
}

.wk-hist-more {
  text-align: center;
  font-size: 12px;
  color: #AEAEB2;
  margin-top: 8px;
}

/* ── セクションヘッダー（タイムライン用）─────────────────── */
.wk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.wk-tl-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.wk-tl-add-btn:hover { background: #2E9A72; }

.wk-tl-more-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  border: 1.5px solid #EBEBEB;
  border-radius: 12px;
  font-size: 13px;
  color: #6C6C80;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}
.wk-tl-more-btn:hover { border-color: #3EB489; color: #3EB489; }

/* ── 空ステート ─────────────────────────────────────────── */
.wk-empty-text {
  font-size: 13px;
  color: #AEAEB2;
  text-align: center;
  padding: 16px 0;
}

/* ── セクション (v5.0) ──────────────────────────────────── */
.wk-root .wk-section {
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  margin: 0;
}

/* ── モーダルclose ボタンの向き調整 ─────────────────────── */
.wk-modal-close .wki {
  transform: rotate(45deg);
}

/* ============================================================
   Phase 5.1 — {name}ちゃんのホーム 全面再設計
   時間軸: 今日 → 今週 → 最近の変化 → 最近の出来事 → 健康エリア → おすすめ
   ============================================================ */

/* ─────────────────────────────────────────────────────────── */
/* Hero v5.1 — プロフィールのみ、ステータスなし               */
/* ─────────────────────────────────────────────────────────── */
.wk-root .wk-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 20px 18px;
  margin: 8px 0 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}

.wk-hero-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A8DEC5, #3EB489);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wk-hero-info { flex: 1; min-width: 0; }

.wk-hero-name {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0 0 3px;
  line-height: 1.2;
}

.wk-hero-meta {
  font-size: 12px;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

.wk-hero-edit-btn {
  background: none;
  border: none;
  color: #C0C0C0;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.wk-hero-edit-btn:hover { color: #3EB489; background: #F0FAF5; }

/* ─────────────────────────────────────────────────────────── */
/* 今日セクション                                              */
/* ─────────────────────────────────────────────────────────── */
.wk-today {}

/* 健康状態行 */
.wk-today-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F0F0F0;
}

.wk-stars {
  display: flex;
  gap: 2px;
}

.wk-star { display: flex; align-items: center; }
.wk-star--on { color: #F5A623; }
.wk-star:not(.wk-star--on) { color: #DDD; }

.wk-today-status-text {
  font-size: 14px;
  font-weight: 600;
  color: #3C3C43;
}

/* タスクボタンリスト */
.wk-today-tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.wk-today-task {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background .1s;
}
.wk-today-task:hover:not(.wk-today-task--done) { background: #F8F8FA; }
.wk-today-task--done { cursor: default; }

.wk-today-task-icon {
  color: #DDD;
  display: flex;
  flex-shrink: 0;
  transition: color .2s;
}
.wk-today-task--done .wk-today-task-icon { color: #3EB489; }

.wk-today-task-label {
  flex: 1;
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 500;
}
.wk-today-task--done .wk-today-task-label {
  color: #AEAEB2;
  text-decoration: line-through;
}

.wk-today-task-dur {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #AEAEB2;
  flex-shrink: 0;
}
.wk-today-task--done .wk-today-task-dur { opacity: 0; }

/* プログレスバー */
.wk-today-progress {
  background: #F8F8FA;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.wk-today-prog-track {
  height: 5px;
  background: #E5E5EA;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.wk-today-prog-bar {
  height: 100%;
  background: #3EB489;
  border-radius: 99px;
  transition: width .5s ease;
}

.wk-today-prog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-today-prog-pct {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}

.wk-today-prog-msg {
  font-size: 12px;
  color: #8E8E93;
}

/* 今日の写真 */
.wk-today-photo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px dashed #D5D5D5;
  border-radius: 10px;
  color: #AEAEB2;
}

.wk-today-photo-icon {
  display: flex;
  flex-shrink: 0;
  opacity: .6;
}

.wk-today-photo-label {
  flex: 1;
  font-size: 13px;
}

.wk-today-photo-btn {
  font-size: 12px;
  font-weight: 600;
  color: #AEAEB2;
  background: #F2F2F7;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: not-allowed;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────── */
/* 今週セクション                                              */
/* ─────────────────────────────────────────────────────────── */
.wk-week {}

.wk-week-metrics {
  display: flex;
  gap: 0;
}

.wk-week-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  border-right: 1px solid #F0F0F0;
}
.wk-week-metric:last-child { border-right: none; }

.wk-week-metric-icon {
  display: flex;
  opacity: .85;
}

.wk-week-metric-val {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1;
}

.wk-week-metric-label {
  font-size: 11px;
  color: #999;
  text-align: center;
  line-height: 1.3;
}

.wk-week-sub {
  text-align: center;
  font-size: 12px;
  color: #8E8E93;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #F5F5F5;
}

/* ─────────────────────────────────────────────────────────── */
/* 最近の変化                                                  */
/* ─────────────────────────────────────────────────────────── */
.wk-changes {}

.wk-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-change-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #3C3C43;
  line-height: 1.5;
}

.wk-change-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3EB489;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────── */
/* 最近の出来事                                                */
/* ─────────────────────────────────────────────────────────── */
.wk-events {}

.wk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.wk-ev-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #3EB489;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.wk-ev-add-btn:hover { background: #2E9A72; }

.wk-ev-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wk-ev-group {}

.wk-ev-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 8px;
}

.wk-ev-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #F5F5F5;
}
.wk-ev-item:last-child { border-bottom: none; }

.wk-ev-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C6C80;
  flex-shrink: 0;
}

.wk-ev-body { flex: 1; min-width: 0; }

.wk-ev-title {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
}

.wk-ev-sub {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 2px;
}

.wk-ev-time {
  font-size: 11px;
  color: #AEAEB2;
  flex-shrink: 0;
  padding-top: 2px;
}

.wk-ev-more-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: none;
  border: 1.5px solid #EBEBEB;
  border-radius: 10px;
  font-size: 13px;
  color: #6C6C80;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}
.wk-ev-more-btn:hover { border-color: #3EB489; color: #3EB489; }

/* ─────────────────────────────────────────────────────────── */
/* 健康エリア v5.1 (シンプル化)                               */
/* ─────────────────────────────────────────────────────────── */
.wk-areas {}

.wk-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 460px) {
  .wk-area-grid { grid-template-columns: repeat(3, 1fr); }
}

.wk-area-card {
  background: #FAFAFA;
  border: 1.5px solid #EBEBEB;
  border-radius: 13px;
  padding: 13px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color .15s;
}
.wk-area-card:hover:not(.wk-area-card--dim) { border-color: #3EB489; }
.wk-area-card--dim { opacity: .5; }

.wk-area-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wk-area-icon {
  color: #3EB489;
  display: flex;
  flex-shrink: 0;
}
.wk-area-card--dim .wk-area-icon { color: #AEAEB2; }

.wk-area-name {
  font-size: 13px;
  font-weight: 700;
  color: #2C2C2E;
  flex: 1;
}

.wk-area-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.wk-area-badge--green  { background: #E8F5EE; color: #27AE60; }
.wk-area-badge--blue   { background: #EBF5FB; color: #2980B9; }
.wk-area-badge--orange { background: #FEF6EE; color: #E67E22; }
.wk-area-badge--gray   { background: #F2F2F7; color: #6C6C80; }
.wk-area-badge--dim    { background: #F2F2F7; color: #AEAEB2; }

.wk-area-detail {}

.wk-area-next {
  font-size: 11px;
  color: #8E8E93;
  font-weight: 500;
}

.wk-area-coming {
  font-size: 11px;
  color: #AEAEB2;
}

.wk-area-cta {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  margin-top: 2px;
}
.wk-area-cta:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────── */
/* おすすめ v5.1 (最大2件)                                     */
/* ─────────────────────────────────────────────────────────── */
.wk-recs {}

.wk-rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  border: 1.5px solid #EBEBEB;
  border-radius: 12px;
  background: #FAFAFA;
  transition: border-color .15s;
}
.wk-rec-item:hover { border-color: #3EB489; }

.wk-rec-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #FFF9E6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E6A817;
  flex-shrink: 0;
}

.wk-rec-body { flex: 1; min-width: 0; }

.wk-rec-title {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.4;
  margin-bottom: 2px;
}

.wk-rec-sub {
  font-size: 12px;
  color: #8E8E93;
  line-height: 1.4;
}

.wk-rec-link {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
  align-self: center;
}
.wk-rec-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────── */
/* セクション共通 override (v5.1 wk-root 内のみ)              */
/* ─────────────────────────────────────────────────────────── */
.wk-root .wk-section {
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────── */
/* 共通: SVG アイコン基本サイズ                                */
/* ─────────────────────────────────────────────────────────── */
.wki {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.wki--sm  { width: 13px; height: 13px; }
.wki--xs  { width: 10px; height: 10px; }
.wki--star{ width: 14px; height: 14px; }

/* 空ステート */
.wk-empty {
  font-size: 13px;
  color: #AEAEB2;
  text-align: center;
  padding: 16px 0;
}

/* エラーメッセージ */
.wk-error {
  padding: 20px;
  color: #888;
  text-align: center;
}

/* ============================================================
   Phase 6.0 — Wan Platform Home
   ============================================================ */

/* ─── オンボーディング ────────────────────────────────────── */
.wan-ob-root {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.wan-ob-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}
.wan-ob-progress-bar {
  height: 4px;
  flex: 1;
  max-width: 60px;
  border-radius: 2px;
  background: #E5E5EA;
  transition: background .3s;
}
.wan-ob-progress-bar--active { background: #3EB489; }
.wan-ob-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  animation: ob-fadein .3s ease;
}
@keyframes ob-fadein { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.wan-ob-title {
  font-size: 20px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0 0 6px;
  text-align: center;
}
.wan-ob-sub {
  font-size: 13px;
  color: #8E8E93;
  text-align: center;
  margin: 0 0 20px;
}
.wan-ob-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #3EB489;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 16px;
  transition: background .2s;
}
.wan-ob-btn:hover { background: #35a07a; }
.wan-ob-form { display: flex; flex-direction: column; gap: 14px; }
.wan-ob-field { display: flex; flex-direction: column; gap: 4px; }
.wan-ob-label { font-size: 13px; color: #636366; font-weight: 600; }
.wan-ob-input {
  padding: 10px 12px;
  border: 1.5px solid #E5E5EA;
  border-radius: 8px;
  font-size: 16px;
  color: #2C3E50;
  background: #F9F9F9;
  outline: none;
  transition: border-color .2s;
}
.wan-ob-input:focus { border-color: #3EB489; background: #fff; }
.wan-ob-radios { display: flex; gap: 10px; }
.wan-ob-radio {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  border: 1.5px solid #E5E5EA;
  border-radius: 8px;
  font-size: 14px;
  color: #8E8E93;
  cursor: pointer;
  background: #F9F9F9;
  transition: all .18s;
}
.wan-ob-radio--on {
  border-color: #3EB489;
  background: #F0FAF6;
  color: #3EB489;
  font-weight: 700;
}
.wan-ob-error {
  font-size: 12px;
  color: #E74C3C;
  margin-top: 4px;
}
.wan-ob-card--done { text-align: center; }
.wan-ob-done-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: #F0FAF6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Hero v6.0 ─────────────────────────────────────────── */
.wk-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wk-dog-switcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.22);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 20px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
}
.wk-dog-switcher:hover { background: rgba(255,255,255,.32); }
.wk-ds-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.wk-ds-name { line-height: 1; }
.wk-ds-arrow { opacity: .8; font-size: 11px; }
.wk-hero-actions {
  display: flex;
  gap: 8px;
}
.wk-hero-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background .2s;
}
.wk-hero-icon-btn:hover { background: rgba(255,255,255,.32); }
.wk-hero-icon-btn svg { width: 16px; height: 16px; }
.wk-hero-greeting {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}
.wk-hero-greeting-sub {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin: 0 0 14px;
}
.wk-hero-tasks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wk-hero-task {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 7px 10px;
}
.wk-hero-task--done { opacity: .65; }
.wk-hero-task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wk-hero-task--done .wk-hero-task-check {
  background: rgba(255,255,255,.6);
  border-color: transparent;
}
.wk-hero-task-check svg { width: 11px; height: 11px; }
.wk-hero-task-label { font-size: 13px; color: #fff; font-weight: 500; flex: 1; }
.wk-hero-task--done .wk-hero-task-label { text-decoration: line-through; opacity: .8; }

/* ステータスストリップ */
.wk-hero-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 0;
}
.wk-hero-strip-item {
  flex: 1;
  text-align: center;
  padding: 0 4px;
}
.wk-hero-strip-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.wk-hero-strip-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.7);
  margin-top: 3px;
}
.wk-hero-strip-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

/* ─── 犬ドロップダウン ───────────────────────────────────── */
.wk-dog-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 200;
  overflow: hidden;
  animation: ob-fadein .2s ease;
}
.wk-dog-dropdown.wk-dd-hidden { display: none; }
.wk-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
}
.wk-dd-item:hover { background: #F2FAF7; }
.wk-dd-item--active { background: #F0FAF6; }
.wk-dd-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E8F7F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #3EB489;
  flex-shrink: 0;
}
.wk-dd-info { flex: 1; overflow: hidden; }
.wk-dd-name { font-size: 14px; font-weight: 700; color: #2C3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-dd-meta { font-size: 11px; color: #8E8E93; }
.wk-dd-check { width: 16px; height: 16px; color: #3EB489; }
.wk-dd-check svg { width: 16px; height: 16px; }
.wk-dd-divider { height: 1px; background: #F0F0F0; margin: 2px 0; }
.wk-dd-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  color: #3EB489;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.wk-dd-add:hover { background: #F2FAF7; }

/* ─── 診断セクション ─────────────────────────────────────── */
.wk-diag-section { margin-bottom: 20px; }
.wk-diag-list { display: flex; flex-direction: column; gap: 10px; }
.wk-diag-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  text-decoration: none;
  transition: box-shadow .18s;
  position: relative;
}
.wk-diag-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.wk-diag-card--done { background: #F9F9FB; }
.wk-diag-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #E8F7F1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wk-diag-card-icon svg { width: 22px; height: 22px; color: #3EB489; }
.wk-diag-card-body { flex: 1; overflow: hidden; }
.wk-diag-card-title { font-size: 15px; font-weight: 700; color: #2C3E50; margin-bottom: 2px; }
.wk-diag-card-sub { font-size: 12px; color: #8E8E93; }
.wk-diag-card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #E8F7F1;
  color: #3EB489;
}
.wk-diag-card-arrow { color: #C7C7CC; font-size: 16px; font-weight: 300; }

/* ─── Wan Platform セクション ────────────────────────────── */
.wk-platform { margin-bottom: 20px; }
.wk-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wk-platform-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  position: relative;
}
.wk-platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.wk-platform-icon svg { width: 20px; height: 20px; color: #8E8E93; }
.wk-platform-name { font-size: 13px; font-weight: 700; color: #2C3E50; margin-bottom: 2px; }
.wk-platform-sub { font-size: 10px; color: #AEAEB2; }
.wk-platform-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  background: #F2F2F7;
  color: #AEAEB2;
  border-radius: 6px;
  padding: 2px 5px;
}

/* ─── 下部ナビゲーション ──────────────────────────────────── */
.wan-platform-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: stretch;
  z-index: 300;
  safe-area-inset-bottom: env(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
body.wan-has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
.wan-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #8E8E93;
  font-size: 10px;
  transition: color .15s;
}
.wan-nav-item:hover { color: #3EB489; }
.wan-nav-item--active { color: #3EB489; }
.wan-nav-icon { display: flex; align-items: center; }
.wan-nav-icon svg { width: 22px; height: 22px; }
.wan-nav-label { line-height: 1; }

/* ─── ヘッダー犬アイコン ──────────────────────────────────── */
.wan-header-btn { display: inline-flex; align-items: center; }
.wan-header-dog-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E8F7F1;
  border: 2px solid #3EB489;
  overflow: hidden;
}
.wan-header-avatar {
  font-size: 15px;
  font-weight: 800;
  color: #3EB489;
  line-height: 1;
}
.wan-header-paw { display: flex; align-items: center; }
.wan-header-paw svg { width: 20px; height: 20px; color: #3EB489; }

/* ─── 愛犬管理オーバーレイ ────────────────────────────────── */
.wdm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  animation: ob-fadein .2s ease;
}
.wdm-panel {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  animation: wdm-up .25s ease;
}
@keyframes wdm-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.wdm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #F0F0F0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.wdm-back-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #F2F2F7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.wdm-back-btn:hover { background: #E5E5EA; }
.wdm-title { font-size: 16px; font-weight: 700; color: #2C3E50; margin: 0; flex: 1; }
.wdm-dog-list { padding: 8px 0; }
.wdm-dog-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F9F9F9;
}
.wdm-dog-item--active { background: #FAFDF9; }
.wdm-dog-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.wdm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E8F7F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #3EB489;
  flex-shrink: 0;
}
.wdm-dog-info { flex: 1; overflow: hidden; text-align: left; }
.wdm-dog-name {
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wdm-dog-meta { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.wdm-active-badge {
  font-size: 10px;
  font-weight: 700;
  background: #E8F7F1;
  color: #3EB489;
  border-radius: 6px;
  padding: 1px 6px;
}
.wdm-check { width: 22px; height: 22px; color: #3EB489; }
.wdm-ic { width: 18px; height: 18px; }
.wdm-dog-actions {
  display: flex;
  gap: 4px;
  padding: 0 12px 0 0;
}
.wdm-action-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8E8E93;
  transition: background .15s;
}
.wdm-action-btn:hover { background: #E5E5EA; }
.wdm-action-btn--danger { color: #E74C3C; }
.wdm-action-btn--danger:hover { background: #FDEDEC; }
.wdm-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 13px 16px;
  border: 2px dashed #D0D0D5;
  border-radius: 12px;
  background: none;
  color: #3EB489;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.wdm-add-btn:hover { border-color: #3EB489; background: #F0FAF6; }
.wdm-form { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.wdm-field { display: flex; flex-direction: column; gap: 5px; }
.wdm-field-row { display: flex; gap: 12px; }
.wdm-field-row .wdm-field { flex: 1; }
.wdm-label { font-size: 13px; color: #636366; font-weight: 600; }
.wdm-req { color: #E74C3C; font-size: 11px; }
.wdm-input, .wdm-select {
  padding: 10px 12px;
  border: 1.5px solid #E5E5EA;
  border-radius: 8px;
  font-size: 15px;
  color: #2C3E50;
  background: #F9F9F9;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s;
}
.wdm-input:focus, .wdm-select:focus { border-color: #3EB489; background: #fff; }
.wdm-save-btn {
  padding: 13px;
  background: #3EB489;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
.wdm-save-btn:hover { background: #35a07a; }
.wdm-error { font-size: 12px; color: #E74C3C; }

/* ─── 結果ページ ホームバナー ─────────────────────────────── */
.wcr-home-banner {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.wcr-home-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F0FAF6;
  border: 1.5px solid #C5EDD9;
  border-radius: 12px;
  padding: 12px 14px;
}
.wcr-home-banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3EB489;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wcr-home-banner-icon svg { width: 16px; height: 16px; }
.wcr-home-banner-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #2C5F44;
}
.wcr-home-banner-btn {
  font-size: 12px;
  font-weight: 700;
  color: #3EB489;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.wcr-home-banner-btn:hover { text-decoration: underline; }

/* ─── 診断 犬選択画面 ────────────────────────────────────── */
.wcd-dsel-root {
  padding: 20px 0;
}
.wcd-dsel-title {
  font-size: 18px;
  font-weight: 700;
  color: #2C3E50;
  text-align: center;
  margin: 0 0 20px;
}
.wcd-dsel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.wcd-dsel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 2px solid #E5E5EA;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, background .18s;
}
.wcd-dsel-item:hover { border-color: #3EB489; background: #F0FAF6; }
.wcd-dsel-item--active { border-color: #3EB489; background: #F0FAF6; }
.wcd-dsel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E8F7F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #3EB489;
  flex-shrink: 0;
}
.wcd-dsel-info { flex: 1; overflow: hidden; }
.wcd-dsel-name { font-size: 15px; font-weight: 700; color: #2C3E50; }
.wcd-dsel-meta { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.wcd-dsel-other {
  display: block;
  width: 100%;
  padding: 11px;
  background: none;
  border: 1.5px dashed #D0D0D5;
  border-radius: 10px;
  color: #8E8E93;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.wcd-dsel-other:hover { border-color: #AEAEB2; color: #636366; }

/* ============================================================
   Phase 6.1 — Platform Home Experience
   ============================================================ */

/* ─── Hero v6.1 ─────────────────────────────────────────── */
/* .wk-root .wk-hero--v61 で2クラス指定し既存の .wk-root .wk-hero を上書き */
.wk-root .wk-hero--v61 {
  background: #fff !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
  margin: 0 0 16px !important;
  border-top: 4px solid #3EB489 !important;
  overflow: hidden;
  position: relative;
}

/* 内部パディング用ラッパー */
.wk-root .wk-hero--v61 .wk-hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
  margin-bottom: 14px;
}
.wk-root .wk-hero--v61 .wk-hero-dog-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FAF6;
  border: 1.5px solid #C5EDD9;
  border-radius: 20px;
  padding: 5px 12px 5px 6px;
  color: #2C5F44;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.wk-root .wk-hero--v61 .wk-hero-dog-sw:hover { background: #E0F5EC; }
.wk-hds-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3EB489;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.wk-hds-nm { font-size: 14px; font-weight: 700; line-height: 1; }
.wk-root .wk-hero--v61 .wk-hero-edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2F2F7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8E8E93;
  cursor: pointer;
  transition: background .2s;
}
.wk-root .wk-hero--v61 .wk-hero-edit-btn:hover { background: #E5E5EA; color: #3EB489; }

/* 犬名ブロック */
.wk-root .wk-hero--v61 .wk-hero-main {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wk-root .wk-hero--v61 .wk-hero-greeting {
  font-size: 13px;
  color: #8E8E93;
  margin: 0 0 4px;
}
.wk-root .wk-hero--v61 .wk-hero-name-big {
  font-size: 30px;
  font-weight: 800;
  color: #1C1C1E;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* 今日やることブロック */
.wk-root .wk-hero--v61 .wk-hero-tasks-wrap {
  background: #F9F9FB;
  border-top: 1px solid #F0F0F5;
  padding: 14px 16px;
  margin-bottom: 0;
}
.wk-root .wk-hero--v61 .wk-hero-tasks-hd {
  font-size: 11px;
  font-weight: 700;
  color: #8E8E93;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.wk-root .wk-hero--v61 .wk-hero-task {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 7px 0;
  cursor: pointer;
  border-bottom: 1px solid #F0F0F5;
}
.wk-root .wk-hero--v61 .wk-hero-task:last-child { border-bottom: none; }
.wk-root .wk-hero--v61 .wk-hero-task-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #D0D0D5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all .2s;
}
.wk-root .wk-hero--v61 .wk-hero-task--done .wk-hero-task-check {
  background: #3EB489;
  border-color: #3EB489;
  color: #fff;
}
.wk-root .wk-hero--v61 .wk-hero-task-label {
  font-size: 14px;
  color: #1C1C1E;
  text-align: left;
}
.wk-root .wk-hero--v61 .wk-hero-task--done .wk-hero-task-label {
  text-decoration: line-through;
  color: #AEAEB2;
}

/* フッター (streak ＋ 完了バッジ) */
.wk-root .wk-hero--v61 .wk-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #F0F0F5;
  background: #fff;
}
.wk-root .wk-hero--v61 .wk-hero-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F0FAF6;
  border-radius: 20px;
  padding: 4px 10px;
  color: #3EB489;
  font-size: 13px;
  font-weight: 700;
}
.wk-hero-streak--zero { color: #8E8E93 !important; background: #F2F2F7 !important; }
.wk-hero-streak .wki { width: 14px; height: 14px; flex-shrink: 0; }
.wk-root .wk-hero--v61 .wk-hero-comp {
  font-size: 13px;
  color: #8E8E93;
  font-weight: 600;
}

/* ─── AI ひとこと ─────────────────────────────────────────── */
.wk-advice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.wk-advice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFF8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #F0A030;
}
.wk-advice-icon .wki { width: 20px; height: 20px; }
.wk-advice-text {
  font-size: 14px;
  line-height: 1.65;
  color: #3C3C43;
  margin: 0;
}

/* ─── クイックアクション ──────────────────────────────────── */
.wk-qa { margin-bottom: 16px; }
.wk-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wk-qa-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.wk-qa-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.wk-qa-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-qa-icon .wki { width: 22px; height: 22px; }
.wk-qa-label-text {
  font-size: 11px;
  font-weight: 700;
  color: #3C3C43;
  line-height: 1.2;
  text-align: center;
}

/* ─── Today カード v6.1 ─────────────────────────────────── */
.wk-today-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.wk-today-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wk-today-title {
  font-size: 16px;
  font-weight: 700;
  color: #1C1C1E;
}
.wk-today-pct-num {
  font-size: 22px;
  font-weight: 800;
  color: #3EB489;
}
.wk-today-card .wk-today-prog-track {
  height: 5px;
  background: #F0F0F0;
  border-radius: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}
.wk-today-card .wk-today-prog-bar {
  height: 5px;
  background: linear-gradient(90deg, #3EB489, #5DC9A0);
  border-radius: 3px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.wk-today-card .wk-today-tasks { display: flex; flex-direction: column; }
.wk-today-card .wk-today-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F2F2F7;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: opacity .15s;
}
.wk-today-card .wk-today-task:last-child { border-bottom: none; }
.wk-today-card .wk-today-task:hover:not(.wk-today-task--done) { opacity: .75; }
.wk-today-card .wk-today-task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #D0D0D5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.wk-today-card .wk-today-task--done .wk-today-task-check {
  background: #3EB489;
  border-color: #3EB489;
  color: #fff;
}
.wk-today-card .wk-today-task-check .wki { width: 13px; height: 13px; }
.wk-today-card .wk-today-task-label {
  flex: 1;
  font-size: 15px;
  color: #1C1C1E;
  line-height: 1.4;
}
.wk-today-card .wk-today-task--done .wk-today-task-label {
  color: #AEAEB2;
  text-decoration: line-through;
}
.wk-today-card .wk-today-task-dur {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #C7C7CC;
  white-space: nowrap;
}
.wk-today-done-msg {
  text-align: center;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #3EB489;
  padding: 10px;
  background: #F0FAF6;
  border-radius: 10px;
}

/* ─── 写真カード v6.1 ────────────────────────────────────── */
.wk-photo-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.wk-photo-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wk-photo-title {
  font-size: 16px;
  font-weight: 700;
  color: #1C1C1E;
}
.wk-photo-coming {
  font-size: 11px;
  font-weight: 700;
  background: #F2F2F7;
  color: #AEAEB2;
  border-radius: 6px;
  padding: 2px 8px;
}
.wk-photo-placeholder {
  border: 2px dashed #E0E0E5;
  border-radius: 12px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: default;
  background: #FAFAFA;
  transition: border-color .2s, background .2s;
}
.wk-photo-add-icon { color: #C7C7CC; }
.wk-photo-add-icon .wki { width: 24px; height: 24px; }
.wk-photo-add-label { font-size: 13px; color: #AEAEB2; font-weight: 500; }
.wk-photo-sub {
  font-size: 11px;
  color: #C7C7CC;
  text-align: center;
  margin: 8px 0 0;
}

/* ─── Timeline v6.1 (SNS風) ─────────────────────────────── */
.wk-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wk-tl-label { margin: 0 !important; }
.wk-ev-feed { display: flex; flex-direction: column; }
.wk-ev-group { margin-bottom: 4px; }
.wk-ev-group-label {
  font-size: 11px;
  font-weight: 800;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 0 6px;
}
.wk-ev-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.wk-ev-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wk-ev-icon-wrap .wki { width: 18px; height: 18px; }
.wk-ev-body { flex: 1; overflow: hidden; }
.wk-ev-title {
  font-size: 14px;
  font-weight: 600;
  color: #1C1C1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-ev-sub {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-ev-time { font-size: 11px; color: #C7C7CC; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.wk-ev-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #3EB489;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.wk-ev-more-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: none;
  border: 1.5px solid #E5E5EA;
  border-radius: 10px;
  font-size: 13px;
  color: #8E8E93;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.wk-ev-more-btn:hover { border-color: #3EB489; color: #3EB489; }
.wk-tl-empty { padding: 8px 0; }

/* ─── Wan Platform v6.1 ─────────────────────────────────── */
.wk-pl-lead {
  font-size: 13px;
  color: #8E8E93;
  margin: 0 0 14px;
  line-height: 1.5;
}
.wk-pl-list { display: flex; flex-direction: column; gap: 10px; }
.wk-pl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.wk-pl-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wk-pl-icon .wki { width: 22px; height: 22px; }
.wk-pl-body { flex: 1; overflow: hidden; }
.wk-pl-name { font-size: 15px; font-weight: 700; color: #1C1C1E; }
.wk-pl-sub { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.wk-pl-badge {
  font-size: 11px;
  font-weight: 700;
  background: #F0FAF6;
  color: #3EB489;
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── ドロップダウン hidden 状態 ──────────────────────────── */
.wk-dd-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   皮膚診断（Phase63・.wcr-result--skin スコープで自己完結）
   ════════════════════════════════════════════════════════════ */
.wcr-hero--skin {
  background: linear-gradient(135deg, #EAF2FB 0%, #F3F0FF 100%);
}

/* 受診推奨バナー（最上部・YMYL） */
.wcr-result--skin .wcr-skin-vetwarn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px 18px;
  background: #FFF4E5;
  border: 1px solid #F0C48A;
  border-left: 4px solid #E8907A;
  border-radius: 12px;
}
.wcr-result--skin .wcr-skin-vetwarn--strong {
  background: #FDECEA;
  border-color: #E6B0AB;
  border-left-color: #D47070;
}
.wcr-result--skin .wcr-skin-vetwarn-icon { font-size: 22px; flex-shrink: 0; line-height: 1.2; }
.wcr-result--skin .wcr-skin-vetwarn-title { font-size: 14px; font-weight: 700; color: #A15A2A; margin: 0 0 4px; }
.wcr-result--skin .wcr-skin-vetwarn--strong .wcr-skin-vetwarn-title { color: #B23B32; }
.wcr-result--skin .wcr-skin-vetwarn-desc { font-size: 12px; color: #7A6A5A; margin: 0; line-height: 1.6; }

/* 受診優先ブロック（B/D/E・商品の代わり） */
.wcr-result--skin .wcr-skin-vetfirst {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #F0F7FF;
  border: 1px solid #C0D8F0;
  border-radius: 12px;
}
.wcr-result--skin .wcr-skin-vetfirst-icon { font-size: 24px; flex-shrink: 0; }
.wcr-result--skin .wcr-skin-vetfirst-text { font-size: 13px; color: #345; margin: 0; line-height: 1.6; }

/* 再診断サジェスト（腸活と同様の flex 復活） */
.wcr-result--skin .wcr-rediag-suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 14px 16px;
  text-align: left;
  background: linear-gradient(135deg, #EBF2FB 0%, #F3F0FF 100%);
  border: 1px solid #C8D6EC;
  border-radius: 14px;
}
.wcr-result--skin .wcr-rediag-suggest-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }

/* 商品カード（skin 専用・自己完結） */
.wcr-result--skin .wcp-diag-products { margin: 8px 0 4px; }
.wcr-result--skin .wcp-diag-pr { font-size: 11px; color: #9AA; margin: 0 0 10px; }
.wcr-result--skin .wcp-diag-caution {
  font-size: 12px; color: #B23B32; background: #FDECEA;
  border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.6;
}
.wcr-result--skin .wcp-diag-cards { display: flex; flex-direction: column; gap: 14px; }
.wcr-result--skin .wcp-card {
  border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff;
}
.wcr-result--skin .wcp-card-inner { display: flex; gap: 14px; padding: 14px; }
.wcr-result--skin .wcp-card-img {
  width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; border-radius: 8px; background: #F7F8FA;
}
.wcr-result--skin .wcp-card-img--none {
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.wcr-result--skin .wcp-card-body { flex: 1; min-width: 0; }
.wcr-result--skin .wcp-card-brand { font-size: 11px; color: #8A94A6; }
.wcr-result--skin .wcp-card-name { font-size: 14px; font-weight: 700; color: #2C3E50; margin: 2px 0 4px; line-height: 1.4; }
.wcr-result--skin .wcp-card-stars { font-size: 13px; color: #E8A93A; letter-spacing: 1px; margin-bottom: 4px; }
.wcr-result--skin .wcp-card-comment { font-size: 12px; color: #5A6A7A; margin: 0 0 10px; line-height: 1.6; }
.wcr-result--skin .wcp-card-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wcr-result--skin .wcp-btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; min-height: 40px; line-height: 1.6; text-align: center;
}
.wcr-result--skin .wcp-btn-amz { background: #FF9900; color: #fff; }
.wcr-result--skin .wcp-btn-rak { background: #BF0000; color: #fff; }

@media (max-width: 480px) {
  .wcr-result--skin .wcp-card-inner { flex-direction: column; }
  .wcr-result--skin .wcp-card-img { width: 100%; height: auto; }
}

/* 受診レベル（🟢🟡🔴・商品の前・YMYL） */
.wcr-result--skin .wcr-skin-vetlevel {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
}
.wcr-result--skin .wcr-skin-vetlevel--green  { background: #F0FBF4; border-color: #BFE3C0; }
.wcr-result--skin .wcr-skin-vetlevel--yellow { background: #FFFBEB; border-color: #F0D89A; }
.wcr-result--skin .wcr-skin-vetlevel--red    { background: #FDECEA; border-color: #E6B0AB; }
.wcr-result--skin .wcr-skin-vetlevel-head { display: flex; align-items: center; gap: 8px; }
.wcr-result--skin .wcr-skin-vetlevel-dot { font-size: 16px; line-height: 1; }
.wcr-result--skin .wcr-skin-vetlevel-label { font-size: 15px; font-weight: 700; color: #2C3E50; }
.wcr-result--skin .wcr-skin-vetlevel--green  .wcr-skin-vetlevel-label { color: #1B7A3D; }
.wcr-result--skin .wcr-skin-vetlevel--yellow .wcr-skin-vetlevel-label { color: #A9791C; }
.wcr-result--skin .wcr-skin-vetlevel--red    .wcr-skin-vetlevel-label { color: #B23B32; }
.wcr-result--skin .wcr-skin-vetlevel-desc { font-size: 12px; color: #5A6A7A; margin: 6px 0 0; line-height: 1.6; }