/*
 * consent.css - EU/UK訪問者向けCookie同意バー
 *
 * 配置: 画面下部・全幅・非ブロッキング（フルスクリーンモーダル禁止・GDPR要件）。
 * ページ本体は暗くしない（オーバーレイ無し）。
 * 表示中は body.hcm-consent-open が付与され（consent.js）、右下チャットボットの
 * ランチャー/パネルをバナー高さ分だけ引き上げる（--hcm-consent-bar-h はconsent.jsが実測して設定）。
 * チャットボット本体のロジックは変更せず、位置調整のみここで行う。
 *
 * 2026-09-04 ユーザー決定: 主ボタン「OK」（clay塗り）と、同じ行・同じサイズのゴーストボタン
 * 「必要なものだけ（拒否）」を並べる。拒否も同意と同じ1クリックで選べる見た目にする。
 */

#hcm-consent-root {
  --hcm-consent-moss: #2b4a2f;
  --hcm-consent-clay: #b06a3b;
  --hcm-consent-clay-dark: #96562f;
  --hcm-consent-paper: #f7f6f2;
  --hcm-consent-ink: #1f2419;
  --hcm-consent-line: #d9d6cd;
}

.hcm-consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95; /* .hcm-chat-launcher系(90)より上、.site-header(100)より下 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--hcm-consent-paper);
  color: var(--hcm-consent-ink);
  border-top: 1px solid var(--hcm-consent-line);
  box-shadow: 0 -6px 20px rgba(31, 36, 25, 0.12);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
}

.hcm-consent-text {
  margin: 0;
  flex: 1 1 260px;
  min-width: 200px;
}

.hcm-consent-link {
  color: var(--hcm-consent-moss);
  text-decoration: underline;
  white-space: nowrap;
}

.hcm-consent-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.hcm-consent-btn {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  padding: 10px 22px;
  min-width: 88px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

/* 「拒否」と「OK」は同じ .hcm-consent-btn ベース＝同じ高さ・同じ最小幅（GDPR: 同等の1クリック） */
.hcm-consent-btn--primary {
  border: none;
  background: var(--hcm-consent-clay);
  color: #fff;
}

.hcm-consent-btn--primary:hover,
.hcm-consent-btn--primary:focus-visible {
  background: var(--hcm-consent-clay-dark);
}

.hcm-consent-btn--ghost {
  border: 1px solid var(--hcm-consent-line);
  background: transparent;
  color: var(--hcm-consent-ink);
}

.hcm-consent-btn--ghost:hover,
.hcm-consent-btn--ghost:focus-visible {
  border-color: var(--hcm-consent-moss);
  color: var(--hcm-consent-moss);
}

@media (max-width: 600px) {
  .hcm-consent-bar {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .hcm-consent-actions {
    width: 100%;
    justify-content: stretch;
  }

  .hcm-consent-btn {
    flex: 1 1 0;
  }
}

/*
 * チャットボットランチャー/パネルとの位置調整（本体ロジックは変更しない・位置のみ）。
 * バナー表示中は body.hcm-consent-open が付く。--hcm-consent-bar-h はconsent.jsが
 * バナーの実測高さを設定する（推測値をここに固定しない。フォールバック値のみ保険で入れる）。
 * #back-to-top はchatbot.css導入時点(2026-09-03)から本番の実位置がローカル環境から
 * 確認できていないため、ここでは対象外（chatbot.css冒頭コメントと同じ理由）。
 */
body.hcm-consent-open #hcm-chatbot-root {
  bottom: calc(92px + var(--hcm-consent-bar-h, 68px));
}

@media (min-width: 601px) {
  body.hcm-consent-open .hcm-chat-panel {
    bottom: calc(92px + var(--hcm-consent-bar-h, 68px));
  }
}

@media (max-width: 600px) {
  body.hcm-consent-open #hcm-chatbot-root {
    bottom: calc(76px + var(--hcm-consent-bar-h, 84px));
  }
}