/**
 * PCParts Blocks - frontend.css
 * フロントエンド表示スタイル
 * ①文字装飾 ②コードコピー ③情報ボックス ④CTAボタン
 * ⑤自動目次 ⑥比較表 ⑦チェックリスト ⑧AI利用表記 ⑨Before/After
 */

/* =============================================================
   ① 文字装飾（インラインフォーマット）
   ============================================================= */
mark.pcpb-mark-yellow {
  background: #fef08a;
  color: #1e293b;
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}
mark.pcpb-mark-blue {
  background: #bfdbfe;
  color: #1e3a5f;
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}
mark.pcpb-mark-red {
  background: #fecaca;
  color: #7f1d1d;
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}
span.pcpb-text-red {
  color: #dc2626;
  font-weight: 700;
}
span.pcpb-bold-box {
  display: inline-block;
  background: #fffbeb;
  border: 1.5px solid #fbbf24;
  border-radius: 4px;
  padding: 1px 8px;
  font-weight: 700;
  color: #92400e;
  font-size: 0.95em;
}

/* =============================================================
   ② コードコピーブロック
   ============================================================= */
.pcpb-code-copy {
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  font-family: 'JetBrains Mono', 'Courier New', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* ダークテーマ */
.pcpb-cc-theme-dark {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
}
.pcpb-cc-theme-dark .pcpb-cc-header {
  background: #0f172a;
  border-bottom: 1px solid #334155;
}
.pcpb-cc-theme-dark .pcpb-cc-label { color: #94a3b8; }
.pcpb-cc-theme-dark .pcpb-cc-btn   { background: rgba(255,255,255,0.08); color: #94a3b8; border-color: rgba(255,255,255,0.12); }
.pcpb-cc-theme-dark .pcpb-cc-btn:hover { background: rgba(255,255,255,0.16); color: #e2e8f0; }
.pcpb-cc-theme-dark .pcpb-cc-btn.pcpb-cc-copied { background: rgba(34,197,94,0.2); color: #4ade80; border-color: rgba(34,197,94,0.3); }

/* ライトテーマ */
.pcpb-cc-theme-light {
  background: #f8fafc;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}
.pcpb-cc-theme-light .pcpb-cc-header {
  background: #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
}
.pcpb-cc-theme-light .pcpb-cc-label { color: #475569; }
.pcpb-cc-theme-light .pcpb-cc-btn   { background: #fff; color: #475569; border-color: #cbd5e1; }
.pcpb-cc-theme-light .pcpb-cc-btn:hover { background: #f1f5f9; color: #1e293b; }
.pcpb-cc-theme-light .pcpb-cc-btn.pcpb-cc-copied { background: #f0fdf4; color: #16a34a; border-color: #86efac; }

/* 共通 */
.pcpb-cc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.pcpb-cc-header-simple { justify-content: flex-end; }
.pcpb-cc-label {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcpb-cc-lang {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  background: #334155;
  color: #7dd3fc;
}
.pcpb-cc-theme-light .pcpb-cc-lang { background: #cbd5e1; color: #1e3a5f; }
.pcpb-cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  background: none;
  font-family: inherit;
  flex-shrink: 0;
}
.pcpb-cc-icon { font-size: 13px; }
.pcpb-cc-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.5;
}
.pcpb-cc-theme-light .pcpb-cc-description { border-bottom-color: #e2e8f0; color: #64748b; }
.pcpb-cc-pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
}
.pcpb-cc-pre code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: none;
  color: inherit;
}
.pcpb-cc-success {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #4ade80;
  padding: 6px 12px;
  margin: 0;
  border-top: 1px solid rgba(74,222,128,0.2);
}
.pcpb-code-copy.pcpb-empty {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =============================================================
   ③ 情報ボックス（コールアウト）
   ============================================================= */
.pcpb-callout {
  border-left: 4px solid;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 1.5rem 0;
}
.pcpb-callout-info     { background: #eff6ff; border-color: #3b82f6; }
.pcpb-callout-point    { background: #f0fdf4; border-color: #22c55e; }
.pcpb-callout-caution  { background: #fffbeb; border-color: #f59e0b; }
.pcpb-callout-warning  { background: #fff1f2; border-color: #ef4444; }
.pcpb-callout-important { background: #faf5ff; border-color: #a855f7; }

.pcpb-callout-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.pcpb-callout-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.pcpb-callout-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.pcpb-callout-info     .pcpb-callout-title { color: #1d4ed8; }
.pcpb-callout-point    .pcpb-callout-title { color: #15803d; }
.pcpb-callout-caution  .pcpb-callout-title { color: #b45309; }
.pcpb-callout-warning  .pcpb-callout-title { color: #dc2626; }
.pcpb-callout-important .pcpb-callout-title { color: #7e22ce; }

.pcpb-callout-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #334155;
}

/* =============================================================
   ④ CTAボタン
   ============================================================= */
.pcpb-cta-wrap {
  margin: 1.5rem 0;
  display: flex;
}
.pcpb-cta-align-center { justify-content: center; }
.pcpb-cta-align-left   { justify-content: flex-start; }
.pcpb-cta-align-right  { justify-content: flex-end; }

.pcpb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
}
.pcpb-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 0.92;
  text-decoration: none !important;
}
.pcpb-cta-btn:active { transform: translateY(0); }

.pcpb-cta-amazon  { background: linear-gradient(135deg, #ff9900, #ffb800); color: #111 !important; }
.pcpb-cta-rakuten { background: linear-gradient(135deg, #bf0000, #e01010); color: #fff !important; }
.pcpb-cta-primary { background: linear-gradient(135deg, #0f6cbf, #1a8cd8); color: #fff !important; }
.pcpb-cta-black   { background: linear-gradient(135deg, #1a1a1a, #333);    color: #fff !important; }
.pcpb-cta-green   { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff !important; }

.pcpb-cta-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.pcpb-cta-text { font-weight: 700; }
.pcpb-cta-sub  { font-size: 11px; font-weight: 400; opacity: 0.85; display: block; margin-top: 2px; }

/* スマホ：ボタンを全幅に */
@media (max-width: 480px) {
  .pcpb-cta-wrap { justify-content: stretch; }
  .pcpb-cta-btn  { width: 100%; justify-content: center; padding: 14px 16px; }
}

/* =============================================================
   ⑤ 自動目次
   ============================================================= */
.pcpb-toc {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 1.5rem 0;
  font-size: 14px;
}
.pcpb-toc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.pcpb-toc-header[data-collapsible] {
  cursor: pointer;
  user-select: none;
}
.pcpb-toc-header[data-collapsible]:hover { opacity: 0.8; }
.pcpb-toc-icon  { font-size: 16px; flex-shrink: 0; }
.pcpb-toc-title { font-weight: 700; font-size: 15px; flex: 1; }
.pcpb-toc-toggle { font-size: 11px; color: #94a3b8; margin-left: auto; }

.pcpb-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pcpb-toc-item { margin: 0; padding: 0; }
.pcpb-toc-h2   { padding-left: 0; }
.pcpb-toc-h3   { padding-left: 16px; }

.pcpb-toc-link {
  display: block;
  padding: 5px 8px;
  border-radius: 5px;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  transition: background 0.12s, color 0.12s;
}
.pcpb-toc-link::before { content: '›'; margin-right: 5px; color: #94a3b8; }
.pcpb-toc-h3 .pcpb-toc-link::before { content: '·'; }
.pcpb-toc-link:hover {
  background: #e8f0fe;
  color: #1d4ed8;
  text-decoration: none;
}
.pcpb-toc-link.pcpb-toc-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}

/* =============================================================
   ⑥ 比較表
   ============================================================= */
.pcpb-comparison-table { margin: 1.5rem 0; }
.pcpb-comp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pcpb-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 320px;
}
.pcpb-comp-table th,
.pcpb-comp-table td {
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}
.pcpb-comp-table th {
  background: #f1f5f9;
  font-weight: 700;
  font-size: 13px;
  position: relative;
}
.pcpb-comp-table tbody tr:nth-child(even) td { background: #f8fafc; }
.pcpb-comp-table tbody tr:hover td { background: #eff6ff; }
.pcpb-comp-table th:first-child,
.pcpb-comp-table td:first-child { text-align: left; font-weight: 600; background: #f8fafc; }

/* ハイライト列 */
.pcpb-comp-hl {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
.pcpb-comp-table th.pcpb-comp-hl { background: #dbeafe !important; }

/* おすすめバッジ */
.pcpb-comp-badge {
  display: inline-block;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 4px;
}

/* ○×△ カラー */
.pcpb-comp-ok  { color: #16a34a; font-weight: 700; font-size: 15px; }
.pcpb-comp-ng  { color: #dc2626; font-weight: 700; font-size: 15px; }
.pcpb-comp-tri { color: #d97706; font-weight: 700; font-size: 15px; }

.pcpb-comp-caption {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-top: 6px;
}

/* =============================================================
   ⑦ チェックリスト
   ============================================================= */
.pcpb-checklist { margin: 1.5rem 0; }
.pcpb-checklist-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}
.pcpb-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pcpb-checklist-item { margin: 0; padding: 0; }
.pcpb-checklist-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.pcpb-checklist-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pcpb-checklist-btn:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }

.pcpb-checklist-btn.pcpb-checked {
  background: #f0fdf4;
  border-color: #86efac;
  color: #64748b;
}
.pcpb-checklist-box {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
  color: #94a3b8;
  transition: color 0.12s;
}
.pcpb-checked .pcpb-checklist-box { color: #22c55e; }
.pcpb-checklist-text { flex: 1; }
.pcpb-checked .pcpb-checklist-text {
  text-decoration: line-through;
  color: #94a3b8;
}

/* =============================================================
   ⑧ AI利用表記
   ============================================================= */
.pcpb-ai-disclosure { margin: 1.5rem 0; border-radius: 8px; overflow: hidden; }
.pcpb-ai-inner { padding: 16px 18px; }

/* スタンダード */
.pcpb-ai-standard {
  background: #f0f9ff;
  border: 1.5px solid #7dd3fc;
}
/* コンパクト */
.pcpb-ai-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
/* バナー */
.pcpb-ai-banner {
  background: linear-gradient(90deg, #1e3a5f 0%, #0f6cbf 100%);
  color: #fff;
}
.pcpb-ai-banner .pcpb-ai-title { color: #fff; }
.pcpb-ai-banner .pcpb-ai-body p { color: rgba(255,255,255,0.9); }

.pcpb-ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pcpb-ai-icon { font-size: 20px; flex-shrink: 0; }
.pcpb-ai-title { font-weight: 700; font-size: 14px; color: #1e3a5f; }
.pcpb-ai-body p {
  font-size: 13px;
  line-height: 1.7;
  color: #475569;
  margin: 4px 0;
}
.pcpb-ai-compact .pcpb-ai-header { margin-bottom: 6px; }
.pcpb-ai-compact .pcpb-ai-body p { font-size: 12px; }

/* =============================================================
   ⑨ Before/After スライダー
   ============================================================= */
.pcpb-before-after {
  margin: 1.5rem 0;
  position: relative;
}
.pcpb-ba-slider-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  user-select: none;
  cursor: col-resize;
  -webkit-tap-highlight-color: transparent;
  /* 高さは画像の縦横比に追従 */
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
}

/* After（下層・常に全体表示） */
.pcpb-ba-after {
  position: absolute;
  inset: 0;
}
.pcpb-ba-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  draggable: false;
}

/* Before（上層・clip-pathで幅を制御） */
.pcpb-ba-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0); /* JSで更新 */
  overflow: hidden;
}
.pcpb-ba-before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  draggable: false;
}

/* ラベル */
.pcpb-ba-label {
  position: absolute;
  bottom: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pcpb-ba-label-before { left: 12px; }
.pcpb-ba-label-after  { right: 12px; }

/* ハンドル */
.pcpb-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%; /* JSで更新 */
  transform: translateX(-50%);
  width: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  z-index: 10;
  outline: none;
}
.pcpb-ba-handle:focus-visible .pcpb-ba-handle-btn {
  box-shadow: 0 0 0 3px #3b82f6;
}
.pcpb-ba-handle-line {
  position: absolute;
  inset: 0 auto 0 auto;
  width: 3px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
  border-radius: 2px;
}
.pcpb-ba-handle-btn {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  color: #334155;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.pcpb-ba-handle:active .pcpb-ba-handle-btn,
.pcpb-ba-handle:focus  .pcpb-ba-handle-btn {
  transform: scale(1.15);
  background: #3b82f6;
  color: #fff;
}

/* キャプション */
.pcpb-ba-caption {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 0;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .pcpb-ba-slider-wrap { aspect-ratio: 4 / 3; border-radius: 8px; }
  .pcpb-ba-handle-btn  { width: 36px; height: 36px; }
  .pcpb-ba-label       { font-size: 10px; padding: 2px 8px; }
}

/* =============================================================
   空ブロック共通
   ============================================================= */
.pcpb-empty {
  padding: 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 8px;
  margin: 1rem 0;
}
.pcpb-empty p { margin: 0; }