/* --- works.css : Gallery Grid System --- */

.works-page {
    background-color: var(--usn-white);
}

.page-title {
    text-align: center;
    padding: 5rem 5% 3rem;
}

.page-title h1 {
    font-size: 2.5rem;
    color: var(--usn-navy);
    letter-spacing: 0.5rem;
    margin-bottom: 1rem;
    word-break: break-word;
    /* 長い単語が画面を突き破るのを防ぐ実務設定ナリ */

}

.page-title p {
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 0.1rem;
    line-height: 1.6;
    /* 3行の文章が読みやすくなる官能の行間ナリ */
    max-width: 800px;
    /* 文章が横に広がりすぎないように制限 */
    margin: 0 auto;
    /* 中央寄せを1.06 BISの精度で維持 */

}

/* --- Works Grid (4列配置ナリ) --- */
.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 5rem;

    /* ここからが追加パッチナリ！ */
    padding: 0 4%;
    /* 左右に4%の官能的な余白を受肉 */
    max-width: 1400px;
    /* 巨大モニターでも広がりすぎない制限 */
    margin-left: auto;
    /* 中央寄せ */
    margin-right: auto;
    /* 中央寄せ */

}

.work-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    position: relative;
}

.work-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--usn-gold);
}

/* 画像エリア：アスペクト比を固定して整列させるナリ */
.work-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}

.work-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.work-card:hover .work-img-wrapper img {
    transform: scale(1.1);
    /* ホバーで少し寄る演出ナリ */
}

/* 情報エリア */
.work-info {
    padding: 1.2rem;
    background: #fff;
}

.modex-code {
    display: block;
    font-size: 0.7rem;
    color: var(--usn-gold);
    font-weight: bold;
    font-family: monospace;
    margin-bottom: 0.3rem;
    letter-spacing: 1px;
}

.work-info h3 {
    font-size: 1rem;
    color: var(--usn-navy);
    letter-spacing: 0.05rem;
    line-height: 1.2;
}

/* --- レスポンシブ：空域の最適化 --- */
@media (max-width: 1100px) {
    .works-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .works-grid {
        grid-template-columns: 1fr;
    }

    .page-title h1 {
        font-size: 1.8rem;
    }

    /* --- レスポンシブ：狭い画面での文字サイズ調整 --- */
    @media (max-width: 500px) {
        .page-title {
            padding: 3rem 1rem 2rem;
            /* スマホでは上下を少し詰めると実務的ナリ */
        }

        .page-title h1 {
            font-size: 1.6rem;
            /* 文字を小さくデバッグ */
            letter-spacing: 0.2rem;
            /* 字間も詰めないと画面からはみ出しちゃうナリ！ */
        }

        .page-title p {
            font-size: 0.8rem;
        }
    }
}

/* --- Dyvdekitor工廠：WORKSブラッシュアップ・パッチ --- */

/* 1. ページタイトルエリアの統一 */
.page-title {
    padding: 5rem 5% 4rem;
    background: linear-gradient(180deg, #f8f9fb 0%, var(--usn-white) 100%);
    border-bottom: 3px solid var(--usn-gold);
    text-align: left;
}

.page-title h1 {
    font-family: 'Sawarabi Mincho', serif;
    border-left: 8px solid var(--usn-gold);
    padding-left: 20px;
}

/* 2. ワークカードの実存感を高める */
.work-card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 34, 68, 0.07);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.4s ease,
                border-bottom-color 0.3s ease;
    border-bottom: 3px solid transparent;
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 34, 68, 0.15);
    border-color: transparent;
    border-bottom-color: var(--usn-gold);
}

/* 3. 情報エリアの質感 */
.work-info {
    border-top: 2px solid #f0f0f0;
}

.modex-code {
    letter-spacing: 0.15rem;
}

/* 4. 画像エリアのスキャンラインオーバーレイ（工廠モニター感） */
.work-img-wrapper {
    position: relative;
}

.work-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* 5. グリッド上部に呼吸感 */
.works-grid {
    padding-top: 3rem;
}