@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
  }
  /* M3: キーボード操作時のフォーカスリング(全部品・主役色2px) */
  :focus-visible {
    outline: 2px solid theme('colors.jd.primary');
    outline-offset: 2px;
  }
}

@layer components {
  /* ==================================================================
     Material Design 3 第1段(2026-09-07 水谷さん決定)。
     既存ビューの「クラスの組み合わせ」を選択して一括で M3 の部品に寄せる。
     ビュー側の書き方は変えず、見た目だけを揃える(文言・動き・法的表示は不変)。
     ================================================================== */

  /* カード = Outlined card: 白い面＋細い枝線、影は無し(影は浮く部品だけ)。角は 12px(rounded-card) */
  .rounded-card.border-jd-line {
    box-shadow: none;
    border-color: theme('colors.jd.outline-variant');
  }

  /* ボタン(塗り) = Filled button: ピル型・高さ40px・押すと少し沈む・乗せると level1 の影 */
  a.bg-jd-primary.text-white,
  button.bg-jd-primary.text-white,
  input[type="submit"].bg-jd-primary {
    border-radius: 9999px;
    min-height: 2.5rem;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  }
  a.bg-jd-primary.text-white:hover,
  button.bg-jd-primary.text-white:hover,
  input[type="submit"].bg-jd-primary:hover {
    box-shadow: theme('boxShadow.card');
  }
  a.bg-jd-primary.text-white:active,
  button.bg-jd-primary.text-white:active,
  input[type="submit"].bg-jd-primary:active {
    transform: translateY(1px);
    box-shadow: none;
  }

  /* ボタン(枝線) = Outlined button: ピル型・枝線は outline 色・乗せると主役の薄い色 */
  a.border-jd-accent.text-jd-accent,
  button.border-jd-accent.text-jd-accent {
    border-radius: 9999px;
    min-height: 2.5rem;
    border-color: theme('colors.jd.outline');
    transition: background-color 0.15s ease;
  }
  a.border-jd-accent.text-jd-accent:hover,
  button.border-jd-accent.text-jd-accent:hover {
    background-color: theme('colors.jd.primary-container');
  }

  /* ボタン(控えめ) = Outlined(neutral): ピル型 */
  a.border-jd-line.text-jd-muted,
  button.border-jd-line.text-jd-muted {
    border-radius: 9999px;
    min-height: 2.5rem;
    border-color: theme('colors.jd.outline');
  }

  /* 入力欄 = Outlined text field: 角8px・枝線 outline・高さ44px・フォーカスで主役色2px */
  input.rounded-card:not([type="submit"]):not([type="button"]),
  select.rounded-card,
  textarea.rounded-card {
    border-radius: theme('borderRadius.m3-sm');
    border-color: theme('colors.jd.outline');
    min-height: 2.75rem;
    box-shadow: none;
    background-color: theme('colors.jd.surface');
  }
  input.rounded-card:not([type="submit"]):not([type="button"]):focus,
  select.rounded-card:focus,
  textarea.rounded-card:focus {
    outline: 2px solid theme('colors.jd.primary');
    outline-offset: -1px;
    border-color: theme('colors.jd.primary');
  }

  /* 状態レイヤー: 乗せられる行(メニュー・一覧のカード)の反応をそろえる */
  a.hover\:bg-jd-bg,
  button.hover\:bg-jd-bg {
    transition: background-color 0.15s ease;
  }

  /* ------------------------------------------------------------------
     求人一覧の表示切替(タイル / リスト)。
     同じマークアップのまま、親の data-view だけで並びを変える。
     ★法(3): これは表示形式の変更であり、並び順・絞り込みには関与しない。
     ------------------------------------------------------------------ */
  .jd-board { display: grid; gap: 1.5rem; }

  /* タイル表示: スマホ1列 → タブレット2列 → PC3列 */
  .jd-board[data-view="grid"] { grid-template-columns: 1fr; }
  @media (min-width: 640px) {
    .jd-board[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .jd-board[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .jd-board[data-view="grid"] .jd-card-inner { display: flex; flex-direction: column; height: 100%; }
  .jd-board[data-view="grid"] .jd-card-thumb { width: 100%; aspect-ratio: 16 / 9; }
  .jd-board[data-view="grid"] .jd-card-headline { flex-direction: column; align-items: flex-start; }

  /* リスト表示: 1列。写真は左、本文は右 */
  .jd-board[data-view="list"] { grid-template-columns: 1fr; }
  .jd-board[data-view="list"] .jd-card-inner { display: flex; flex-direction: row; align-items: stretch; }
  .jd-board[data-view="list"] .jd-card-thumb { width: 7rem; aspect-ratio: 1 / 1; }
  @media (min-width: 768px) {
    .jd-board[data-view="list"] .jd-card-thumb { width: 10rem; }
  }
  .jd-board[data-view="list"] .jd-card-body { padding: 1rem 1.25rem; }

  /* ♡ の位置。タイルは写真の上、リストは本文の右上 */
  .jd-board[data-view="list"] .jd-card-fav { top: 0.75rem; right: 0.75rem; }

  /* JSが無効・未読み込みでもタイル表示として成立させる(既定はgrid) */
  .jd-board:not([data-view]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */