/* ===== Masonry Gallery v2.2.1 ===== */

.mg-root {
    width: 100%;
    box-sizing: border-box;
}

/* ----- タブ ----- */
.mg-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.mg-tab {
    font-size: 13px;
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.5;
}
.mg-tab:hover  { background: #f5f5f5; }
.mg-tab.active { background: #111; color: #fff; border-color: #111; }

/* ----- グリッド ----- */
.mg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ----- アイテム共通 ----- */
.mg-item {
    overflow: hidden;
    border-radius: 6px;
    cursor: zoom-in;
    background: #ececec;
    position: relative;
}
.mg-item:hover img { opacity: .82; }

/* 縦型: 高さ統一 (2:3) */
.mg-item--portrait {
    aspect-ratio: 2 / 3;
}
.mg-item--portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: opacity .2s;
    border-radius: 6px;
}

/* 横型: 16:9 固定 */
.mg-item--landscape {
    aspect-ratio: 16 / 9;
}
.mg-item--landscape img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity .2s;
    border-radius: 6px;
}

/* モーダル本体 */
.mg-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    z-index: 99999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
    flex-direction: column;
    align-items: center;
    padding: 38px 8px 8px;
    width: min(92vw, 960px);
    max-height: 94vh;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    box-sizing: border-box;
}
.mg-modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 閉じるボタン */
.mg-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    line-height: 1;
}
.mg-modal-close:hover { background: #ddd; }

/* モーダル画像 */
.mg-modal-img {
    width: 100%;
    max-height: calc(94vh - 54px);
    display: block;
    border-radius: 6px;
    object-fit: contain;
}

/* ===== スマホ ===== */
@media (max-width: 767px) {
    .mg-grid                              { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .mg-grid.is-landscape                 { grid-template-columns: repeat(1, 1fr); }
    .mg-grid.is-all .mg-item--landscape   { grid-column: span 2; }
    .mg-item                              { border-radius: 4px; }
    .mg-item img                          { border-radius: 4px; }
    .mg-modal {
        width: 96vw;
        max-height: 96vh;
        padding: 34px 6px 6px;
        border-radius: 8px;
    }
    .mg-modal-img { max-height: calc(96vh - 46px); }
}