/* ====== Desktop base (keep minimal) ====== */
body{background:#0b0c10;color:#e5e7eb;font:16px/1.6 system-ui;margin:0;padding:24px}
.container{max-width:920px;margin:0 auto}
#searchForm{display:flex;gap:.5rem;margin-bottom:16px}
#q{flex:1;padding:.6rem .8rem;border-radius:.6rem;border:1px solid #374151;background:#111827;color:#e5e7eb}
button{padding:.6rem 1rem;border-radius:.6rem;border:1px solid #374151;background:#1f2937;color:#e5e7eb;cursor:pointer}
.card{background:#111827;border:1px solid #374151;border-radius:12px;padding:12px 14px;margin:10px 0}
.title a{color:#93c5fd;text-decoration:none}
.snippet{margin-top:6px;word-break:break-word}
.meta{margin-top:6px;font-size:.9em;color:#9ca3af}
.meta a{color:#3b82f6}
.empty{opacity:.8;padding:16px}
mark, mark.hl { background:#fde047; color:#111; padding:0 .15em; border-radius:.2em; }
.date{margin-left:.5rem;color:#9ca3af;font-size:.9em}
.ts{color:#3b82f6;font-weight:600}
.ts:link,.ts:visited{color:#3b82f6}

/* ====== Mobile fix (<=768px) ====== */
@media (max-width: 768px) {
  html, body { margin: 0; padding: 0; }
  body { padding: 12px; }
  .container { max-width: 100% !important; width: 100% !important; margin: 0 auto; }
  #searchForm { display: flex; flex-direction: column; gap: .6rem; }
  #q, button, select { width: 100%; box-sizing: border-box; }
}

/* === Mobile: put SORT + BUTTON on the same row (below the input) === */
@media (max-width: 768px) {
  /* フォームを2カラムのグリッド化
     1行目: 入力(#q)が2カラムぶち抜き
     2行目: 左に #sort（1frで広く）、右にボタン（auto幅） */
  #searchForm{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    gap: .6rem;
  }
  /* 入力を1行目で全幅 */
  #searchForm #q{
    grid-column: 1 / -1;
    width: 100%;
  }
  /* ソートは左カラムいっぱいに伸ばす */
  #searchForm #sort{
    width: 100%;
  }
  /* ボタンは自動幅（行内） */
  #searchForm button{
    width: auto;
    white-space: nowrap;
    padding: .6rem 1rem;
  }
}