/* =====================================================================
   管理画面の最小スタイル
   準拠: PROJECT.md 第7-2章（既存アプリからCSSのみ流用。JSは流用しない）

   ★2026-08-18 Step 12-e フェーズ3：全画面ライトテーマ化（D-111・
   docs/STEP12E_DESIGN.md §8-3）。フェーズ1（社員ホーム試作・
   html.hf-light-v2スコープ）で確認・社長承認済みの配色・紫の使用方法
   （§2-3の4用途限定）・情報階層を、スコープを解除して全画面（社員ホーム・
   ランキング／履歴／実績・管理画面・ログイン画面）へ統合した。
   同じトークン（:root）を唯一の定義とし、二重管理しない。
   ===================================================================== */

:root {
  --bg:            #f5f6f8;
  --bg2:           #ffffff;
  --bg3:           #eceef2;
  --text:          #14161f;
  --text2:         #5a6072;
  --border:        #dde0e6;
  --border-strong: #868b99;
  /* ★2026-08-19：--bg3 を背景にするコンポーネント（.edit-panel）の外周枠専用。
     --border-strong は --bg3 上で2.93:1とSC 1.4.11の3:1を僅かに割るため、
     グローバルの --border-strong を変えず（変更すると§2-2の全組合せ再測定が必要）、
     専用トークンとして最小限だけ暗くした。実測：vs --bg3 3.18:1／vs --bg2 3.70:1／vs --bg 3.42:1 */
  --border-panel:  #808591;
  --accent:        #6366ad;
  --ok:            #2b6e2f;
  --warn:          #8a5a00;
  --err:           #b3261e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.admin {
  font-family: -apple-system, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- ヘッダー ---- */
.admin-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-title { font-weight: 700; font-size: 15px; color: var(--text); }
.admin-user  { color: var(--text2); font-size: 13px; }

/* ---- 本文（社員ホーム・管理画面とも同じ最大幅で中央寄せ。docs/STEP12E_DESIGN.md §6-1） ---- */
.admin-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.admin-footer { height: 24px; }

h1, h2, h3 { line-height: 1.4; margin-bottom: 12px; color: var(--text); }
h1 { font-size: 20px; }
h2 { font-size: 17px; margin-top: 28px; }
@media (min-width: 768px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
}

/* ---- フォーカス（キーボード操作の可視化。D-111：紫の用途②） ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- フラッシュメッセージ ---- */
.flash {
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
}
.flash-success { border-color: var(--ok);   color: var(--ok); }
.flash-error   { border-color: var(--err);  color: var(--err); }
.flash-notice  { border-color: var(--warn); color: var(--warn); }

/* ---- テーブル（管理画面の一覧表は情報密度を保つため12px罫線・14px文字のまま） ---- */
.table { width: 100%; border-collapse: collapse; margin: 12px 0 24px; }
.table th, .table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.table th { color: var(--text2); font-size: 14px; font-weight: 600; }

/* ---- フォーム（汎用。ログイン・パスワード変更画面等） ---- */
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text); }
.field-hint  { font-size: 14px; color: var(--text2); margin-top: 4px; }
.field-checkbox { margin-bottom: 16px; }
.field-label-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.input, .select, .textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 16px;
  min-height: 48px;
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* ---- ボタン ----
   Primary＝通常時アウトライン（白背景＋紫枠＋紫文字）、hover/focus/active時のみ紫塗り。
   同一Primary操作の反復（16種目の登録・複数フォームの追加/保存）を許容しつつ、
   常時見える紫の塗り面積を増やさない（D-111決裁1の確定解釈・docs/STEP12E_DESIGN.md §2-3）。
   Secondary＝枠線のみ（.btn既定）。取消系操作もSecondaryのまま（破壊的操作ではないため--errを使わない）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg2);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn-primary {
  min-height: 48px;
  background: var(--bg2);
  border: 2px solid var(--accent);
  color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---- ログイン・パスワード変更画面（未ログイン用） ---- */
body.login {
  font-family: -apple-system, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}
.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
}
.login-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; text-align: center; color: var(--text); }
.login-lead  { font-size: 14px; color: var(--text2); margin-bottom: 18px; }
.login-error { margin-bottom: 18px; }
.login-sub   { margin-top: 18px; text-align: center; }

.btn-block { width: 100%; margin-top: 8px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}
.btn-link:hover { color: var(--text); }

/* ---- 種目一覧（社員ホーム：16種目・「昨日と同じ運動」共通）----
   CSS Grid。モバイルは「name name / ctrl button」の2行、デスクトップ（≥768px）は
   「name ctrl button」の1行。select・登録ボタンは固定の列幅を持つため、
   種目名の長短に関わらず全カードで位置が揃う（docs/STEP12E_DESIGN.md §6-2）。 */
.exercise-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 24px; }
.exercise-item {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-areas:
    "name   name"
    "ctrl   button";
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.exercise-item > div:first-child {
  grid-area: name;
  min-width: 0;
}
.exercise-item-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  /* 長い日本語種目名でも最大2行まで。任意位置改行・縦書き化はしない（docs/STEP12E_DESIGN.md §5-5）。 */
  overflow-wrap: normal;
  word-break: normal;
  line-break: strict;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exercise-item-desc {
  font-size: 14px;
  color: var(--text2);
  margin-top: 2px;
}
.exercise-item-video {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--text2);
  text-decoration: underline;
}
.exercise-item .select,
.exercise-item-points {
  grid-area: ctrl;
  min-width: 0;
}
.exercise-item-points {
  font-size: 14px;
  color: var(--text2);
}
.exercise-item .btn-primary {
  grid-area: button;
  max-height: 52px;
  padding: 0 14px;
}
/* 「昨日と同じ運動」はボタン文言が長いため（「この運動を今日も登録」）モバイルでも幅を広げる */
.exercise-list-repeat .exercise-item { grid-template-columns: 1fr 1fr; }
/* ★[hidden]属性はUAデフォルトでdisplay:noneだが、上の .exercise-item { display: grid; } が
   同じ要素に効くと属性側が上書きされてしまう（同型の先行例：バナーや編集パネル・検索欄の
   [hidden]規則。F12-03是正）。検索フィルタJSは16種目一覧の各カード
   （.exercise-item）へ hidden を設定するため、実効的な非表示にこの規則が必須。 */
.exercise-item[hidden] { display: none; }

@media (min-width: 768px) {
  .exercise-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .exercise-item {
    grid-template-columns: minmax(0, 1fr) 150px 116px;
    grid-template-areas: "name ctrl button";
    min-height: 96px;
  }
  .exercise-list-repeat .exercise-item {
    grid-template-columns: minmax(0, 1fr) 150px minmax(150px, auto);
  }
}

.overlay-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  padding: 14px;
  margin-bottom: 16px;
}
.overlay-card-info   { font-weight: 600; color: var(--text); }
.overlay-card-points { font-size: 14px; color: var(--text2); margin-top: 2px; }

.today-list-cancel { text-align: right; white-space: nowrap; }

/* ---- 今日のポイント合計／累計ポイント（確定＝紫、進行中＝黒。docs/STEP12E_DESIGN.md §2-4） ---- */
.points-summary {
  display: flex;
  gap: 10px;
  margin: 12px 0 24px;
}
.points-summary-item {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.points-summary-label { font-size: 14px; color: var(--text2); }
.points-summary-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--text); }
/* 2番目＝累計ポイント（確定した正式値）だけを紫にする */
.points-summary-item:nth-child(2) .points-summary-value { color: var(--accent); }

/* ---- ランキング（個人・チーム） ---- */
.ranking-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
}
.ranking-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
}
/* ★フェーズ3是正：タブのアクティブ表示に紫を使わない（D-111の4用途外。旧実装の是正） */
.ranking-tab-active { color: var(--text); border-color: var(--border-strong); font-weight: 700; }
.ranking-table td, .ranking-table th { white-space: nowrap; }
.ranking-row-self { background: var(--bg3); }

/* ---- ゲーム表示（レベル・連続参加＝確定＝紫、今週の参加＝進行中＝黒） ---- */
.game-summary { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.game-summary-item { flex: 1 1 30%; min-width: 96px; background: var(--bg2);
                     border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.game-summary-label { font-size: 14px; color: var(--text2); }
.game-summary-value { font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--text); }
.game-summary-note  { font-size: 14px; color: var(--text2); margin: 0 0 16px; }
.game-summary-item:nth-child(1) .game-summary-value,
.game-summary-item:nth-child(2) .game-summary-value { color: var(--accent); }
.game-card { background: var(--bg2); border: 1px solid var(--border);
             border-radius: 10px; padding: 12px; margin: 8px 0 16px; }
.game-card-main { font-size: 16px; font-weight: 700; color: var(--text); }
.game-card-sub  { font-size: 14px; color: var(--text2); margin-top: 4px; }

/* ---- ランキング／履歴／実績への導線リンク（塗りつぶしボタンにしない。弱い視覚階層） ----
   .hf-quicklinks は home.php 側の表示用class（業務ロジックには触れていない）。
   display:inline-block による自然な折返しで、広い画面は横並び・狭い画面は折り返す。 */
p.hf-quicklinks {
  display: inline-block;
  margin: 0 20px 8px 0;
}
.hf-quicklinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text2);
  font-size: 14px;
  text-decoration: underline;
}

/* ---- 運動履歴・実績 ---- */
.history-date-heading { font-size: 14px; color: var(--text2); margin: 16px 0 6px; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.history-item-name   { font-weight: 600; color: var(--text); }
.history-item-points { font-size: 14px; color: var(--text2); margin-top: 2px; }
.history-item-time   { font-size: 14px; color: var(--text2); white-space: nowrap; }
/* ★フェーズ3是正：opacityによる減光はAA未達（旧実装で2.39:1）のため使わず、色指定へ置き換える */
.history-item-canceled { color: var(--text2); }
.history-pager { display: flex; justify-content: space-between; margin-top: 16px; }

.badge-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge-item {
  flex: 1 1 45%;
  min-width: 140px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.badge-item-name      { font-weight: 600; color: var(--text); }
.badge-item-condition { font-size: 14px; color: var(--text2); margin-top: 2px; }
/* ★フェーズ3是正：opacityによる減光はAA未達のため使わず、枠線・文字色のみで未獲得を表す */
.badge-item-locked    { color: var(--text2); border-color: var(--border); }
/* ★2026-08-19：獲得状態の補助ラベル（実HTMLで出力。色だけに依存させない）。
   丸いバッジ装飾にはせず、名前の直下に置く控えめな1行とする。
   獲得済みはD-111の紫の用途④「確定した達成」に該当するため小面積の--accentを使う
   （.badge-item の背景は --bg2 のため 5.21:1／未獲得の --text2 は 6.27:1・いずれもAA適合）。 */
.badge-item-status        { font-size: 14px; font-weight: 600; margin-top: 2px; }
.badge-item-status-earned { color: var(--accent); }
.badge-item-status-locked { color: var(--text2); }

/* ---- 管理画面：ナビゲーション ---- */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 16px;
}
.admin-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text2);
  font-size: 14px;
  text-decoration: underline;
}

/* ---- 管理画面：インライン操作フォーム（並び替え・無効化等の単発ボタン） ---- */
.inline-form {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

/* ---- 管理画面：フォーム（ラベルを上・入力欄を下。業務ツールとして情報密度を保つ） ----
   375pxで横スクロールが発生しないよう、bare <label><input></label> のフォームを
   ここで統一的にスタイルする（employees.php・teams.php等、同じ構造の他管理フォームにも
   自動的に適用される。HTML側は変更していない）。 */
.admin-main form label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text);
}
.admin-main form label > input,
.admin-main form label > select,
.admin-main form label > textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: 44px;
  font-size: 16px;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-family: inherit;
}
.admin-main form:not(.inline-form) {
  max-width: 480px;
}

/* ---- 管理画面：編集フォームの「編集中」見出し（実HTML。CSS疑似要素は使わない。§7-3） ---- */
.edit-form-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

/* ---- 管理画面：編集パネル（2026-08-18再修正） ----
   table/td内から分離し、一覧の直前に独立表示する。入力欄は縦積みのまま
   （上の .admin-main form label で統一済み）。375pxでも画面幅に収まり、
   横スクロールを発生させない（.admin-main form:not(.inline-form)のmax-width:480pxが適用される）。 */
.edit-panel {
  display: block;
  padding: 14px;
  margin: 0 0 16px;
  background: var(--bg3);
  /* ★2026-08-19：外周枠のみ専用トークンを使う（--border-strong では --bg3 上で2.93:1・3:1未満） */
  border: 1px solid var(--border-panel);
  border-radius: 8px;
}
/* ★[hidden]属性はUAデフォルトでdisplay:noneだが、上のクラス指定（display:block）が
   同じ要素に効くと属性側が上書きされてしまう（PWA案内バナーの既存対策と同じ理由）。
   hidden属性側を明示的に優先させる。 */
.edit-panel[hidden] { display: none; }
.edit-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* ---- 管理画面：種目一覧テーブルは圧縮せず横スクロールさせる（2026-08-18再修正） ----
   .table-scrollがラッパーとしてoverflow-x:autoを持ち、.tableに十分なmin-widthを
   与えることで、狭い画面幅でも列（特に状態・並び替え・操作）が文字単位で
   折れることを防ぐ。ページ全体は横スクロールしない（ラッパーの内側だけがスクロールする）。 */
.table-scroll {
  overflow-x: auto;
  margin: 12px 0 24px;
}
.table-scroll .table {
  min-width: 900px;
  margin: 0;
}
.table th,
.table td.type-status,
.table td.type-reorder,
.table td.type-actions,
.table td.type-empno,
.table td.type-role,
.table td.type-edit {
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}
.table td.type-status  { min-width: 72px; }
.table td.type-reorder { min-width: 110px; }
.table td.type-actions { min-width: 130px; }
.table td.type-empno   { min-width: 110px; }
.table td.type-role    { min-width: 80px; }
.table td.type-edit    { min-width: 70px; }
.type-name-duration { color: var(--text2); font-size: 14px; }

/* スクロール可能であることを375〜640pxでのみ明示するテキストヒント（装飾アイコンなし） */
.table-scroll-hint {
  display: none;
  font-size: 14px;
  color: var(--text2);
  margin: 0 0 6px;
}

/* ---- 画面幅が狭い場合 ---- */
@media (max-width: 640px) {
  .admin-header-inner, .admin-main { padding-left: 14px; padding-right: 14px; }
  .table-scroll-hint { display: block; }

  /* ---- 社員管理：モバイルの是正（2026-08-19限定修正） ----
     デスクトップ（≥641px）はこのメディアクエリの外にあるため無変更。
     検索フォームを縦積みにし、入力欄・selectを画面幅いっぱいに広げる。
     検索ボタンは既存の .btn（min-height:44px）をそのまま維持する。 */
  .admin-filter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-filter input,
  .admin-filter select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .admin-filter .btn {
    width: 100%;
  }

  /* 「社員を個別登録」「社員を一括登録」を縦積みにし、画面幅へ収める */
  .admin-register-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .admin-register-links .btn {
    width: 100%;
  }
}

/* ---- PWA：ホーム画面追加案内（Step 10・控えめな1ブロック。モーダルにしない） ---- */
.pwa-a2hs-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  font-size: 14px;
}
/* ★[hidden]属性はUAデフォルトでdisplay:noneだが、上のクラス指定（display:flex）が
   同じ要素に効くと属性側が上書きされてしまう。hidden属性側を明示的に優先させる
   （banner.hidden = true / falseの切り替えを実際の表示へ反映させるために必須）。 */
.pwa-a2hs-banner[hidden] { display: none; }
.pwa-a2hs-text { flex: 1; color: var(--text2); }
.pwa-a2hs-install { flex-shrink: 0; }
.pwa-a2hs-dismiss {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

/* ---- 社員ホーム：16種目の検索フィルタ（JS成功時のみ表示。docs/STEP12E_DESIGN.md §5） ----
   静的HTMLは hidden 属性付きで出力され、JSが hidden を解除する。
   JS無効時はこのブロック自体が非表示のまま残り、16種目は全件表示される。
   件数表示・「すべて表示」を入力欄のすぐ近くへ、同じ行にまとめる（幅が足りなければ折り返す）。 */
#hf-exercise-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 4px 0 16px;
  max-width: 560px;
}
/* ★2026-08-19：[hidden]属性はUAデフォルトでdisplay:noneだが、上の display:flex が
   同じ要素に効くと属性側が上書きされてしまう（.pwa-a2hs-banner[hidden]・.edit-panel[hidden]と
   同じ理由。JS無効時の実画面確認で検索UIが表示されてしまう不具合として発覚）。
   hidden属性側を明示的に優先させる。検索コンポーネントに限定し、.btn等のグローバル規則は変えない。 */
#hf-exercise-search[hidden] { display: none; }
#hf-exercise-search label {
  flex: 1 0 100%;
  margin-bottom: 0;
  font-size: 15px;
  color: var(--text);
}
#hf-exercise-search-input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-family: inherit;
}
#hf-exercise-search-count {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  color: var(--text2);
}
#hf-exercise-search-clear {
  /* 目立たないSecondary：枠線・背景を薄くし、検索文字があるときだけ現れる（JS側のhidden制御）。
     タップ領域44px以上は維持する。 */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  font-size: 14px;
  color: var(--text2);
  background: transparent;
  border-color: var(--border);
}
/* ★2026-08-19：このボタンは class="btn" も持ち、.btn の display:inline-flex（無条件）が
   hidden属性を上書きしてしまう。検索文字が空のときは常に非表示にする（コンポーネント固有）。 */
#hf-exercise-search-clear[hidden] { display: none; }