/* レスポンシブデザイン対応 */

/* タブレット用サイズ（1024px以下） */
@media (max-width: 1024px) {
    .main-container {
        max-width: 100%;
    }
    
    .input-area,
    .output-area {
        padding: 1.25rem 1.5rem;
    }
    
    .header h1 {
        font-size: 1.3rem;
    }
    
    .header-subtitle {
        font-size: 0.75rem;
    }
    
    .dimension-table,
    .results-table {
        font-size: 0.85rem;
    }
    
    .head-image {
        max-width: 250px;
        max-height: 250px;
    }
}

/* モバイル用サイズ（768px以下） */
@media (max-width: 768px) {
    .header {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .header h1 {
        font-size: 1.1rem;
    }
    
    .header-subtitle {
        font-size: 0.7rem;
    }
    
    .header-right {
        align-self: flex-end;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .input-area,
    .output-area {
        padding: 1rem;
    }
    
    .input-group legend {
        font-size: 0.9rem;
    }
    
    .radio-group.horizontal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* ヘッドタイプグリッドを1カラム化 */
    .head-type-grid {
        grid-template-columns: 1fr;
    }
    
    .head-preview-area {
        min-height: 120px;
    }
    
    .part-number-display {
        font-size: 1rem;
        padding: 0.5rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .copy-button {
        margin-left: 0;
        margin-top: 0.5rem;
        align-self: flex-end;
        width: auto;
    }
    
    .dimension-table,
    .results-table {
        font-size: 0.8rem;
    }
    
    .dimension-table th,
    .dimension-table td,
    .results-table th,
    .results-table td {
        padding: 0.375rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .head-hover-tooltip {
        display: none !important;
    }
    
    .head-image {
        max-width: 200px;
        max-height: 200px;
    }
    
    .pdf-button {
        padding: 0.625rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
        max-width: 300px;
    }
    
    .footer {
        padding: 0.75rem;
        font-size: 0.75rem;
    }
    
    /* 型番内訳グリッドのカラム数調整 */
    .breakdown-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    /* シャンク画像を1カラム化 */
    .shank-image-item {
        min-width: 150px;
    }
    
    /* シャンクテーブルのモバイル対応 */
    .shank-spec-table {
        font-size: 0.72rem;
    }
    
    .shank-spec-table th {
        padding: 0.25rem 0.3rem;
        font-size: 0.68rem;
        white-space: normal;
        word-break: break-word;
    }
    
    .shank-spec-table td {
        padding: 0.2rem 0.3rem;
        white-space: normal;
        word-break: break-word;
    }
    
    /* テーブル横スクロールのヒント表示（テーブルがはみ出す場合のみJSで表示） */
    .shank-table-wrapper {
        position: relative;
    }
    
    /* 通知コンテナの幅調整 */
    .notification-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    
    /* dimension-header のflex折り返し */
    .dimension-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* fieldsetのpadding調整 */
    .input-group fieldset,
    fieldset.input-group {
        padding: 0.75rem 1rem;
    }
}

/* 小型モバイル用サイズ（480px以下） */
@media (max-width: 480px) {
    .header {
        padding: 0.75rem;
    }
    
    .header h1 {
        font-size: 1.05rem;
    }
    
    .header-subtitle {
        font-size: 0.65rem;
    }
    
    .header-right {
        gap: 0.5rem;
    }
    
    .main-container {
        padding: 0;
        gap: 0;
    }
    
    .input-area,
    .output-area {
        padding: 0.75rem;
    }
    
    .input-group {
        margin-bottom: 1rem;
    }
    
    .input-group fieldset,
    fieldset.input-group {
        padding: 0.5rem 0.75rem;
    }
    
    .output-group {
        margin-bottom: 1.5rem;
    }
    
    .dimension-table,
    .results-table {
        font-size: 0.75rem;
    }
    
    .dimension-table th,
    .dimension-table td,
    .results-table th,
    .results-table td {
        padding: 0.25rem;
    }
    
    .head-image {
        max-width: 150px;
        max-height: 150px;
    }
    
    .head-preview-area {
        min-height: 100px;
    }
    
    .input-label {
        font-size: 0.85rem;
    }
    
    .number-input,
    .select-input {
        font-size: 0.85rem;
        padding: 0.375rem;
    }
    
    .error-message,
    .input-hint {
        font-size: 0.75rem;
    }
    
    .copy-button,
    .pdf-button {
        font-size: 0.85rem;
    }
    
    /* 型番内訳を2カラムに */
    .breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .breakdown-item {
        padding: 0.3rem 0.5rem;
    }
    
    .breakdown-label {
        font-size: 0.65rem;
    }
    
    .breakdown-value {
        font-size: 0.85rem;
    }
    
    /* 型番表示フォントサイズ調整 */
    .part-number-display {
        font-size: 0.9rem;
    }
    
    /* シャンクテーブルフォント（480px以下） */
    .shank-spec-table {
        font-size: 0.65rem;
    }
    
    .shank-spec-table th {
        padding: 0.15rem 0.2rem;
        font-size: 0.6rem;
    }
    
    .shank-spec-table td {
        padding: 0.15rem 0.2rem;
    }
    
    .shank-type-block {
        padding: 0.5rem;
    }
    
    .shank-images {
        gap: 0.5rem;
    }
    
    .shank-image-item {
        min-width: 120px;
    }
    
    /* 図面プレビュー */
    .drawing-preview-container {
        padding: 0.5rem;
    }
    
    .drawing-preview-section {
        padding: 0.5rem;
    }
    
    /* ステータス表示のフォントサイズ */
    .status-display {
        padding: 0.5rem;
    }
    
    .status-message {
        font-size: 0.85rem;
    }
    
    /* バリデーションエラー */
    .validation-errors-container {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .error-link {
        font-size: 0.8rem;
    }
    
    /* 結果セクション見出し */
    .result-section h3 {
        font-size: 0.95rem;
    }
    
    .output-area .section-title {
        font-size: 1.1rem;
    }
}

/* 印刷用スタイル */
@media print {
    .header,
    .footer,
    .pdf-area {
        display: none;
    }
    
    .main-container {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 1rem;
    }
    
    .input-area,
    .output-area {
        border: 1px solid #000;
        margin-bottom: 1rem;
        break-inside: avoid;
    }
    
    .output-area {
        page-break-inside: avoid;
    }
    
    .dimension-table {
        border: 1px solid #000;
    }
    
    .dimension-table th,
    .dimension-table td {
        border: 1px solid #000;
    }
    
    .head-image {
        max-width: 300px;
        max-height: 300px;
    }
    
    .copy-button {
        display: none;
    }
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .head-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ダークモード対応（ユーザーのシステム設定に基づく） */
@media (prefers-color-scheme: dark) {
    .input-area {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .output-area {
        background: #1a202c;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .dimension-table th {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .dimension-table th,
    .dimension-table td {
        border-bottom-color: #4a5568;
    }
    
    .part-number-display {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }
    
    .head-image-container {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .info-placeholder {
        background: #744210;
        border-color: #975a16;
        color: #fbb6ce;
    }
}

/* アクセシビリティ向上 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* フォーカス時の視覚的改善（キーボードナビゲーション） */
@media (prefers-reduced-motion: no-preference) {
    .number-input:focus,
    .select-input:focus,
    .copy-button:focus,
    .pdf-button:focus {
        animation: focus-pulse 2s infinite;
    }
}

@keyframes focus-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    50% {
        box-shadow: 0 0 0 0.3rem rgba(0, 123, 255, 0.4);
    }
}