/**
 * 鹿児島市求人サイト - レスポンシブ専用スタイルシート
 * 
 * このファイルは様々なデバイスサイズに対応するレスポンシブデザインを専門的に管理するスタイルシートです。
 * モバイルファーストアプローチに基づき、スマートフォン、タブレット、デスクトップそれぞれに最適化された
 * レイアウトと操作性を提供します。タッチデバイス対応やビューポート管理も含み、
 * 全てのデバイスで快適な求人検索体験を実現します。
 * 
 * ブレークポイント:
 * - xs: 0px～479px (極小スマートフォン)
 * - sm: 480px～639px (スマートフォン)
 * - md: 640px～767px (大きなスマートフォン)
 * - lg: 768px～1023px (タブレット)
 * - xl: 1024px～1279px (小さなデスクトップ)
 * - 2xl: 1280px以上 (大きなデスクトップ)
 * 
 * 目次:
 * 1. ベースとモバイルファースト (0px～)
 * 2. スマートフォン対応 (480px～)
 * 3. 大きなスマートフォン (640px～)
 * 4. タブレット縦 (768px～)
 * 5. タブレット横・小デスクトップ (1024px～)
 * 6. 大きなデスクトップ (1280px～)
 * 7. 超大画面対応 (1536px～)
 * 8. タッチデバイス専用
 * 9. 印刷・その他メディア
 * 
 * @package KagoshimaJobBoard
 * @version 1.0.0
 */

/* =================================================================
   1. ベースとモバイルファースト (0px～479px)
   ================================================================= */

/* 極小デバイス向けの基本設定 */
:root {
    --kjb-mobile-padding: 12px;
    --kjb-mobile-gap: 12px;
    --kjb-mobile-font-scale: 0.9;
    --kjb-touch-target-min: 44px;
  }
  
  /* コンテナのモバイル最適化 */
  .kjb-container {
    padding-left: var(--kjb-mobile-padding);
    padding-right: var(--kjb-mobile-padding);
  }
  
  /* ヘッダーのモバイル対応 */
  .kjb-header {
    padding: 8px var(--kjb-mobile-padding);
    min-height: 60px;
  }
  
  .kjb-header .kjb-container {
    padding: 0;
  }
  
  .kjb-header-nav {
    display: none; /* モバイルメニューに置き換え */
  }
  
  .kjb-mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--kjb-touch-target-min);
    height: var(--kjb-touch-target-min);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }
  
  /* モバイルメニュー */
  .kjb-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: var(--kjb-bg-primary);
    box-shadow: var(--kjb-shadow-xl);
    z-index: var(--kjb-z-modal);
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
  }
  
  .kjb-mobile-menu.kjb-active {
    left: 0;
  }
  
  .kjb-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--kjb-bg-overlay);
    z-index: calc(var(--kjb-z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  
  .kjb-mobile-menu-overlay.kjb-active {
    opacity: 1;
    visibility: visible;
  }
  
  /* グリッドのモバイル対応 */
  .kjb-grid {
    gap: var(--kjb-mobile-gap);
  }
  
  .kjb-grid-cols-2,
  .kjb-grid-cols-3,
  .kjb-grid-cols-4,
  .kjb-grid-cols-12 {
    grid-template-columns: 1fr;
  }
  
  /* 求人カードのモバイル対応 */
  .kjb-job-card {
    margin-bottom: var(--kjb-mobile-gap);
  }
  
  .kjb-job-card-header {
    padding: 12px;
  }
  
  .kjb-job-card-body {
    padding: 12px;
  }
  
  .kjb-job-card-footer {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
  }
  
  .kjb-job-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  /* フォームのモバイル対応 */
  .kjb-form-group {
    margin-bottom: var(--kjb-spacing-4);
  }
  
  .kjb-btn {
    min-height: var(--kjb-touch-target-min);
    width: 100%;
    justify-content: center;
    touch-action: manipulation;
  }
  
  .kjb-input,
  .kjb-textarea,
  .kjb-select {
    min-height: var(--kjb-touch-target-min);
    font-size: 16px; /* iOSズーム防止 */
  }
  
  /* 検索フォームのモバイル対応 */
  .kjb-search-form {
    padding: 12px;
  }
  
  .kjb-search-form-advanced {
    margin-top: 12px;
  }
  
  .kjb-search-form-buttons {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  
  /* フィルターのモバイル対応 */
  .kjb-filter-form {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: var(--kjb-z-modal);
  }
  
  .kjb-filter-form.kjb-active {
    transform: translateY(0);
  }
  
  .kjb-filter-toggle-mobile {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kjb-primary);
    color: white;
    border: none;
    box-shadow: var(--kjb-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--kjb-z-fixed);
    touch-action: manipulation;
  }
  
  /* ページネーションのモバイル対応 */
  .kjb-pagination {
    display: none;
  }
  
  .kjb-pagination-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
  }
  
  .kjb-pagination-mobile-btn {
    min-height: var(--kjb-touch-target-min);
    min-width: var(--kjb-touch-target-min);
  }
  
  /* ソーシャルシェアのモバイル対応 */
  .kjb-social-share-buttons {
    gap: 8px;
  }
  
  .kjb-social-btn {
    flex: 1;
    min-height: var(--kjb-touch-target-min);
    justify-content: center;
  }
  
  .kjb-social-label {
    display: none;
  }
  
  /* パンくずのモバイル対応 */
  .kjb-breadcrumb-list {
    padding: 0 var(--kjb-mobile-padding);
    font-size: 12px;
  }
  
  .kjb-breadcrumb-item:not(:nth-last-child(-n+2)) {
    display: none;
  }
  
  .kjb-breadcrumb-list::before {
    content: '...';
    color: var(--kjb-text-muted);
    margin-right: 8px;
  }
  
  /* テキストサイズの調整 */
  h1 {
    font-size: calc(var(--kjb-font-size-3xl) * var(--kjb-mobile-font-scale));
    line-height: 1.2;
  }
  
  h2 {
    font-size: calc(var(--kjb-font-size-2xl) * var(--kjb-mobile-font-scale));
    line-height: 1.3;
  }
  
  h3 {
    font-size: calc(var(--kjb-font-size-xl) * var(--kjb-mobile-font-scale));
    line-height: 1.3;
  }
  
  /* =================================================================
     2. スマートフォン対応 (480px～639px)
     ================================================================= */
  
  @media (min-width: 480px) {
    :root {
      --kjb-mobile-padding: 16px;
      --kjb-mobile-gap: 16px;
      --kjb-mobile-font-scale: 0.95;
    }
  
    /* コンテナの調整 */
    .kjb-container {
      padding-left: var(--kjb-mobile-padding);
      padding-right: var(--kjb-mobile-padding);
    }
  
    /* ヘッダーの調整 */
    .kjb-header {
      padding: 12px var(--kjb-mobile-padding);
      min-height: 70px;
    }
  
    /* 検索フォームの改善 */
    .kjb-search-form-buttons {
      flex-direction: row;
      justify-content: space-between;
    }
  
    .kjb-btn {
      width: auto;
      min-width: 120px;
    }
  
    /* カードのレイアウト改善 */
    .kjb-job-card-footer {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  
    .kjb-job-card-meta {
      flex-direction: row;
      align-items: center;
    }
  
    /* フィルターの改善 */
    .kjb-filter-form {
      max-height: 70vh;
    }
  
    /* ソーシャルシェアの改善 */
    .kjb-social-btn {
      flex: none;
      min-width: 100px;
    }
  }
  
  /* =================================================================
     3. 大きなスマートフォン (640px～767px)
     ================================================================= */
  
  @media (min-width: 640px) {
    :root {
      --kjb-mobile-padding: 20px;
      --kjb-mobile-gap: 20px;
      --kjb-mobile-font-scale: 1;
    }
  
    /* グリッドの2列対応 */
    .kjb-grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  
    /* 求人カードの2列表示 */
    .kjb-job-cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--kjb-mobile-gap);
    }
  
    /* 検索とフィルターの改善 */
    .kjb-search-filter-container {
      display: flex;
      gap: 20px;
    }
  
    .kjb-search-form {
      flex: 2;
    }
  
    .kjb-filter-form {
      flex: 1;
      position: static;
      transform: none;
      max-height: none;
      border-radius: var(--kjb-radius-lg);
    }
  
    .kjb-filter-toggle-mobile {
      display: none;
    }
  
    /* フォームの改善 */
    .kjb-form-row {
      display: flex;
      gap: 16px;
    }
  
    .kjb-form-col {
      flex: 1;
    }
  }
  
  /* =================================================================
     4. タブレット縦 (768px～1023px)
     ================================================================= */
  
  @media (min-width: 768px) {
    :root {
      --kjb-container-padding: 24px;
      --kjb-grid-gap: 24px;
    }
  
    /* ヘッダーの拡張 */
    .kjb-header {
      padding: 16px 0;
      min-height: 80px;
    }
  
    .kjb-header-nav {
      display: flex;
    }
  
    .kjb-mobile-menu-toggle {
      display: none;
    }
  
    /* コンテナの調整 */
    .kjb-container {
      padding-left: var(--kjb-container-padding);
      padding-right: var(--kjb-container-padding);
    }
  
    /* グリッドシステムの拡張 */
    .kjb-grid {
      gap: var(--kjb-grid-gap);
    }
  
    .kjb-grid-cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .kjb-grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  
    /* レイアウトの改善 */
    .kjb-main-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: var(--kjb-grid-gap);
    }
  
    .kjb-content-area {
      min-width: 0; /* グリッドオーバーフロー防止 */
    }
  
    .kjb-sidebar {
      order: 2;
    }
  
    /* 求人カードの3列表示準備 */
    .kjb-job-cards-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    /* ページネーションの改善 */
    .kjb-pagination {
      display: flex;
    }
  
    .kjb-pagination-mobile {
      display: none;
    }
  
    /* フォームの改善 */
    .kjb-form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  
    .kjb-form-full {
      grid-column: 1 / -1;
    }
  
    /* ソーシャルシェアの改善 */
    .kjb-social-label {
      display: inline;
    }
  
    .kjb-social-btn {
      min-width: auto;
    }
  
    /* テーブルの改善 */
    .kjb-table-responsive {
      overflow-x: auto;
    }
  
    .kjb-table {
      min-width: 600px;
    }
  }
  
  /* =================================================================
     5. タブレット横・小デスクトップ (1024px～1279px)
     ================================================================= */
  
  @media (min-width: 1024px) {
    :root {
      --kjb-container-padding: 32px;
      --kjb-grid-gap: 32px;
    }
  
    /* ヘッダーの最適化 */
    .kjb-header {
      padding: 20px 0;
    }
  
    /* グリッドの3列対応 */
    .kjb-grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .kjb-grid-cols-4 {
      grid-template-columns: repeat(3, 1fr);
    }
  
    /* 求人カードの3列表示 */
    .kjb-job-cards-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  
    /* レイアウトの最適化 */
    .kjb-main-layout {
      grid-template-columns: 1fr 320px;
      gap: var(--kjb-grid-gap);
    }
  
    /* フォームの最適化 */
    .kjb-form-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .kjb-form-half {
      grid-column: span 1;
    }
  
    /* ホバー効果の追加 */
    .kjb-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--kjb-shadow-lg);
    }
  
    .kjb-btn:hover {
      transform: translateY(-1px);
    }
  
    /* 詳細表示の改善 */
    .kjb-job-detail-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--kjb-grid-gap);
    }
  
    .kjb-job-detail-main {
      order: 1;
    }
  
    .kjb-job-detail-sidebar {
      order: 2;
    }
  }
  
  /* =================================================================
     6. 大きなデスクトップ (1280px～1535px)
     ================================================================= */
  
  @media (min-width: 1280px) {
    :root {
      --kjb-container-max-width: 1200px;
      --kjb-grid-gap: 40px;
    }
  
    /* グリッドの4列対応 */
    .kjb-grid-cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  
    /* 求人カードの4列表示 */
    .kjb-job-cards-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    /* レイアウトの最適化 */
    .kjb-main-layout {
      grid-template-columns: 1fr 350px;
    }
  
    /* 詳細ページの最適化 */
    .kjb-job-detail-layout {
      grid-template-columns: 2.5fr 1fr;
    }
  
    /* フォームの最適化 */
    .kjb-form-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    /* 大画面用の余白調整 */
    section {
      padding: var(--kjb-spacing-16) 0;
    }
  }
  
  /* =================================================================
     7. 超大画面対応 (1536px～)
     ================================================================= */
  
  @media (min-width: 1536px) {
    :root {
      --kjb-container-max-width: 1400px;
      --kjb-grid-gap: 48px;
    }
  
    /* 超大画面でのコンテンツ制限 */
    .kjb-container {
      max-width: var(--kjb-container-max-width);
    }
  
    /* グリッドの拡張 */
    .kjb-job-cards-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  
    /* より大きな余白 */
    section {
      padding: var(--kjb-spacing-20) 0;
    }
  
    /* タイポグラフィの調整 */
    h1 {
      font-size: var(--kjb-font-size-5xl);
    }
  
    h2 {
      font-size: var(--kjb-font-size-4xl);
    }
  }
  
  /* =================================================================
     8. タッチデバイス専用
     ================================================================= */
  
  @media (hover: none) and (pointer: coarse) {
    /* タッチデバイス用のホバー効果を無効化 */
    .kjb-card:hover {
      transform: none;
      box-shadow: var(--kjb-shadow);
    }
  
    .kjb-btn:hover {
      transform: none;
    }
  
    /* タッチ用のアクティブ状態 */
    .kjb-btn:active {
      transform: scale(0.95);
    }
  
    .kjb-card:active {
      transform: scale(0.98);
    }
  
    /* より大きなタッチターゲット */
    .kjb-btn,
    .kjb-link-button,
    .kjb-checkbox,
    .kjb-radio {
      min-height: 48px;
      min-width: 48px;
    }
  
    /* スクロール最適化 */
    .kjb-scrollable {
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }
  }
  
  /* =================================================================
     9. 印刷・その他メディア
     ================================================================= */
  
  /* 印刷用スタイル */
  @media print {
    /* 不要な要素を非表示 */
    .kjb-header-nav,
    .kjb-mobile-menu-toggle,
    .kjb-filter-form,
    .kjb-social-share,
    .kjb-btn,
    .kjb-pagination {
      display: none !important;
    }
  
    /* 印刷用レイアウト */
    .kjb-container {
      max-width: none;
      padding: 0;
    }
  
    .kjb-main-layout {
      grid-template-columns: 1fr;
    }
  
    .kjb-sidebar {
      display: none;
    }
  
    /* カードのシンプル化 */
    .kjb-card {
      box-shadow: none;
      border: 1px solid #000;
      margin-bottom: 20px;
      page-break-inside: avoid;
    }
  
    /* テキストの最適化 */
    body {
      font-size: 12pt;
      line-height: 1.4;
      color: #000;
    }
  
    h1, h2, h3 {
      page-break-after: avoid;
    }
  
    a {
      text-decoration: underline;
    }
  
    /* URLの表示 */
    a[href]:after {
      content: " (" attr(href) ")";
      font-size: 10pt;
      color: #666;
    }
  }
  
  /* 高解像度ディスプレイ対応 */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 高解像度用の画像やアイコンの調整 */
    .kjb-icon {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
  }
  
  /* 縦向き・横向き対応 */
  @media (orientation: landscape) and (max-height: 600px) {
    /* 横向きスマホでのヘッダー縮小 */
    .kjb-header {
      min-height: 50px;
      padding: 8px 0;
    }
  
    /* モバイルメニューの調整 */
    .kjb-mobile-menu {
      width: 250px;
    }
  
    /* フィルターフォームの調整 */
    .kjb-filter-form {
      max-height: 60vh;
    }
  }
  
  /* 高さが限られたデバイス */
  @media (max-height: 500px) {
    .kjb-modal {
      max-height: 90vh;
      overflow-y: auto;
    }
  
    .kjb-filter-form {
      max-height: 50vh;
    }
  }
  
  /* マウス使用時の細かい調整 */
  @media (hover: hover) and (pointer: fine) {
    /* デスクトップ用の微細な調整 */
    .kjb-dropdown:hover .kjb-dropdown-menu {
      display: block;
    }
  
    .kjb-tooltip:hover::after {
      opacity: 1;
      visibility: visible;
    }
  }
  
  /* 減色モード対応 */
  @media (prefers-color-scheme: dark) {
    /* ダークモード時のレスポンシブ調整 */
    .kjb-mobile-menu {
      background: var(--kjb-gray-800);
    }
  
    .kjb-filter-form {
      background: var(--kjb-gray-800);
    }
  }
  
  /* 動きの制限設定時 */
  @media (prefers-reduced-motion: reduce) {
    /* アニメーションの無効化 */
    .kjb-mobile-menu,
    .kjb-filter-form,
    .kjb-mobile-menu-overlay {
      transition: none;
    }
  
    /* 即座の表示切り替え */
    .kjb-mobile-menu.kjb-active {
      left: 0;
    }
  
    .kjb-filter-form.kjb-active {
      transform: translateY(0);
    }
  }
  
  /* 小さなビューポート対応 */
  @media (max-width: 320px) {
    :root {
      --kjb-mobile-padding: 8px;
      --kjb-mobile-gap: 8px;
    }
  
    /* 極小画面での調整 */
    .kjb-container {
      padding-left: var(--kjb-mobile-padding);
      padding-right: var(--kjb-mobile-padding);
    }
  
    .kjb-btn {
      padding: 8px 12px;
      font-size: 14px;
    }
  
    .kjb-social-btn {
      padding: 8px;
    }
  
    .kjb-social-label {
      display: none;
    }
  }