:root {
  /* ベース: わずかに cool な白 (Material 3 Expressive ベース) */
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f0f2f6;
  --surface-3: #dde0e7;
  --surface-4: #c8ccd5;
  --separator: rgba(40, 44, 56, 0.18);
  --text: #0d0e10;
  --text-2: rgba(40, 44, 56, 0.78);
  --text-3: rgba(40, 44, 56, 0.58);
  /* Accent: わずかにティール寄りのブルー (iOS 26 寄り) */
  --accent: #0064d6;
  --accent-soft: rgba(0, 100, 214, 0.12);
  /* Success: 落ち着いた深めのグリーン */
  --success: #1f9c63;
  --success-soft: rgba(31, 156, 99, 0.14);
  /* Warning: コーラル寄りのオレンジ */
  --warning: #d96d20;
  --warning-soft: rgba(217, 109, 32, 0.14);
  /* Danger */
  --danger: #d83a3a;
  --danger-soft: rgba(216, 58, 58, 0.12);
  /* タイプ色 (カノニカル統一パレット = カード基準。白文字バッジ可の濃さ) */
  --normal: #246a37;   /* 通常: 緑 */
  --normal-soft: rgba(36, 106, 55, 0.12);
  --glo: #7a35c9;      /* グローバル: 紫 */
  --glo-soft: rgba(122, 53, 201, 0.12);
  --sma: #2d44d4;      /* セール限定IFP: 青 */
  --sma-soft: rgba(45, 68, 212, 0.12);
  --ifp: #d2601f;      /* セール期間外IFP: 橙 */
  --ifp-soft: rgba(210, 96, 31, 0.13);
  --biz: #0e7c86;      /* ビジネス: シアン */
  --biz-soft: rgba(14, 124, 134, 0.12);
  --blog: #c2185b;     /* 当サイト発行: ピンク */
  --blog-soft: rgba(194, 24, 91, 0.12);
  --luc: #5b616b;      /* 特殊: グレー */
  --luc-soft: rgba(91, 97, 107, 0.12);
  --fashion: #9d3fc8;
  --fashion-soft: rgba(157, 63, 200, 0.12);
  /* セール識別色 */
  --sale-spring: #e62656;
  --sale-choice: #c99300;
  --sale-wallet: #9d3fc8;
  --sale-outside: #6b6f78;
  --row-h: 78px;
}
html.dark {
  /* Material 3 dark + iOS 26 dark tone */
  --bg: #0a0b0d;
  --surface: #1c1d20;
  --surface-2: #292b2f;
  --surface-3: #3a3d42;
  --surface-4: #4d5057;
  --separator: rgba(140, 144, 152, 0.40);
  --text: #f5f6f8;
  --text-2: rgba(240, 242, 246, 0.82);
  --text-3: rgba(240, 242, 246, 0.58);
  --accent: #66adff;
  --accent-soft: rgba(102, 173, 255, 0.20);
  --success: #6fe2a8;
  --success-soft: rgba(111, 226, 168, 0.20);
  --warning: #ffb070;
  --warning-soft: rgba(255, 176, 112, 0.20);
  --danger: #ff8080;
  --danger-soft: rgba(255, 128, 128, 0.20);
  /* タイプ色 (暗背景向け明度調整・カノニカル統一パレット) */
  --normal: #80df9d;   /* 通常: 緑 */
  --normal-soft: rgba(128, 223, 157, 0.22);
  --glo: #c4a3f0;      /* グローバル: 紫 */
  --glo-soft: rgba(196, 163, 240, 0.22);
  --sma: #92a5ff;      /* セール限定IFP: 青 */
  --sma-soft: rgba(146, 165, 255, 0.22);
  --ifp: #ff9a52;      /* セール期間外IFP: 橙 */
  --ifp-soft: rgba(255, 154, 82, 0.22);
  --biz: #5ccfd9;      /* ビジネス: シアン */
  --biz-soft: rgba(92, 207, 217, 0.20);
  --blog: #f06ba0;     /* 当サイト発行: ピンク */
  --blog-soft: rgba(240, 107, 160, 0.22);
  --luc: #9aa0a8;      /* 特殊: グレー */
  --luc-soft: rgba(154, 160, 168, 0.22);
  --fashion: #d98aef;
  --fashion-soft: rgba(217, 138, 239, 0.22);
}
/* ===== 高コントラスト配色 (色覚多様性に配慮・識別しやすいタイプ色) ===== */
html.cb-safe {
  --normal: #1b7837;  /* 緑 */
  --glo: #6a1b9a;     /* 紫 */
  --sma: #1565c0;     /* 青 */
  --ifp: #b35806;     /* 焦茶橙 */
  --biz: #00695c;     /* 深ティール */
  --blog: #ad1457;    /* 濃ピンク */
  --luc: #424242;     /* グレー */
}
html.cb-safe.dark {
  --normal: #66bb6a;
  --glo: #ce93d8;
  --sma: #64b5f6;
  --ifp: #ffa726;
  --biz: #4db6ac;
  --blog: #f06292;
  --luc: #bdbdbd;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ==== 本番モード: 全画面アプリ表示、テーマ干渉除去 ==== */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--surface-2);
  color: var(--text);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
html.dark body { background: var(--bg); }

/* テーマヘッダー・フッター・サイドバーを完全に隠す */
body.page-id-5456 #header,
body.page-id-5456 .site-header,
body.page-id-5456 #masthead,
body.page-id-5456 #footer,
body.page-id-5456 .site-footer,
body.page-id-5456 .footer-wrap,
body.page-id-5456 #sidebar,
body.page-id-5456 .sidebar,
body.page-id-5456 .breadcrumbs,
body.page-id-5456 .breadcrumb,
body.page-id-5456 .post-meta,
body.page-id-5456 .entry-header,
body.page-id-5456 .post-info,
body.page-id-5456 .author-box,
body.page-id-5456 .related-posts,
body.page-id-5456 .comments-area,
body.page-id-5456 #comments,
body.page-id-5456 .nav-links,
body.page-id-5456 .post-navigation,
body.page-id-5456 #respond,
body.page-id-5456 .pagenav,
body.page-id-5456 .crumbs,
body.page-id-5456 .post-share,
body.page-id-5456 .single-meta,
body.page-id-5456 .ad,
body.page-id-5456 ins,
body.page-id-5456 .adsbygoogle,
body.page-id-5456 .scroll-to-top,
body.page-id-5456 .gotop,
body.page-id-5456 #gotop { display: none !important; }

/* テーマのコンテナ制約を解除して全画面に */
body.page-id-5456,
body.page-id-5456 #page,
body.page-id-5456 #wrapper,
body.page-id-5456 #content,
body.page-id-5456 #primary,
body.page-id-5456 #main,
body.page-id-5456 .container,
body.page-id-5456 .wrap,
body.page-id-5456 .content-wrap,
body.page-id-5456 .entry-content,
body.page-id-5456 .post-content,
body.page-id-5456 article,
body.page-id-5456 .single-content,
body.page-id-5456 .article-content,
body.page-id-5456 .col-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* アプリ用ルートコンテナ */
.app-root {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface-2);
  position: relative;
}
html.dark .app-root { background: var(--bg); }

/* ==== Nav ==== */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 20px 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* スクロール時の再描画ジッター(若干の上下動)対策: 独立した合成レイヤーに固定する */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.dark .nav { background: color-mix(in srgb, var(--bg) 82%, transparent); }

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand svg { display: block; }
.brand-text { font-size: 11px; color: var(--text-2); font-weight: 500; letter-spacing: 0.04em; }

.title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.title-block h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.live-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
/* 件数 (LIVEピルの横、小さく) */
.title-count {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 更新時刻 (タイトル行、右端に、少し目立つ) */
.title-update {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  padding: 4px 9px 4px 8px;
  border-radius: 10px;
}
.title-update svg { opacity: 0.7; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ローディング・エラー表示の共通スタイル */
.state-msg {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.state-icon {
  display: block;
}
.state-error .state-icon { color: var(--danger); }
.state-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  margin-top: 4px;
}
.state-sub {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.state-loading .state-sub { color: var(--text-2); }
.state-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.2px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.meta-row {
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
}
.meta-row svg { vertical-align: -2px; opacity: 0.6; margin-right: 4px; }

/* ==== Type tabs ==== */
.type-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0.5px solid var(--separator);
  margin: 10px -20px 0;
  padding: 0 20px;
}
.type-tabs::-webkit-scrollbar { display: none; }
.type-tab {
  padding: 10px 0 10px;
  margin-right: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.type-tab:last-child { margin-right: 20px; }
.type-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.type-tab[data-f="all"].active { border-bottom-color: var(--text); }
.type-tab[data-f="active"].active { border-bottom-color: var(--success); }
/* アクティブ下線色 = 各種別のドット色(JSの::before)に厳密一致 */
.type-tab[data-f="normal"].active   { border-bottom-color: var(--normal); }
.type-tab[data-f="glo"].active      { border-bottom-color: var(--glo); }
.type-tab[data-f="sma"].active      { border-bottom-color: var(--sma); }
.type-tab[data-f="ifp"].active      { border-bottom-color: var(--ifp); }
.type-tab[data-f="blog"].active     { border-bottom-color: var(--blog); }
.type-tab[data-f="business"].active { border-bottom-color: var(--biz); }
.type-tab[data-f="luc"].active      { border-bottom-color: var(--luc); }

/* タブ内マーク (SVG用、色ドットの代替) */
.tab-mark {
  margin-right: 5px;
  vertical-align: -1px;
  color: var(--text-3);
}
.type-tab[data-f="all"] .tab-mark { color: var(--text-3); }
.type-tab[data-f="active"] .tab-mark { color: var(--success); }
.type-tab.active[data-f="all"] .tab-mark { color: var(--text); }
.type-tab.active[data-f="active"] .tab-mark { color: var(--success); }

/* 非アクティブでも左に色ドットを置いて色と対応を予感させる */
.type-tab[data-f="sma"]::before,
.type-tab[data-f="ifp"]::before,
.type-tab[data-f="blog"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}
.type-tab[data-f="sma"]::before { background: var(--sma); }
.type-tab[data-f="ifp"]::before { background: var(--ifp); }
.type-tab[data-f="blog"]::before { background: var(--blog); }
.type-tab .count {
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.type-tab.active .count { color: var(--text-2); }

/* Budget calculator */
.budget {
  margin: 12px 16px 0;
  background: linear-gradient(135deg, #0a7aff 0%, #0654b8 100%);
  border-radius: 18px;
  padding: 12px 14px 12px 14px;
  color: white;
  position: relative;
  overflow: hidden;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(10, 122, 255, 0.18);
}
html.dark .budget {
  background: linear-gradient(135deg, #1e6cd9 0%, #0a3a82 100%);
  box-shadow: 0 4px 18px rgba(10, 122, 255, 0.28);
}
.budget::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  pointer-events: none;
}

/* 上段: 横並び、左=入力、右=結果、ベースライン揃え */
.budget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.budget-left {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.budget-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.budget-input-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.budget-yen {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1;
}
.budget-input {
  background: transparent;
  border: none;
  color: white;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  width: 105px;
  outline: none;
  padding: 0;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.budget-input::placeholder { color: rgba(255,255,255,0.45); font-weight: 600; }

/* 右側: 結果表示エリア */
.budget-result {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.1;
  text-align: right;
}
/* empty状態: 案内テキスト */
.budget-result.empty .result-main {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1.35;
  text-align: right;
  display: block;
  white-space: normal;
}
.budget-result.empty .result-sub { display: none; }
/* 結果表示中: メイン行 */
.budget-result:not(.empty) .result-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.result-yen {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.result-amount {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.result-off {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-left: 2px;
}
/* % バッジ (濃い青丸) */
.result-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 5px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.result-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}

.budget-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background: transparent;
  outline: none;
  margin: 0;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}
/* track (中の薄いバー) */
.budget-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin-top: 11px;
}
.budget-slider::-moz-range-track {
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-top: -5.5px;
}
.budget-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border: none;
}

/* Section header */
.section-header {
  padding: 16px 20px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-header h2 { font-size: 14px; font-weight: 600; color: var(--text); }
.section-header .right { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ==== List ==== */
.list {
  margin: 0 16px;
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 25, 40, 0.04), 0 0 0 0.5px var(--separator);
}

.row-wrap { position: relative; transition: background 0.2s; }
.row-wrap:not(:last-child) .row::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: var(--separator);
}
.row-wrap.best { background: var(--accent-soft); }
.row-wrap.best .row::before { width: 4px !important; }

.row {
  display: grid;
  /* コード列は最低108pxを確保しつつ、長いコードや端末のフォント拡大時は内容に合わせて伸ばす
     (固定108pxだとコードが省略表示=…で切れるため) */
  grid-template-columns: minmax(0, 1fr) minmax(108px, max-content);
  gap: 8px;
  padding: 0 32px 0 18px;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
  height: var(--row-h);
}
.row:active { background: var(--surface-2); }
.row.expired { opacity: 0.5; }
.row-wrap.best .row:active { background: rgba(10, 122, 255, 0.12); }

.row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 1.5px 1.5px 0;
  background: var(--text-3);
  transition: width 0.2s;
}
.row[data-type="ifp"]::before { background: var(--ifp); }
.row[data-type="sma"]::before { background: var(--sma); }
.row[data-type="normal"]::before { background: var(--normal); }
.row[data-type="glo"]::before { background: var(--glo); }
.row[data-type="blog"]::before { background: var(--blog); }
.row[data-type="business"]::before { background: var(--biz); }
.row[data-type="luc"]::before { background: var(--luc); }
.row.expired::before { background: var(--text-3); }

.row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 10px 0;
  gap: 7px;
  overflow: hidden;
}

/* === 上段: 価格 === */
.price-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
  min-height: 22px;
  min-width: 0;
}
.price-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
/* 桁数対応: data-len属性で自動調整 */
.price-line[data-len="5"] .price-num { font-size: 20px; }
.price-line[data-len="6"] .price-num { font-size: 18px; }
.price-line[data-len="7"] .price-num { font-size: 17px; }
.price-off {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.price-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* 中央揃え＋固定幅で桁数(10%/10.7%/12.1%)による幅変化をなくす */
  gap: 2px;
  height: 19px;
  min-width: 62px;
  padding: 0 7px;
  box-sizing: border-box;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.price-pct svg { flex-shrink: 0; }

/* === 下段: 情報バッジ群 === */
.info-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  min-width: 0;
  overflow: hidden;
}
/* 最低金額 (主役バッジ) */
.min-chip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;  /* 桁数で幅が変わらないよう固定幅＋中央揃え(後続のロック位置も揃う) */
  min-width: 95px;
  box-sizing: border-box;
  padding: 2px 9px;
  background: var(--surface-3);
  color: var(--text);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.min-suffix {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 2px;
  letter-spacing: 0.04em;
}
/* アイコンのみの円形バッジ */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 0;
}
/* バッジ内SVGはブロック化して中央に配置(インラインのベースライン余白でズレるのを防ぐ) */
.icon-badge svg { display: block; }
/* カテゴリアイコンバッジ (汎用、data-catで色切替) */
.icon-badge.category-icon {
  background: var(--surface-3);
  color: var(--text-2);
}
.icon-badge.category-icon[data-cat="fashion"] {
  background: var(--fashion-soft);
  color: var(--fashion);
}
html.dark .icon-badge.category-icon[data-cat="fashion"] { background: rgba(205, 114, 240, 0.18); }
.icon-badge.category-icon[data-cat="home_garden"] {
  background: rgba(90, 141, 62, 0.12);
  color: #5a8d3e;
}
html.dark .icon-badge.category-icon[data-cat="home_garden"] {
  background: rgba(120, 180, 90, 0.18);
  color: #8ec570;
}
/* 在庫なし(かも)＝赤丸なし・赤いロックアイコンのみ(僅かに上に配置) */
.icon-badge.warn-icon {
  background: transparent;
  box-shadow: none;
  color: #ff3b30;
  position: relative;
  top: 1.5px;
}
html.dark .icon-badge.warn-icon { background: transparent; box-shadow: none; color: #ff5a52; }

/* あと¥XX — 超過金額バッジ (省スペース版) */
.shortby {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px 2px 5px;
  background: rgba(255, 149, 0, 0.14);
  color: var(--warning);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  margin-left: auto;
}
html.dark .shortby { background: rgba(255, 159, 10, 0.22); }
.shortby svg { flex-shrink: 0; }

/* 予約クーポン: 使用開始日バッジ (表示専用・青=これから使える) */
.start-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.start-badge svg { flex-shrink: 0; }
.code-start-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 9px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.code-start-chip svg { flex-shrink: 0; }

/* === 右カラム: 残り時間 + コード === */
.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 10px 0;
}
/* 下段ラッパ: code-chip + chevron を横並び */
.code-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.code-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
  flex: 0 1 auto;
  overflow: visible; /* コードを省略せず全表示 */
}
/* deadline = 右カラム上部、code-chipの右端と揃える */
.deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9.5px;
  color: rgba(40, 44, 56, 0.82); /* a11y: コントラスト確保 */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 3px 8px 3px 7px;
  background: transparent;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1;
}
html.dark .deadline { color: rgba(240, 242, 246, 0.82); } /* a11y: ダーク時コントラスト確保 */
.deadline svg { opacity: 0.7; flex-shrink: 0; }
.deadline.hot {
  color: var(--danger);
  background: rgba(255, 59, 48, 0.1);
}
html.dark .deadline.hot { background: rgba(255, 69, 58, 0.22); }
.deadline.hot svg { opacity: 1; }
.deadline.soon {
  color: var(--warning);
  background: rgba(255, 149, 0, 0.12);
}
html.dark .deadline.soon { background: rgba(255, 159, 10, 0.22); }
.deadline.soon svg { opacity: 1; }

/* Out-of-stock code entry in expanded list (在庫ないかも = ロックマークに合わせ薄い赤) */
.code-item.out-of-stock {
  background: rgba(255, 59, 48, 0.07);
}
html.dark .code-item.out-of-stock { background: rgba(255, 90, 82, 0.1); }
.code-item.out-of-stock .code-meta { color: var(--danger); font-weight: 600; }
/* out-of-budget: 価格は薄く、差額(shortby)は警告色で目立つまま */
.row-wrap.out-of-budget .row {
  background: var(--surface-2);
}
.row-wrap.out-of-budget .price-num,
.row-wrap.out-of-budget .price-off {
  color: var(--text-3);
}
.row-wrap.out-of-budget .price-pct {
  background: var(--surface-3);
  color: var(--text-3);
}
.row-wrap.out-of-budget .min-chip {
  background: var(--surface-2);
  color: var(--text-3);
  border: 0.5px solid var(--separator);
}
.row-wrap.out-of-budget .min-chip svg {
  color: var(--text-3);
  opacity: 0.5;
}
.row-wrap.out-of-budget .code-chip {
  opacity: 0.55;
}

/* グループ全体が使用済み: 薄く + 打ち消し線風の視覚 */
.row-wrap.all-used .row { opacity: 0.55; }
.row-wrap.all-used .row .price-num,
.row-wrap.all-used .row .price-off {
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  text-decoration-color: var(--text-3);
}
.row-wrap.all-used .code-chip {
  background: var(--surface-3) !important;
  color: var(--text-3) !important;
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}
.row-wrap.all-used .deadline {
  background: var(--success) !important;
  color: #fff !important;
}
.row-wrap.all-used .deadline svg {
  opacity: 1 !important;
  display: none;
}
.row-wrap.all-used .deadline::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 5.2 L4 7.5 L8.5 2.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.deadline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 2px 7px 2px 6px;
  background: var(--surface-3);
  border-radius: 10px;
  height: 20px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.deadline svg { opacity: 0.7; flex-shrink: 0; }
.deadline.hot {
  color: var(--danger);
  background: rgba(255, 59, 48, 0.1);
}
html.dark .deadline.hot { background: rgba(255, 69, 58, 0.18); }
.deadline.hot svg { opacity: 1; }
.deadline.soon {
  color: var(--warning);
  background: rgba(255, 149, 0, 0.12);
}
html.dark .deadline.soon { background: rgba(255, 159, 10, 0.2); }
.deadline.soon svg { opacity: 1; }

.code-chip {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
  padding: 5px 9px;
  background: var(--surface-2);
  border-radius: 8px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  min-width: 0;
  overflow: visible;      /* 省略(…)せずコード全体を表示 */
  text-overflow: clip;
}
.row-wrap.best .code-chip {
  background: var(--accent);
  color: #fff;
}
.code-chip.placeholder { color: var(--text-3); font-weight: 500; }
/* コードはタップでコピー＋リンク起動。コード左にコピーアイコンを内包(::beforeなので代表コード差し替えでも消えない) */
.code-chip:not(.placeholder)::before {
  content: "";
  width: 11px; height: 11px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.62;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='7' height='8' rx='1.3'/%3E%3Cpath d='M2 9.5V2.5a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='7' height='8' rx='1.3'/%3E%3Cpath d='M2 9.5V2.5a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.12s, transform 0.12s;
}
.code-block:active .code-chip { background: var(--accent-soft); }
.code-block:active .code-chip::before { opacity: 1; transform: scale(0.9); }
.row-wrap.best .code-chip::before { opacity: 0.95; }
.alt {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 6px;
  background: var(--surface-3);
  border-radius: 8px;
  flex-shrink: 0;
}
.alt.empty { display: none; }

/* deadline + alt(+N) を横並び */
.deadline-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* chevron: row 全体の右中央に配置 */
.chevron-svg {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  color: var(--text-2);
  opacity: 0.5;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.row-wrap.open .chevron-svg {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0.85;
}

/* Expand */
.expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.row-wrap.open .expand { max-height: 700px; }
.expand-inner { padding: 4px 16px 14px 18px; }
.expand-label {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 2px 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* カテゴリ限定バナー (展開エリア最上部) */
.category-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.3;
}
.category-banner[data-cat="fashion"] {
  background: var(--fashion-soft);
  color: var(--fashion);
  border: 0.5px solid rgba(181, 82, 224, 0.2);
}
html.dark .category-banner[data-cat="fashion"] {
  background: rgba(205, 114, 240, 0.1);
  border-color: rgba(205, 114, 240, 0.3);
  color: #d893ff;
}
.category-banner[data-cat="home_garden"] {
  background: rgba(90, 141, 62, 0.08);
  color: #4d7a36;
  border: 0.5px solid rgba(90, 141, 62, 0.2);
}
html.dark .category-banner[data-cat="home_garden"] {
  background: rgba(120, 180, 90, 0.1);
  border-color: rgba(120, 180, 90, 0.3);
  color: #a4d186;
}
.category-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.category-banner-text {
  flex: 1;
  min-width: 0;
}
.category-banner-text strong {
  font-weight: 700;
  margin-right: 2px;
}
.code-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
}
.code-item.dead { opacity: 0.65; }
.code-item.dead .cpbtn.dead-btn { opacity: 1; }
.code-item.dead .code-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.code-dot { flex-shrink: 0; }

/* code-info: 2行縦flex (コード+カテゴリ / 種類) */
.code-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.code-line-1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.code-line-2 {
  display: flex;
  align-items: center;
  min-height: 12px;
}

.code-text {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 展開後の各行のカテゴリチップ (アイコン+テキスト) */
.code-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 9px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  height: 18px;
  line-height: 1;
}
.code-cat-chip svg { flex-shrink: 0; }
.code-cat-chip[data-cat="fashion"] {
  background: var(--fashion-soft);
  color: var(--fashion);
}
html.dark .code-cat-chip[data-cat="fashion"] { background: rgba(205, 114, 240, 0.18); }
.code-cat-chip[data-cat="home_garden"] {
  background: rgba(90, 141, 62, 0.12);
  color: #5a8d3e;
}
html.dark .code-cat-chip[data-cat="home_garden"] {
  background: rgba(120, 180, 90, 0.18);
  color: #8ec570;
}
.cpbtn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  width: 72px;
  flex-shrink: 0;
  box-sizing: border-box;
  letter-spacing: 0.02em;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
}
.cpbtn svg { flex-shrink: 0; }
.cpbtn:active { opacity: 0.75; transform: scale(0.97); }
.cpbtn:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  pointer-events: none;
  cursor: default;
}
/* dead-btn: 視覚的に無効感を保ちつつクリック可能 (コピー専用) */
.cpbtn.dead-btn {
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
}
.cpbtn.dead-btn:active {
  opacity: 0.75;
  transform: scale(0.97);
}
.code-item.dead .cpbtn:not(.dead-btn) {
  background: var(--surface-3);
  color: var(--text-3);
  pointer-events: none;
  cursor: default;
}

/* 使用済みトグルボタン (円形アイコンのみ) */
.used-toggle {
  background: transparent;
  border: 1.2px solid var(--separator);
  color: var(--text-3);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.15s;
}
.used-toggle:active { transform: scale(0.9); }
.used-toggle:hover { border-color: var(--success); color: var(--success); }
.code-item.used .used-toggle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* 使用済みの見た目 */
.code-item.used {
  opacity: 0.55;
}
.code-item.used .code-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-2);
}
.code-item.used .code-meta {
  color: var(--success);
  font-weight: 600;
}
.code-item.used .cpbtn {
  background: var(--surface-3);
  color: var(--text-2);
}
html.dark .code-item.used .cpbtn {
  background: var(--surface-4);
  color: var(--text-3);
}

/* ==== Guide (クーポンの種類 / 使い方) ==== */
.guide {
  margin: 20px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-section {
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 25, 40, 0.04), 0 0 0 0.5px var(--separator);
}
.guide-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.guide-head::-webkit-details-marker { display: none; }
.guide-head svg:first-child { color: var(--text-2); flex-shrink: 0; }
.guide-head span { flex: 1; }
.guide-chev {
  color: var(--text-3);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  flex-shrink: 0;
}
details[open] .guide-chev { transform: rotate(90deg); }

.guide-body {
  padding: 0 14px 14px;
  border-top: 0.5px solid var(--separator);
  padding-top: 10px;
}
.guide-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  font-size: 11.5px;
  line-height: 1.55;
}
.guide-dl dt {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding-left: 10px;
  position: relative;
  display: flex;
  align-items: center;
}
/* 左の色バー */
.guide-dl dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 1.5px;
  background: var(--text-3);
}
/* ガイド凡例の色はカード/タブのタイプ色トークンに統一（ダークも自動追従） */
.guide-dl dt.gt-normal::before { background: var(--normal); }
.guide-dl dt.gt-glo::before { background: var(--glo); }
.guide-dl dt.gt-sma::before { background: var(--sma); }
.guide-dl dt.gt-ifp::before { background: var(--ifp); }
.guide-dl dt.gt-blog::before { background: var(--blog); }
.guide-dl dt.gt-biz::before { background: var(--biz); }
.guide-dl dt.gt-luc::before { background: var(--luc); }
.guide-dl dd {
  color: var(--text-2);
  margin: 0;
}

.guide-p {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 8px;
}
.guide-p:last-child { margin-bottom: 0; }

/* 使い方の手順リスト */
.guide-steps {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.guide-step-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.guide-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}
.guide-tip-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.guide-tip > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-tip strong {
  font-weight: 700;
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==== Saver CTA (AliExpress 公式Saverデザインに忠実) ==== */
.saver-cta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(135deg, #ffe9e9 0%, #ffdcdc 50%, #ffe9e9 100%);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(230, 46, 4, 0.08);
  transition: transform 0.15s, box-shadow 0.2s;
}
.saver-cta:active {
  transform: scale(0.985);
}
html.dark .saver-cta {
  background: linear-gradient(135deg, #3a1a1a 0%, #2a1212 100%);
  color: #fff;
}

/* ヘッダー行: ロゴ+キャッチコピー+chevron */
.saver-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 10px;
}
.saver-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.saver-logo-a-mark {
  display: inline-flex;
  align-items: center;
  margin-right: -2px;
  margin-top: -1px;
}
.saver-logo-aliexpress {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1;
}
html.dark .saver-logo-aliexpress { color: #fff; }
.saver-logo-saver {
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #e62e04;
  line-height: 1;
  margin-left: 3px;
  position: relative;
}
/* "S"の先端に装飾ボルト */
.saver-logo-saver::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #e62e04;
}

.saver-headline {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .saver-headline { color: rgba(255,255,255,0.7); }
.saver-headline strong {
  font-weight: 700;
  color: #e62e04;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.saver-divider {
  color: rgba(230, 46, 4, 0.3);
  margin-right: 4px;
  font-weight: 300;
}
.saver-chev {
  color: rgba(230, 46, 4, 0.55);
  flex-shrink: 0;
}

/* 下の白カードコンテナ */
.saver-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html.dark .saver-cards {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.saver-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  min-width: 0;
  position: relative;
}
/* セパレーター線 */
.saver-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 0.5px;
  background: rgba(230, 46, 4, 0.12);
}

.saver-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.saver-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.saver-card-main {
  font-size: 13px;
  font-weight: 800;
  color: #e62e04;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saver-card-main-sm {
  font-size: 12px;
}
.saver-card-unit {
  font-size: 10px;
  font-weight: 700;
  margin-left: 1px;
}
.saver-card-sub {
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .saver-card-sub { color: rgba(255,255,255,0.55); }

/* ==== LINE OpenChat CTA (Saver下、コンパクト横長) ==== */
.line-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid rgba(6, 199, 85, 0.2);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.2s, background 0.15s;
  position: relative;
  overflow: hidden;
}
.line-cta:active {
  transform: scale(0.985);
  background: rgba(6, 199, 85, 0.04);
}
html.dark .line-cta {
  background: var(--surface);
  border-color: rgba(6, 199, 85, 0.3);
}

.line-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #06C755;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-body {
  flex: 1;
  min-width: 0;
}
.line-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.line-kicker {
  font-weight: 700;
  color: #06C755;
  margin-left: 4px;
}
.line-desc {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.3;
}

.line-arrow {
  color: var(--text-3);
  flex-shrink: 0;
}

/* ==== AliExpress Business CTA ==== */
.biz-cta {
  display: block;
  padding: 14px 14px 12px;
  border-radius: 18px;
  text-decoration: none;
  background: linear-gradient(135deg, #4d57ff 0%, #6068ff 50%, #7c84ff 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(81, 88, 255, 0.28);
  transition: transform 0.12s, box-shadow 0.2s;
}
.biz-cta:active {
  transform: scale(0.985);
  box-shadow: 0 4px 14px rgba(81, 88, 255, 0.22);
}
html.dark .biz-cta {
  background: linear-gradient(135deg, #4148e0 0%, #5860f0 50%, #6c74ff 100%);
  box-shadow: 0 6px 20px rgba(81, 88, 255, 0.4);
}
/* 装飾: 右上に薄い円形ハイライト */
.biz-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* ヘッダ: ロゴ + タグ */
.biz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.biz-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.biz-ali { color: #fff; }
.biz-arrow-mark {
  display: inline-flex;
  align-items: center;
  margin: 0 1px;
}
.biz-name {
  color: #fff;
  font-style: italic;
}
.biz-tag {
  font-size: 10px;
  font-weight: 700;
  color: #fff; /* 親aがaccent色(青)を継承してしまい背景に溶けるため白を明示 */
  background: rgba(255,255,255,0.26);
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 3カード(限定クーポン / 複数 / 登録無料) */
.biz-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.biz-card {
  background: rgba(255,255,255,0.16);
  border: 0.5px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 8px 6px 9px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.biz-card-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}
.biz-card-sub {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* CTAテキスト + 矢印 */
.biz-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}
.biz-foot svg {
  flex-shrink: 0;
}

/* ==== Floating Action Buttons ==== */
.fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 0.5px solid var(--separator);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s, box-shadow 0.2s;
  padding: 0;
}
html.dark .fab {
  background: rgba(44, 44, 46, 0.95);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.fab:active { transform: scale(0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.fab svg { color: var(--text); }

.fab.top {
  right: max(16px, calc(50vw - 240px + 16px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.fab.top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab.settings {
  left: max(16px, calc(50vw - 240px + 16px));
  opacity: 1;
  pointer-events: auto;
}

/* ==== Settings bottom sheet ==== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 100;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 101;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet.open { transform: translateX(-50%) translateY(0); }
html.dark .sheet { background: var(--surface); }

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  margin: 8px auto 6px;
}
.sheet-head {
  padding: 6px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--separator);
}
.sheet-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sheet-close {
  background: var(--surface-2);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.sheet-close:active { opacity: 0.7; }

.sheet-section {
  padding: 14px 20px 16px;
  border-bottom: 0.5px solid var(--separator);
}
.sheet-section:last-child { border-bottom: none; }
.sheet-section .label {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sheet-section .label svg {
  flex-shrink: 0;
  color: var(--text-3);
  margin-bottom: 1px;
}

.pill-group {
  display: flex;
  background: rgba(120, 120, 128, 0.12);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
html.dark .pill-group { background: rgba(120, 120, 128, 0.24); }
.pill {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 4px;
  border-radius: 7px;
  cursor: pointer;
}
.pill.active {
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-weight: 600;
}
html.dark .pill.active { background: #636366; box-shadow: none; }

.sale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sale-chip {
  border: 1.5px solid var(--surface-3);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.sale-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.sale-chip.spring { border-color: var(--sale-spring); color: var(--sale-spring); }
.sale-chip.spring.active { background: var(--sale-spring); color: #fff; }
.sale-chip.choice { border-color: var(--sale-choice); color: var(--warning); }
.sale-chip.choice.active { background: var(--sale-choice); color: #000; }
.sale-chip.wallet { border-color: var(--sale-wallet); color: var(--sale-wallet); }
.sale-chip.wallet.active { background: var(--sale-wallet); color: #fff; }
.sale-chip.outside { border-color: var(--sale-outside); color: var(--text-2); }
.sale-chip.outside.active { background: var(--sale-outside); color: #fff; }

.copy-only-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}
.copy-only-row .label-text { font-size: 13px; color: var(--text); font-weight: 500; }
.copy-only-row .description { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* Notification help text */
.notif-help {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  display: none;
}
.notif-help.show { display: block; }
.notif-help.error {
  color: var(--danger);
  background: rgba(255, 59, 48, 0.08);
}
.notif-help.success {
  color: var(--success);
  background: rgba(52, 199, 89, 0.08);
}

/* 「全解除」ボタン (使用済みクリア) */
.clear-used-btn {
  background: transparent;
  border: 1px solid var(--separator);
  color: var(--danger);
  padding: 6px 12px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clear-used-btn svg { flex-shrink: 0; }
.clear-used-btn:active { opacity: 0.7; }
.clear-used-btn:disabled {
  color: var(--text-3);
  pointer-events: none;
}

.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.switch-track {
  width: 44px;
  height: 26px;
  background: var(--surface-3);
  border-radius: 22px;
  position: relative;
  transition: background 0.2s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: left 0.2s;
}
.switch input { display: none; }
.switch input:checked + .switch-track { background: var(--success); }
.switch input:checked + .switch-track::after { left: 20px; }

/* Copy-only compact mode */
.copy-only .row-main { display: none; }
.copy-only .deadline { display: none; }
.copy-only .row {
  grid-template-columns: 1fr auto;
  padding: 0 14px 0 18px;
  height: 52px;
}
.copy-only .row-main-compact {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  align-self: center;
  font-variant-numeric: tabular-nums;
}
.copy-only .row-main-compact .ccp-pct {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  margin-left: 4px;
}
.copy-only .row::before { top: 10px; bottom: 10px; }
.row-main-compact { display: none; }

/* Toast */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(20px);
  color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .code { font-family: "SF Mono", ui-monospace, monospace; font-weight: 600; }


/* === DUXテーマ干渉除去 (固定ページID 5456 専用) === */
body.page-id-5456 > header,
body.page-id-5456 > .header,
body.page-id-5456 .site-header,
body.page-id-5456 #masthead,
body.page-id-5456 #header,
body.page-id-5456 .gotop,
body.page-id-5456 .scroll-top,
body.page-id-5456 .breadcrumbs,
body.page-id-5456 .article-meta,
body.page-id-5456 .article-tags,
body.page-id-5456 .post-share,
body.page-id-5456 .author-bio,
body.page-id-5456 .post-related,
body.page-id-5456 > footer,
body.page-id-5456 .copyright,
body.page-id-5456 .post-title,
body.page-id-5456 .article-title,
body.page-id-5456 h1.entry-title,
body.page-id-5456 .single-meta,
body.page-id-5456 .meta-list,
body.page-id-5456 .post-info,
body.page-id-5456 .footer-wrap,
body.page-id-5456 .site-footer { display: none !important; }

body.page-id-5456 .container,
body.page-id-5456 section.container,
body.page-id-5456 .pagecontent,
body.page-id-5456 .article-content,
body.page-id-5456 article.article-content,
body.page-id-5456 .grid-container,
body.page-id-5456 main,
body.page-id-5456 #main,
body.page-id-5456 #primary {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: block !important;
  float: none !important;
}

body.page-id-5456 {
  margin: 0 !important;
  padding: 0 !important;
  background: #f0f2f6 !important;
}
html.dark body.page-id-5456 { background: #0a0b0d !important; }

body.page-id-5456 .app-root a,
body.page-id-5456 .app-root a:hover,
body.page-id-5456 .app-root a:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}

body.page-id-5456 .app-root nav,
body.page-id-5456 .app-root header { display: block !important; }


/* ==== 「すべてのクーポン」 セクション見出し非表示 ==== */
body.page-id-5456 .app-root section .section-heading,
body.page-id-5456 .app-root section > h2,
body.page-id-5456 .app-root section .section-toggle,
body.page-id-5456 .app-root .all-coupons-heading,
body.page-id-5456 .app-root #section-title,
body.page-id-5456 .app-root .section-header {
  display: none !important;
}


/* ==== 追加タブの tab-mark カラー ==== */
body.page-id-5456 .app-root .type-tab[data-f="normal"] .tab-mark { color: #e53935; }  /* グレー: クーポン (一般) */
body.page-id-5456 .app-root .type-tab[data-f="glo"] .tab-mark { color: #4caf50; }      /* 緑: グローバル(ドット::beforeと統一) */
body.page-id-5456 .app-root .type-tab[data-f="business"] .tab-mark { color: #8b5cf6; } /* 紫: ビジネス */
body.page-id-5456 .app-root .type-tab[data-f="luc"] .tab-mark { color: #ec4899; }      /* ピンク: 特殊 */


/* ==== 0件タブを末尾に表示 ==== */
body.page-id-5456 .app-root .type-tabs {
  display: flex;
  align-items: center;
}
body.page-id-5456 .app-root .type-tab {
  order: 0;  /* デフォルト */
}
body.page-id-5456 .app-root .type-tab.empty {
  order: 9;  /* 末尾 */
  opacity: 0.45;
}

/* === 追加分: 新タブ ドット色 + 見出し非表示 + 0件タブ末尾 === */
/* 「すべてのクーポン」 見出し非表示 */
body.page-id-5456 .app-root section .section-heading,
body.page-id-5456 .app-root section > h2,
body.page-id-5456 .app-root section .section-toggle,
body.page-id-5456 .app-root .all-coupons-heading {
  display: none !important;
}

/* 追加4タブ::before ドット色 */
body.page-id-5456 .app-root .type-tab[data-f="normal"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--normal); /* 通常: 緑 */
  margin-right: 6px;
}
body.page-id-5456 .app-root .type-tab[data-f="glo"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glo); /* グローバル: 紫 */
  margin-right: 6px;
}
body.page-id-5456 .app-root .type-tab[data-f="business"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--biz); /* ビジネス: シアン */
  margin-right: 6px;
}
body.page-id-5456 .app-root .type-tab[data-f="luc"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--luc); /* 特殊: グレー */
  margin-right: 6px;
}

/* 0件タブ (.empty クラス) を末尾に並び替え */
body.page-id-5456 .app-root .type-tabs { display: flex; align-items: center; }
body.page-id-5456 .app-root .type-tab { order: 0; }
body.page-id-5456 .app-root .type-tab.empty { order: 9; opacity: 0.45; }

/* svg.tab-mark で href="#i-dot" のものは表示しない (symbol未定義のため) */
body.page-id-5456 .app-root .type-tab[data-f="normal"] .tab-mark,
body.page-id-5456 .app-root .type-tab[data-f="glo"] .tab-mark,
body.page-id-5456 .app-root .type-tab[data-f="business"] .tab-mark,
body.page-id-5456 .app-root .type-tab[data-f="luc"] .tab-mark {
  display: none !important;
}

/* === 復元: brand-row 非表示 + タイトル左ロゴ + cat-chip + pill デザイン === */
/* Aアイコン + ali-toku.com 表示行を非表示 */
body.page-id-5456 .app-root .brand-row,
body.page-id-5456 .app-root .brand {
  display: none !important;
}

/* タイトル左にアリ特ロゴ表示 */
body.page-id-5456 .app-root .title-block::before {
  content: "";
  display: inline-block;
  width: 36px; height: 36px;
  background-image: url("https://ali-toku.com/wp-content/uploads/2026/03/cropped-AliExpress-toku_logo-180x180.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
body.page-id-5456 .app-root .title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px; /* 中身を若干下げる */
}

/* cat-chip-list (カテゴリ除外チップ) */
body.page-id-5456 .app-root .cat-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.page-id-5456 .app-root .cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--separator);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
body.page-id-5456 .app-root .cat-chip:hover {
  background: var(--surface-3);
}
body.page-id-5456 .app-root .cat-chip.excluded {
  background: var(--surface-3);
  opacity: 0.55;
  text-decoration: line-through;
}
body.page-id-5456 .app-root .cat-chip-state {
  font-size: 10px;
  color: var(--text-3);
}
body.page-id-5456 .app-root .cat-chip-empty {
  font-size: 12px;
  color: var(--text-3);
}

/* pill-group の上下マージン (2つ並ぶ場合) */
body.page-id-5456 .app-root #sort-order-group {
  margin-top: 8px;
}

/* === 三本ボタン干渉対策 (DUXテーマヘッダー) === */
/* モバイル時、 DUXの三本ボタンが画面左上に表示されるため、
   アリ特ロゴをその分右にずらす */
@media (max-width: 720px) {
  body.page-id-5456 .app-root .title-block {
    padding-left: 28px; /* ハンバーガー回避 + さらに左に */
    gap: 4px;
    padding-top: 0;
    margin-top: -14px; /* ハンバーガー回避で上げつつ、中身を若干下げる(旧-24px) */
    margin-bottom: 0;
  }
  body.page-id-5456 .app-root .title-block::before {
    width: 30px;
    height: 30px;
    margin-right: 4px;
  }
  body.page-id-5456 .app-root .title-block h1 {
    font-size: 22px;
  }
  body.page-id-5456 .app-root .type-tabs {
    margin-top: 2px; /* タイトル↔水平タブを詰める */
  }
  body.page-id-5456 .app-root {
    padding-bottom: 96px; /* 右下/左下のフローティングボタンが最後のカードに被らないよう確保 */
  }
}
/* スクロール時に sticky ヘッダ(.nav)が上に詰まって title-block が動く問題の対策:
   ヘッダ上の余白(dux の article-header 15px + nav_fixed の padding 8px)を 0 にし、
   .nav を最初から最上部に置くことで sticky の移動量(travel)を 0 にする。 */
body.page-id-5456 .article-header { display: none !important; }
body.page-id-5456.nav_fixed .app-root {
  padding-top: 0;
}