/* ================================================
   GALLERY SYSTEM — maekawakazuhito.com
   赤×白×セリフ体 デザインシステム踏襲
================================================ */

/* ====== ギャラリーページ共通ヘッダー ====== */
.gallery-page-header {
    padding: 120px 0 60px;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(232,25,25,0.3);
}
.gallery-page-header__label {
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .55;
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.gallery-page-header__label::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-white);
    opacity: .55;
}
.gallery-page-header__title {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 300;
    letter-spacing: .08em;
    line-height: 1.0;
    margin-bottom: .4rem;
}
.gallery-page-header__sub {
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: .2em;
    opacity: .7;
    margin-top: .5rem;
}

/* ====== シリーズグリッド ====== */
.series-grid-section {
    background: var(--color-primary);
    padding: 60px 0 100px;
}
.series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

/* ====== シリーズカード ====== */
.series-card {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    position: relative;
    min-width: 0;
    overflow: hidden;
}
.series-card__img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    background: #8a0a0a;
}
.series-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(0.4,0,0.2,1), filter .6s ease;
    filter: brightness(.92) saturate(1.05);
}
.series-card__img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8a0a0a 0%, #c01212 100%);
}
.series-card:hover .series-card__img {
    transform: scale(1.06);
    filter: brightness(1.0) saturate(1.1);
}
/* ホバーオーバーレイ（ディスクリプション） */
.series-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,0,0,0.92) 0%, rgba(10,0,0,0.6) 50%, rgba(10,0,0,0.1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px;
    opacity: 0;
    transition: opacity .4s ease;
}
.series-card:hover .series-card__overlay { opacity: 1; }
.series-card__desc {
    font-size: .82rem;
    line-height: 1.75;
    opacity: .9;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.series-card__view {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border: 1px solid rgba(255,255,255,0.5);
    width: fit-content;
    opacity: .85;
}
/* カード下部情報 */
.series-card__info {
    padding: 16px 18px 20px;
    background: #c01212;
}
.series-card__year {
    font-family: "IBM Plex Mono", monospace;
    font-size: .62rem;
    letter-spacing: .15em;
    opacity: .65;
    margin-bottom: .3rem;
}
.series-card__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.4;
    margin-bottom: .3rem;
}
.series-card__count {
    font-family: "IBM Plex Mono", monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    opacity: .55;
    text-transform: uppercase;
}

/* ====== シリーズ詳細ヘッダー ====== */
.series-page-header {
    padding: 120px 0 60px;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(232,25,25,0.3);
}
.series-back {
    display: inline-block;
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 1.5rem;
    transition: opacity .3s;
}
.series-back:hover { opacity: 1; }
.series-page-header__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: .62rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.series-page-header__label::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-primary);
}
.series-page-header__title {
    font-family: "Cormorant Garamond", var(--font-serif);
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 300;
    letter-spacing: .08em;
    line-height: 1.05;
    margin-bottom: .8rem;
}
.series-page-header__desc {
    font-size: .88rem;
    line-height: 1.9;
    max-width: 600px;
    opacity: .8;
    margin-bottom: .8rem;
}
.series-page-header__count {
    font-family: "IBM Plex Mono", monospace;
    font-size: .65rem;
    letter-spacing: .15em;
    opacity: .5;
    text-transform: uppercase;
}

/* ====== 作品グリッド ====== */
.artwork-grid-section {
    background: var(--color-primary);
    padding: 60px 0 100px;
}
.artwork-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

/* ====== 作品カード ====== */
.artwork-card {
    cursor: pointer;
    background: #8a0a0a;
    transition: transform .3s ease;
    min-width: 0;
    overflow: hidden;
}
.artwork-card:hover { transform: translateY(-2px); }
.artwork-card__img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
}
.artwork-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(0.4,0,0.2,1), filter .5s ease;
    filter: brightness(.9) saturate(1.05);
}
.artwork-card__img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8a0a0a, #c01212);
}
.artwork-card:hover .artwork-card__img { transform: scale(1.07); filter: brightness(1.0); }
.artwork-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.artwork-card:hover .artwork-card__overlay { opacity: 1; }
.artwork-card__view {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255,255,255,0.65);
}
.artwork-card__info {
    padding: 12px 14px 16px;
    background: #c01212;
}
.artwork-card__code {
    font-family: "IBM Plex Mono", monospace;
    font-size: .58rem;
    letter-spacing: .15em;
    opacity: .55;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.artwork-card__title {
    font-family: var(--font-serif);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artwork-card__en {
    font-size: .72rem;
    font-style: italic;
    opacity: .65;
    margin-top: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artwork-card__year {
    font-family: "IBM Plex Mono", monospace;
    font-size: .6rem;
    letter-spacing: .1em;
    opacity: .5;
    margin-top: .3rem;
}

/* ====== 作品モーダル ====== */
.aw-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.aw-modal[hidden] { display: none !important; }

.aw-modal__backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(8,0,0,0.9) !important;
    backdrop-filter: blur(6px) !important;
    cursor: pointer !important;
}
.aw-modal__panel {
    position: relative !important;
    z-index: 1 !important;
    background: #1b0505 !important;
    width: min(980px, 96vw) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border: 1px solid rgba(232,25,25,0.25) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
    animation: awModalIn .35s cubic-bezier(0.16,1,0.3,1) both !important;
}
@keyframes awModalIn {
    from { opacity:0; transform: translateY(16px) scale(.98); }
    to   { opacity:1; transform: none; }
}

/* 閉じるボタン */
.aw-modal__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
.aw-modal__close span {
    position: absolute !important;
    width: 18px !important;
    height: 1.5px !important;
    background: rgba(255,255,255,0.5) !important;
    top: 50% !important;
    left: 50% !important;
    transition: background .3s !important;
}
.aw-modal__close span:first-child { transform: translate(-50%,-50%) rotate(45deg) !important; }
.aw-modal__close span:last-child  { transform: translate(-50%,-50%) rotate(-45deg) !important; }
.aw-modal__close:hover span { background: #fff !important; }

/* モーダル内レイアウト */
.aw-modal__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 500px !important;
}

/* 画像エリア */
.aw-modal__gallery {
    background: #0a0000 !important;
    display: flex !important;
    flex-direction: column !important;
}
.aw-modal__main-img-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    min-height: 360px !important;
}
.aw-modal__main-img {
    max-width: 100% !important;
    max-height: 480px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
.aw-modal__thumbs {
    display: flex !important;
    gap: 4px !important;
    padding: 12px !important;
    background: rgba(0,0,0,0.4) !important;
    overflow-x: auto !important;
}
.aw-thumb {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    opacity: .6 !important;
    transition: opacity .3s, border-color .3s !important;
}
.aw-thumb.is-active,
.aw-thumb:hover {
    opacity: 1 !important;
    border-color: var(--color-primary) !important;
}

/* 情報エリア */
.aw-modal__info {
    padding: 52px 40px 40px !important;
    display: flex !important;
    flex-direction: column !important;
}
.aw-modal__label {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: .58rem !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    margin-bottom: .75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .7rem !important;
}
.aw-modal__label::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    background: var(--color-primary) !important;
}
.aw-modal__title {
    font-family: var(--font-serif) !important;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    line-height: 1.45 !important;
    margin-bottom: .4rem !important;
}
.aw-modal__en {
    font-family: "Cormorant Garamond", serif !important;
    font-style: italic !important;
    font-size: 1rem !important;
    opacity: .65 !important;
    margin-bottom: 2rem !important;
    letter-spacing: .05em !important;
}

/* スペック */
.aw-modal__specs {
    display: grid !important;
    gap: 0 !important;
    flex: 1 !important;
    margin-bottom: 2rem !important;
}
.aw-spec-row {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    padding: .75rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    align-items: baseline !important;
}
.aw-spec-key {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: .6rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    opacity: .8 !important;
}
.aw-spec-val {
    font-size: .85rem !important;
    line-height: 1.6 !important;
    opacity: .85 !important;
    letter-spacing: .03em !important;
}

/* ナビ */
.aw-modal__nav {
    display: flex !important;
    gap: .75rem !important;
    margin-top: auto !important;
}
.aw-modal__nav-btn {
    padding: .6rem 1.2rem !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: transparent !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: .65rem !important;
    letter-spacing: .18em !important;
    cursor: pointer !important;
    transition: all .3s !important;
}
.aw-modal__nav-btn:hover {
    border-color: rgba(255,255,255,0.6) !important;
    color: #fff !important;
}

/* ====== Empty状態 ====== */
.gallery-empty {
    padding: 60px 0;
    text-align: center;
    opacity: .65;
}
.btn-link {
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.4);
    font-size: .75rem;
    letter-spacing: .15em;
}

/* ====== レスポンシブ ====== */
/* ================================================
   レスポンシブ（スマホ完全対応）
================================================ */
@media (max-width: 1100px) {
    .artwork-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .series-grid  { grid-template-columns: repeat(2, 1fr); }
    .artwork-grid { grid-template-columns: repeat(2, 1fr); }
    .aw-modal__inner { grid-template-columns: 1fr; }
    .aw-modal__main-img-wrap { min-height: 260px; padding: 24px; }
    .aw-modal__info { padding: 28px 24px 32px; }
    /* ページヘッダー */
    .gallery-page-header,
    .series-page-header { padding: 90px 0 40px; }
    .gallery-page-header__title,
    .series-page-header__title { font-size: 3rem; }
    /* セクション内padding */
    .gallery-section,
    .artwork-grid-section,
    .series-grid-section { padding: 40px 0 60px; }
}
@media (max-width: 540px) {
    /* グリッド */
    .series-grid  { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .artwork-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    /* カード情報 */
    .artwork-card__title { font-size: .78rem; }
    .artwork-card__code  { font-size: .55rem; }
    .series-card__title  { font-size: .88rem; }
    .series-card__info   { padding: 12px 14px 16px; }
    /* ヘッダー */
    .gallery-page-header,
    .series-page-header { padding: 80px 0 30px; }
    .gallery-page-header__title { font-size: 2.5rem; }
    .series-page-header__title  { font-size: 2.2rem; }
    .series-page-header__desc   { font-size: .82rem; }
    /* モーダル */
    .aw-modal { padding: 8px !important; }
    .aw-modal__panel { max-height: 95vh !important; }
    .aw-modal__main-img-wrap { min-height: 200px; padding: 16px; }
    .aw-modal__info { padding: 20px 18px 24px; }
    .aw-modal__title { font-size: 1rem !important; }
    .aw-spec-row { grid-template-columns: 70px 1fr !important; }
    /* ← Gallery リンク */
    .series-back { font-size: .6rem; }
}
@media (max-width: 380px) {
    .artwork-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
    .series-grid  { grid-template-columns: 1fr; }
}