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

/* タブレット用サイズ（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-left {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .header-logo {
        width: 116px;
    }
    
    .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-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-logo-link {
        padding: 0.3rem 0.4rem;
    }

    .header-logo {
        width: 108px;
    }
    
    .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) {
    :root {
        color-scheme: dark;
        --light-color: #0b1220;
        --dark-color: #f3f7fb;
        --text-color: #dbe4ee;
        --border-color: #334155;
        --header-bg: #111827;
        --section-heading-color: #ff8a6a;
        --accent-color: #ff6b57;
        --primary-color: #e04f3f;
        --primary-dark: #ff7b6d;
        --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    }

    html,
    body {
        background: #08111f;
        color: var(--text-color);
    }

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

    ::-webkit-scrollbar-thumb {
        background: #445168;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #5d6d89;
    }

    .main-container {
        background: #111827;
        border-left-color: #243041;
        border-right-color: #243041;
        box-shadow: var(--shadow);
    }

    .header,
    .footer {
        background: #0f172a;
    }

    .header-subtitle,
    .header .version,
    .header .unit-toggle-label,
    .footer,
    .unit-toggle-label,
    .input-hint,
    .breakdown-label,
    .shank-image-caption,
    .calculation-time,
    .shank-no-match,
    .initial-message,
    .initial-message h2 {
        color: #b7c4d4;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .section-heading,
    .input-label,
    .output-area .section-title,
    .output-content h2,
    .output-group h3,
    .result-section h3,
    .drawing-preview-section h3,
    .shank-recommendation-section h3,
    .breakdown-value,
    #part-number-text,
    .part-number-text,
    .radio-group label,
    .head-preview-area .head-preview-label,
    .notification-message {
        color: #edf3f8;
    }

    .input-area {
        background: #162133;
        border-color: #334155;
        color: var(--text-color);
    }

    .output-area {
        background: #0f172a;
        border-color: #334155;
        color: var(--text-color);
    }

    .input-group fieldset,
    fieldset.input-group {
        background: #111b2b;
        border-color: #3a475d;
    }

    .section-heading,
    .output-area .section-title,
    .output-content h2,
    .dimension-header,
    .shank-recommendation-section h3 {
        border-bottom-color: #334155;
    }

    input,
    select,
    textarea,
    .number-input,
    .select-input {
        background: #0f172a;
        color: #f8fbff;
        border-color: #475569;
    }

    input::placeholder,
    textarea::placeholder {
        color: #94a3b8;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .number-input:focus,
    .select-input:focus {
        border-color: #ff7b6d;
        box-shadow: 0 0 0 0.2rem rgba(255, 107, 87, 0.22);
    }

    .head-preview-area,
    .head-image-container,
    .drawing-preview-section,
    .drawing-preview-container,
    .part-number-display,
    .breakdown-item,
    .shank-type-block,
    .shank-image-item,
    .notification {
        background: #162133;
        border-color: #334155;
        color: var(--text-color);
    }

    .drawing-canvas {
        background-color: #ffffff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    }

    .dimension-table th,
    .results-table th,
    .shank-spec-table th {
        background: #1e293b;
        color: #f8fbff;
    }

    .dimension-table th,
    .dimension-table td,
    .results-table th,
    .results-table td,
    .shank-spec-table td {
        border-bottom-color: #334155;
    }

    .dimension-table td,
    .results-table td,
    .shank-spec-table td {
        color: #dbe4ee;
        background: transparent;
    }

    .dimension-table tr:hover,
    .results-table tr:hover,
    .shank-spec-table tr:hover {
        background: #182235;
    }

    .shank-spec-table tr:nth-child(even) {
        background: #111b2b;
    }

    .info-placeholder {
        background: #4a3510;
        border-color: #8f6a1d;
        color: #ffe29a;
    }

    .validation-errors-container,
    .status-display.error {
        background: #3b1419;
        border-color: #7f1d1d;
        color: #fecaca;
    }

    .error-title,
    .error-link,
    .status-message.error,
    .error-message {
        color: #fecaca;
    }

    .error-link:hover {
        color: #ffe4e6;
    }

    .status-display.success {
        background: #0f2d22;
        border-color: #166534;
    }

    .status-message.success {
        color: #bbf7d0;
    }

    .warning-message {
        color: #fde68a;
    }

    .notification-close {
        color: #cbd5e1;
    }

    .notification-close:hover {
        color: #ffffff;
    }
}

/* アクセシビリティ向上 */
@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);
    }
}