/* ─────────────────────────────────────────
   リセット・基本
───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ─────────────────────────────────────────
     デザイントークン（shadcn/ui new-york 寄せ）
     既存の --clr-* は互換のため残置。新規は shadcn 命名に揃える。
  ───────────────────────────────────────── */

  /* 基本色（new-york: ややクールなニュートラル zinc 寄り） */
  --clr-bg:         #fafafa;   /* zinc-50 相当 */
  --clr-surface:    #ffffff;
  --clr-border:     #e4e4e7;   /* zinc-200 */
  --clr-text:       #09090b;   /* zinc-950 */
  --clr-muted:      #71717a;   /* zinc-500 */
  --clr-disabled:   #a1a1aa;   /* zinc-400 */
  --clr-reading:    #09090b;
  --clr-divider:    #e4e4e7;

  /* プライマリ（ブランド indigo 維持） */
  --clr-primary:      #4a5ec7;
  --clr-primary-rgb:  74, 94, 199;
  --clr-primary-fill:    #4a5ec7;
  --clr-primary-fill-hv: #3a4db5;
  --clr-primary-hv:      var(--clr-primary-fill-hv);

  /* ホバー / 副次色 */
  --clr-hover-bg:       #f4f4f5;   /* zinc-100：ニュートラルなホバー */
  --clr-hover-border:   #a0aadf;
  --clr-variant-bg:     #f4f4f5;
  --clr-variant-border: #e4e4e7;
  --clr-variant-text:   #52525b;   /* zinc-600 */
  --clr-chip-soft-bg:   #f0f2fb;
  --clr-code-bg:        #f4f4f5;
  --clr-code-accent:    #c7254e;
  --clr-clear-btn-bg:   #71717a;
  --clr-clear-btn-hv:   #27272a;

  /* 状態 */
  --clr-error:      #dc2626;   /* shadcn destructive */

  /* トースト */
  --clr-toast-bg:   #18181b;   /* zinc-900 */
  --clr-toast-text: #fafafa;

  /* shadcn 命名エイリアス */
  --background:           var(--clr-bg);
  --foreground:           var(--clr-text);
  --card:                 var(--clr-surface);
  --card-foreground:      var(--clr-text);
  --popover:              var(--clr-surface);
  --popover-foreground:   var(--clr-text);
  --primary:              var(--clr-primary-fill);
  --primary-foreground:   #ffffff;
  --secondary:            var(--clr-hover-bg);
  --secondary-foreground: var(--clr-text);
  --muted:                var(--clr-hover-bg);
  --muted-foreground:     var(--clr-muted);
  --accent:               var(--clr-hover-bg);
  --accent-foreground:    var(--clr-text);
  --destructive:          var(--clr-error);
  --border:               var(--clr-border);
  --input:                var(--clr-border);
  --ring:                 rgba(var(--clr-primary-rgb), .55);

  /* 角丸スケール（new-york: 0.5rem 基準＋小・中） */
  --radius:         8px;        /* card / area */
  --radius-md:      6px;        /* button / input */
  --radius-sm:      4px;        /* chip 内訳要素 */

  /* シャドウスケール（shadcn は非常に控えめ） */
  --shadow-xs:      0 1px 2px 0 rgba(0,0,0,.04);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:         0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05);
}

/* ─────────────────────────────────────────
   ダークモード
   ・初期状態は OS 設定（prefers-color-scheme）に追従
   ・ユーザーがヘッダーのトグルで明示指定した場合は
     html[data-theme="light" | "dark"] が最優先で適用される
───────────────────────────────────────── */
/* ダークモード共通トークン（new-york dark: zinc-950 / zinc-50 系） */
@media (prefers-color-scheme: dark) {
  /* ユーザーが明示的にライトを選んでいない場合のみ適用 */
  html:not([data-theme="light"]) {
    --clr-bg:         #09090b;   /* zinc-950 */
    --clr-surface:    #18181b;   /* zinc-900 */
    --clr-border:     #27272a;   /* zinc-800 */
    --clr-text:       #fafafa;   /* zinc-50 */
    --clr-muted:      #a1a1aa;   /* zinc-400 */
    --clr-disabled:   #52525b;   /* zinc-600 */
    --clr-reading:    #fafafa;
    --clr-divider:    #27272a;

    --clr-primary:         #8b99e5;
    --clr-primary-rgb:     139, 153, 229;
    --clr-primary-fill:    #4a5ec7;
    --clr-primary-fill-hv: #5d70d2;

    --clr-hover-bg:       #27272a;   /* zinc-800：ニュートラルなホバー */
    --clr-hover-border:   #6975b5;
    --clr-variant-bg:     #27272a;
    --clr-variant-border: #3f3f46;   /* zinc-700 */
    --clr-variant-text:   #d4d4d8;   /* zinc-300 */
    --clr-chip-soft-bg:   rgba(139, 153, 229, .15);
    --clr-code-bg:        #27272a;
    --clr-code-accent:    #ff8095;
    --clr-clear-btn-bg:   #3f3f46;
    --clr-clear-btn-hv:   #71717a;

    --clr-error:      #ef4444;
    --destructive:    #ef4444;

    --clr-toast-bg:   #fafafa;       /* shadcn dark Sonner: 反転して明色背景 */
    --clr-toast-text: #18181b;

    /* shadcn 命名再設定（暗色側で必要なものだけ上書き） */
    --background:           var(--clr-bg);
    --foreground:           var(--clr-text);
    --card:                 var(--clr-surface);
    --card-foreground:      var(--clr-text);
    --popover:              var(--clr-surface);
    --popover-foreground:   var(--clr-text);
    --secondary:            #27272a;
    --secondary-foreground: var(--clr-text);
    --muted:                #27272a;
    --muted-foreground:     var(--clr-muted);
    --accent:               #27272a;
    --accent-foreground:    var(--clr-text);
    --border:               var(--clr-border);
    --input:                var(--clr-border);
    --ring:                 rgba(var(--clr-primary-rgb), .65);

    --shadow-xs:      0 1px 2px 0 rgba(0,0,0,.40);
    --shadow-sm:      0 1px 2px 0 rgba(0,0,0,.45);
    --shadow:         0 1px 3px 0 rgba(0,0,0,.55), 0 1px 2px -1px rgba(0,0,0,.45);
    --shadow-md:      0 4px 6px -1px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
    --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.60), 0 4px 6px -4px rgba(0,0,0,.40);
  }
}

/* ユーザーがダークを明示指定（OS 設定より優先） */
html[data-theme="dark"] {
  --clr-bg:         #09090b;
  --clr-surface:    #18181b;
  --clr-border:     #27272a;
  --clr-text:       #fafafa;
  --clr-muted:      #a1a1aa;
  --clr-disabled:   #52525b;
  --clr-reading:    #fafafa;
  --clr-divider:    #27272a;

  --clr-primary:         #8b99e5;
  --clr-primary-rgb:     139, 153, 229;
  --clr-primary-fill:    #4a5ec7;
  --clr-primary-fill-hv: #5d70d2;

  --clr-hover-bg:       #27272a;
  --clr-hover-border:   #6975b5;
  --clr-variant-bg:     #27272a;
  --clr-variant-border: #3f3f46;
  --clr-variant-text:   #d4d4d8;
  --clr-chip-soft-bg:   rgba(139, 153, 229, .15);
  --clr-code-bg:        #27272a;
  --clr-code-accent:    #ff8095;
  --clr-clear-btn-bg:   #3f3f46;
  --clr-clear-btn-hv:   #71717a;

  --clr-error:      #ef4444;
  --destructive:    #ef4444;

  --clr-toast-bg:   #fafafa;
  --clr-toast-text: #18181b;

  --background:           var(--clr-bg);
  --foreground:           var(--clr-text);
  --card:                 var(--clr-surface);
  --card-foreground:      var(--clr-text);
  --popover:              var(--clr-surface);
  --popover-foreground:   var(--clr-text);
  --secondary:            #27272a;
  --secondary-foreground: var(--clr-text);
  --muted:                #27272a;
  --muted-foreground:     var(--clr-muted);
  --accent:               #27272a;
  --accent-foreground:    var(--clr-text);
  --border:               var(--clr-border);
  --input:                var(--clr-border);
  --ring:                 rgba(var(--clr-primary-rgb), .65);

  --shadow-xs:      0 1px 2px 0 rgba(0,0,0,.40);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,.45);
  --shadow:         0 1px 3px 0 rgba(0,0,0,.55), 0 1px 2px -1px rgba(0,0,0,.45);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.60), 0 4px 6px -4px rgba(0,0,0,.40);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable; /* スクロールバー出入りによるレイアウトシフト防止 */
}

/* スクリーンリーダー専用（視覚的には完全に非表示） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  /* Inter（英数）→ システム英数 → 日本語フォントの順でフォールバック。
     shadcn 標準の "feature settings" を有効化して、cv11(一階建て a) 等を活かす */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  font-weight: 400;
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────
   ヘッダー
───────────────────────────────────────── */
header {
  background: var(--clr-primary-fill);
  color: #fff;
  padding: 14px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon-link {
  display: flex;
  flex-shrink: 0;
}

.header-icon {
  width: 48px;
  height: 48px;
}

header h1 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;   /* shadcn 流のタイト目なヘッディング */
}

header p {
  font-size: .78rem;
  opacity: .85;
  margin-top: 2px;
  letter-spacing: .01em;
}

.header-help-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  opacity: .8;
  transition: opacity .15s, background .15s, box-shadow .15s;
}

.header-help-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .15);
}

.header-help-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

/* テーマ切替ボタン */
.header-theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s, background .15s, transform .3s ease, box-shadow .15s;
}

.header-theme-toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .15);
}

.header-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.header-theme-toggle:active {
  transform: rotate(-20deg);
}

/* アイコン表示切替：ライト表示時は月、ダーク表示時は太陽 */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-icon-sun { display: block; }
  html:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* ─────────────────────────────────────────
   メインコンテンツ
───────────────────────────────────────── */
main {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────
   検索ボックス
───────────────────────────────────────── */
.search-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--clr-bg);
  padding: 24px 16px 40px;
}

.search-area {
  max-width: 688px; /* main の max-width(720px) - 左右パディング(16px×2) */
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.search-area label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--clr-text);
  text-align: center;
  letter-spacing: -.01em;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* スマホ用ワイルドカード挿入チップ（デフォルト非表示・モバイル用メディアクエリで表示） */
.wc-chips {
  display: none;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 2px;
}
.wc-chips::-webkit-scrollbar { display: none; } /* WebKit */

/* IME 変換中はチップを無効化（iOS Safari で composition を強制確定できないため） */
.wc-chips.disabled {
  opacity: .4;
  pointer-events: none;
}

/* shadcn outline Button 寄せ：1px ボーダー、ホバーで accent 背景 */
.wc-chip {
  flex: 0 0 auto;
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--clr-surface);
  color: var(--clr-text);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}

/* 強調チップ（？＊）は薄いプライマリ色を残してわずかに目立たせる */
.wc-chip-wild {
  background: var(--clr-chip-soft-bg);
  border-color: rgba(var(--clr-primary-rgb), .35);
  color: var(--clr-primary);
  font-size: 1.2rem;
}

.wc-chip:hover {
  background: var(--accent);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.wc-chip:active {
  background: rgba(var(--clr-primary-rgb), .15);
  border-color: var(--clr-primary);
}

.wc-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.input-icon-search {
  position: absolute;
  left: 12px;
  color: var(--clr-primary);
  opacity: .55;
  pointer-events: none;
  flex-shrink: 0;
}

#search-input {
  width: 100%;
  font-size: 1.25rem;
  font-family: inherit;
  padding: 10px 44px 10px 40px;
  /* shadcn Input: 1px ボーダー、 focus で 3px ring（ring カラー） */
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--clr-surface);
  color: var(--clr-text);
  transition: border-color .15s, box-shadow .15s;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  box-shadow: 0 0 0 0 rgba(var(--clr-primary-rgb), 0);
  animation: input-invite 1.8s ease-out .5s;
}

@keyframes input-invite {
  0%   { box-shadow: 0 0 0 0   rgba(var(--clr-primary-rgb), 0); }
  40%  { box-shadow: 0 0 0 5px rgba(var(--clr-primary-rgb), .14); }
  100% { box-shadow: 0 0 0 0   rgba(var(--clr-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  #search-input, #search-guide { animation: none; }
}

#clear-btn[hidden] {
  display: none;
}

/* ×ボタン非表示時（プレースホルダー表示中）は右パディングを縮小 */
.input-wrapper:has(#clear-btn[hidden]) #search-input {
  padding-right: 12px;
}

/* 検索中スピナー（×ボタンの左隣）
   ─── 実装メモ ────────────────────────────────────────────────
   <div> で <svg> をラップし、div 側を 2D rotate でくるくる回す構造。
   SVG 直接回転より div 回転のほうが Chrome の合成レイヤー化に
   載りやすい（ただし Chrome Windows の小要素描画では
   メインスレッド paint に落ちやすくジャンクが残ることがある。
   iOS Safari ではスムーズ）。
   NOTE: rotate3d + backface-visibility: hidden の組み合わせは
   一部 Chrome/GPU 環境で「背面判定誤り → 不可視化」のバグを踏む
   ため採用しない。2D rotate + translateZ(0) に留める。
   ─────────────────────────────────────────────────────────── */
.search-spinner {
  position: absolute;
  right: 40px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;          /* translateY(-50%) は回転アニメと競合するため固定オフセット */
  color: var(--clr-primary); /* 内部 <circle stroke="currentColor"> が拾う */
  animation: search-spinner-rotate .8s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  /* 親の再描画サイクルから切り離して独立に GPU 合成させる */
  contain: layout paint;
  pointer-events: none;
}

.search-spinner > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;         /* stroke-linecap:round が viewBox 外に滲んでも切れないように */
}

.search-spinner[hidden] {
  display: none;
}

/* スピナー表示中は入力の右側に余白を確保（× ボタン＋スピナー分） */
.input-wrapper:has(.search-spinner:not([hidden])) #search-input {
  padding-right: 64px;
}

@keyframes search-spinner-rotate {
  /* translateZ(0) で 3D コンテキストを維持し GPU レイヤー化を要求
     （rotate3d と違い backface 判定は走らないので非表示化バグなし）*/
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .search-spinner {
    animation: search-spinner-pulse 1.2s ease-in-out infinite;
  }
  @keyframes search-spinner-pulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1;  }
  }
}

/* クリアボタン（shadcn ghost icon button 寄せ：丸型・控えめ・hoverで濃く） */
#clear-btn {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--clr-clear-btn-bg);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  opacity: .75;
  transition: background .15s, opacity .15s;
}

/* タップ判定を 44x44 に拡張（視覚は 22x22 のまま） */
#clear-btn::before {
  content: "";
  position: absolute;
  inset: -11px;
}

#clear-btn:hover {
  background: var(--clr-clear-btn-hv);
  opacity: 1;
}

#clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

#search-input:focus {
  border-color: var(--clr-primary);
  /* shadcn 標準: 3px ring + ring カラー */
  box-shadow: 0 0 0 3px var(--ring);
}

#search-input::placeholder {
  color: var(--clr-disabled);
  font-size: 1rem;
}

.hint {
  font-size: .78rem;
  color: var(--clr-muted);
  margin-top: 8px;
  line-height: 1.6;
}

.sp-br {
  display: none;
}

.hint code {
  background: var(--clr-code-bg);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: "Consolas", "Menlo", monospace;
  font-size: .82rem;
  color: var(--clr-error);
}

/* ─────────────────────────────────────────
   結果ヘッダー（件数 + コピーボタン）
───────────────────────────────────────── */
.results-header {
  position: sticky;
  top: 0; /* JS で上書き */
  z-index: 20;
  background: var(--clr-bg);
  padding: 0 16px 8px;
}
/* Safari サブピクセルの隙間を塞ぐ */
.results-header::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-bg);
}

.results-header-inner {
  max-width: 688px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 2px 0 6px;
}

#hit-count {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; /* 件数の数字幅を等幅化して更新時のブレを抑える */
  transition: color .15s, opacity .15s;
}

#hit-count .count {
  display: inline-block;
  min-width: 1.2em; /* 1桁⇄複数桁でレイアウトが揺れないように最小幅を確保 */
  text-align: right;
}

#hit-count.stale {
  opacity: .5; /* 検索結果の更新待ち（debounce 中）に薄くフェード */
}

#hit-count.zero {
  color: var(--clr-muted);
}

.results-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* 件数 ＋ すべてコピー（アイコンのみ）を横並び */
.hit-count-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* すべてコピー ボタン（shadcn ghost icon button） */
.copy-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s, box-shadow .15s;
}

.copy-all-btn[hidden] {
  display: none;
}

.copy-all-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.copy-all-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.copy-all-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* shadcn ToggleGroup（outline variant）: 細ボーダー＋区切り線 */
.view-toggle-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-surface);
}

.view-toggle-group[hidden] {
  display: none;
}

.view-toggle-group button {
  font-size: .82rem;
  font-family: inherit;
  font-weight: 500;
  padding: 0 12px;
  height: 32px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--clr-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.view-toggle-group button.active {
  background: var(--clr-primary-fill);
  color: #fff;
}

.view-toggle-group button:hover:not(.active) {
  background: var(--accent);
  color: var(--clr-text);
}

.view-toggle-group button:focus {
  outline: none;
}

.view-toggle-group button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--clr-primary);
}

.view-toggle-group button + button {
  border-left: 1px solid var(--border);
}

/* 簡易表示モード */
#results-list.simple {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

#results-list.simple .variants {
  display: none;
}

#results-list.simple .message {
  width: 100%;
}

#results-list.simple .word-item {
  padding: 0;
}

#results-list.simple .reading-copy {
  width: 100%;
  padding: 10px 14px;
}


/* ─────────────────────────────────────────
   結果リスト
───────────────────────────────────────── */
#results-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity .1s;
}

#results-list.stale {
  opacity: .4;
  pointer-events: none;
}

/* shadcn Card 寄せ：1px ボーダー、極小シャドウ、ホバー時に accent */
.word-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-xs);
  transition: background .12s, border-color .12s;
  /* ビューポート外のレイアウト/ペイントをブラウザに委譲（CSS Containment） */
  content-visibility: auto;
  contain-intrinsic-size: auto 56px; /* 詳細表示の概算高（実描画後は実寸に差し替わる） */
}

#results-list.simple .word-item {
  contain-intrinsic-size: auto 40px; /* 簡易表示は 1 行ぶん低い概算 */
}

.word-item:hover {
  background: var(--clr-hover-bg);
  border-color: var(--clr-hover-border);
}

.reading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-reading);
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.reading-copy {
  border: none;
  background: transparent;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  /* ヒット領域拡張の起点 */
  position: relative;
  /* word-item の上下 padding 内側いっぱいまでボタン自身を伸ばす。
     これにより ::before の top:-10px / bottom:-10px が word-item の
     枠上下まで正しく届く（text は flex で縦中央配置） */
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* クリック判定を word-item 枠内（左端〜縦棒｜直前）まで拡張する透明領域。
   視覚には影響を与えず、クリックは親ボタンに伝搬する。
     inset 内訳:
       top/bottom: -10px = word-item の padding 10px ぶん（上下の枠まで）
       left:      -14px = word-item の padding-left 14px（左枠まで）
       right:     -12px = word-item の gap 12px（variants の border-left 直前まで） */
.reading-copy::before {
  content: "";
  position: absolute;
  inset: -10px -12px -10px -14px;
}

.reading-copy:hover {
  color: var(--clr-primary);
  text-decoration: none;
}

.variants {
  font-size: .82rem;
  color: var(--clr-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: 6px;
  border-left: 1px solid var(--clr-divider);
  padding-left: 12px;
  min-height: calc(0.82rem * 1.45 + 4px); /* ピルと同じ高さを確保 */
}

/* shadcn Badge (secondary) 寄せ：薄背景の pill */
.variant-link {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  text-decoration: none;
  line-height: 1.45;
  font-weight: 500;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.variant-link:hover {
  color: var(--clr-primary);
  background: var(--accent);
  border-color: rgba(var(--clr-primary-rgb), .35);
  text-decoration: none;
}

/* ─────────────────────────────────────────
   状態メッセージ
───────────────────────────────────────── */
.message {
  text-align: center;
  color: var(--clr-muted);
  font-size: .92rem;
  padding: 40px 0;
}

.message.error {
  color: var(--clr-error);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.error-title {
  font-weight: 600;
  font-size: 1rem;
}

.error-hint {
  font-size: .88rem;
  color: var(--clr-muted);
  max-width: 420px;
  line-height: 1.6;
}

/* shadcn default Button: プライマリ塗り */
.error-retry {
  margin-top: 8px;
  padding: 8px 20px;
  border: 1px solid var(--clr-primary-fill);
  background: var(--clr-primary-fill);
  color: #fff;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}

.error-retry:hover {
  background: var(--clr-primary-fill-hv);
  border-color: var(--clr-primary-fill-hv);
}

.error-retry:active {
  background: var(--clr-primary-fill-hv);
  border-color: var(--clr-primary-fill-hv);
}

.error-retry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* ─────────────────────────────────────────
   0件時の代替候補提案（「もしかして？」）
───────────────────────────────────────── */
.suggestions {
  list-style: none;
  text-align: center;
  padding: 0 16px 40px;
  margin: -16px 0 0; /* .message の下に詰めて配置 */
}

/* 簡易表示モードでは .suggestions も全幅に揃える */
#results-list.simple .suggestions {
  width: 100%;
}

.suggestions-title {
  color: var(--clr-muted);
  font-size: .92rem;
  margin-bottom: 10px;
}

.suggestions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* shadcn outline Button: 1px ボーダー＋ホバーで accent */
.suggestion-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--clr-surface);
  color: var(--clr-text);
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.suggestion-btn:hover {
  background: var(--accent);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.suggestion-btn:active {
  background: rgba(var(--clr-primary-rgb), .15);
}

.suggestion-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* ─────────────────────────────────────────
   入力前ガイド（凡例）
───────────────────────────────────────── */
#search-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 24px;
  color: var(--clr-text);
  animation: guide-fadein .3s ease-out;
}

@keyframes guide-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#search-guide[hidden] {
  display: none;
}

.guide-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  text-align: center;
  color: var(--clr-muted);
}

.legend {
  margin: 0;
  padding: 12px 14px;
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-item dt {
  flex: 0 0 auto;
}

.legend-item dt code {
  display: inline-block;
  min-width: 52px;
  box-sizing: border-box;
  text-align: center;
  background: var(--clr-code-bg);
  color: var(--clr-code-accent);
  font-size: .8rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  letter-spacing: .02em;
}

.legend-item dd {
  margin: 0;
  font-size: .88rem;
  color: var(--clr-muted);
  line-height: 1.5;
}

.guide-note {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--clr-disabled);
}
.guide-note a,
.guide-note a:visited,
.help-main a,
.help-main a:visited,
.privacy-main a,
.privacy-main a:visited {
  color: var(--clr-primary);
  text-decoration: underline;
}
.guide-note a:hover,
.help-main a:hover,
.privacy-main a:hover {
  color: var(--clr-primary-fill-hv);
}


/* ─────────────────────────────────────────
   トースト（shadcn Sonner 寄せ：濃い背景＋反転テキスト＋極小シャドウ）
───────────────────────────────────────── */
.toast {
  position: fixed;
  background: var(--clr-toast-bg);
  color: var(--clr-toast-text);
  font-size: .84rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
  z-index: 999;
  opacity: 0;
  letter-spacing: .01em;
}

/* 吹き出しの三角（正方形45°回転方式、位置はJS側で調整） */
.toast::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--clr-toast-bg);
  bottom: -5px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%) rotate(45deg);
}

/* エラー時は destructive 色 */
.toast.error {
  background: var(--clr-error);
  color: #fff;
}
.toast.error::after {
  background: var(--clr-error);
}

/* 下から上へスライドイン */
.toast.show {
  animation: toast-slide-up .22s cubic-bezier(.18, .89, .32, 1.28) forwards;
}

/* フェードアウト＋わずかに上へ */
.toast.hide {
  animation: toast-fade-out .18s ease forwards;
}

@keyframes toast-slide-up {
  from { opacity: 0; transform: translateY(calc(-100% + 8px)); }
  to   { opacity: 1; transform: translateY(-100%); }
}

@keyframes toast-fade-out {
  from { opacity: 1; transform: translateY(-100%); }
  to   { opacity: 0; transform: translateY(calc(-100% - 4px)); }
}

/* 下方向表示（ボタン上に余白が足りないとき／スティッキーヘッダー等） */
.toast.below::after {
  top: -5px;
  bottom: auto;
}
.toast.below.show {
  animation: toast-slide-down .22s cubic-bezier(.18, .89, .32, 1.28) forwards;
}
.toast.below.hide {
  animation: toast-fade-out-down .18s ease forwards;
}
@keyframes toast-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-fade-out-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(4px); }
}

/* ─────────────────────────────────────────
   TOPへ戻るボタン
───────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--clr-primary-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, background .15s, box-shadow .15s;
  z-index: 100;
}

#back-to-top:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--ring);
}

/* モバイル用コンテンツはデフォルトで非表示 */
.btt-search,
.btt-label {
  display: none;
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top:hover {
  background: var(--clr-primary-fill-hv);
}

/* ─────────────────────────────────────────
   PC：トップへ戻るボタン 常時非表示
───────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  #back-to-top {
    display: none !important;
  }

  /* 最上部（未スクロール）は以前通りゆったり 48px
     下にスクロールしたら 24px に縮小（スティッキー追従時の上部余白を詰める）
     ※トランジションは付けない：
       検索エリアの高さが滑らかに変わると、追従する .results-header の
       sticky top（JSで同期）が毎フレームずれて件数表示が揺れるため、
       スクロール開始と同時に瞬時に切り替える */
  .search-sticky-wrap {
    padding-top: 48px;
  }
  body.is-scrolled .search-sticky-wrap {
    padding-top: 24px;
  }

  main {
    padding-bottom: 48px;
  }
}

/* ─────────────────────────────────────────
   スマホ
───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* 検索エリアをスクロール追従から解除（結果表示エリアを広く） */
  .search-sticky-wrap {
    position: static;
  }

  /* スマホ時はワイルドカード挿入チップを表示（IME 切替不要で入力できる） */
  .wc-chips {
    display: flex;
  }

  /* 入力欄がフォーカスされていない（≒キーボード非表示）ときはチップを無効化
     - キャレット位置が見えない状態での挿入ミスを防ぐ
     - .disabled（IME変換中）と同じ見た目でOK */
  body:not(.input-focused) .wc-chips {
    opacity: .4;
    pointer-events: none;
  }

  /* FABが隠れないようにコンテンツ下部に余白を追加（結果表示中のみ） */
  main.has-results {
    padding-bottom: 116px;
  }

  /* 「再検索」FABボタン：常時表示の丸型 */
  #back-to-top {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    padding: 0;
    flex-direction: column;
    gap: 2px;
    right: 20px;
    bottom: 20px;
    box-shadow: var(--shadow-lg);
  }

  .btt-arrow {
    display: none;
  }

  .btt-search {
    display: block;
    width: 28px;
    height: 28px;
  }

  .btt-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
  }
}

/* ─────────────────────────────────────────
   フッター
───────────────────────────────────────── */
footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  padding: 14px 20px;
  font-size: .76rem;
  color: var(--clr-muted);
  text-align: center;
  line-height: 1.8;
}

footer a {
  color: var(--clr-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────
   レスポンシブ
───────────────────────────────────────── */
@media (max-width: 480px) {
  #search-input {
    font-size: 1.05rem;
  }

  .header-tagline {
    display: none;
  }

  .sp-br {
    display: block;
  }

  .reading {
    font-size: 1rem;
  }

  .results-header-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}