/* ============================================
   CLINEX - 医師向け転職支援サービス
   カスタムスタイルシート
   ============================================ */

/* ============================================
   アニメーション定義
   ============================================ */

/* フェードインアニメーション */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ============================================
   フォーム要素のカスタムスタイル
   ============================================ */

/* フォーカス時のスタイル調整（Tailwind設定で補えない場合用） */
select:focus, 
input:focus {
    outline: none;
    border-color: #1E3A8A;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
}

/* セレクトボックスのカスタマイズ */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* ============================================
   スムーズスクロール
   ============================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================
   カスタムスクロールバー（Webkit系ブラウザ用）
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F4F7F9;
}

::-webkit-scrollbar-thumb {
    background: #1E3A8A;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1E40AF;
}

/* ============================================
   レスポンシブ調整
   ============================================ */

/* モバイル最適化 */
@media (max-width: 640px) {
    /* タッチターゲットの最小サイズ確保 */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* フォント調整 */
    body {
        font-size: 14px;
    }
    
    /* 働き方ボタンの選択時カラー統一 */
    .work-style-btn.bg-\[#1E3A8A\] {
        background-color: #1E3A8A !important;
        border-color: #1E3A8A !important;
        color: white !important;
    }
    
    /* ヘッダーの縦幅を短く（2/3程度） */
    header .flex.justify-between {
        height: 40px !important; /* 60px → 40px（約2/3） */
    }
    
    /* Hero セクションのマージン調整（モバイル） */
    section.relative.pt-6 {
        padding-top: 1rem !important; /* 24px → 16px */
    }
    
    /* 「医師のための求人サイト」バッジのマージン調整 */
    .inline-flex.items-center.px-3.py-1 {
        margin-bottom: 0.5rem !important; /* 12px → 8px */
    }
    
    /* 「満足度98.4％」バッジエリアの上下マージン調整 */
    .flex.flex-row.flex-wrap.justify-center {
        margin-top: 0.5rem !important; /* 上マージン追加 */
        margin-bottom: 0 !important;
    }
    
    /* 丸型「完全無料」バッジのスタイル調整 */
    .bg-white\/95 .bg-\[#E6F4FB\]\/50 .flex.items-center span {
        line-height: 1.1 !important;
        text-align: center;
    }
    
    /* フォーム内の各要素の縦幅・マージン調整 */
    #entry-form .space-y-4 {
        gap: 0.875rem; /* 14px - 元の16pxから少し短縮 */
    }
    
    #entry-form .space-y-6 {
        gap: 0.875rem; /* 14px - Step2,3のスペースも短縮 */
    }
    
    /* フォームヘッダーのパディング調整 */
    .bg-white\/95 > .bg-\[#E6F4FB\]\/50 {
        padding: 0.875rem 1rem; /* 上下を少し短縮 */
    }
    
    /* フォームコンテンツのパディング調整 */
    #entry-form {
        padding: 1rem 1.25rem; /* 上下を少し短縮 */
    }
    
    /* ラベルのマージン調整 */
    #entry-form label {
        margin-bottom: 0.5rem; /* 元の mb-1.5 (6px) から8pxへ */
    }
    
    /* Stats セクションのUI改善 */
    section.bg-white.border-y {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 0.75rem 1rem; /* 縦0.75rem、横1rem */
    }
    
    .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 0.625rem 0.375rem; /* 上下10px、左右6px */
        min-height: 70px; /* 最小高さを確保 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    /* Stats内のテキスト調整 */
    .grid.grid-cols-2.md\:grid-cols-4 p.font-bold.text-\[#2C81BA\] {
        line-height: 1.25 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .grid.grid-cols-2.md\:grid-cols-4 p.text-slate-500 {
        line-height: 1.35 !important;
        margin-top: 0.375rem !important;
    }
}

/* ============================================
   プリント時のスタイル
   ============================================ */
@media print {
    header, footer {
        display: none;
    }
    
    body {
        background: white;
    }
}

/* ============================================
   アクセシビリティ対応
   ============================================ */

/* フォーカス時の視認性向上 */
*:focus-visible {
    outline: 2px solid #1E3A8A;
    outline-offset: 2px;
}

/* 縮小モーション設定時のアニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   パフォーマンス最適化
   ============================================ */

/* ハードウェアアクセラレーション */
.animate-fade-in {
    will-change: transform, opacity;
}

/* 画像の最適化 */
img {
    max-width: 100%;
    height: auto;
}