/* ==========================================================================
   Studio en Core – Gallery Frontend Styles  v1.0.5
   ========================================================================== */

/* ── ベースリセット ──────────────────────────────────────── */
.sten-archive,
.sten-archive *,
.sten-taxonomy,
.sten-taxonomy *,
.sten-modal,
.sten-modal * {
    box-sizing: border-box;
}

/* ── テーマ干渉リセット ──────────────────────────────────── */
.sten-archive img,
.sten-taxonomy img {
    display: block;
    float: none;
    margin: 0;
    max-width: 100%;
    height: auto;
}
.sten-archive p,
.sten-taxonomy p { margin-bottom: 0; }
.sten-archive a,
.sten-taxonomy a { text-decoration: none; }
.sten-archive button,
.sten-taxonomy button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.sten-archive button:hover,
.sten-archive button:focus,
.sten-taxonomy button:hover,
.sten-taxonomy button:focus {
    background: none !important;   /* テーマの button:hover/focus を無効化 */
    color: inherit !important;
}


/* ==========================================================================
   アーカイブ: 親カテゴリーカード一覧 (/costume/)
   ========================================================================== */

.sten-archive {
    padding: 60px 20px;
    max-width: 1060px;
    margin: 0 auto;
}

/* ── 見出し ── */
.sten-archive__heading {
    text-align: center;
    margin-bottom: 48px;
}
.sten-archive__heading-en {
    display: block;
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    font-weight: 400;
    margin: 0;
}
.sten-archive__heading-ja {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: #999;
    margin-top: 6px;
}

/* ── カテゴリーカードグリッド ── */
.sten-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 680px) {
    .sten-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

.sten-cat-card {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    text-decoration: none;
    background: #ddd;
}
.sten-cat-card > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}
.sten-cat-card:hover > img { transform: scale(1.06); }
.sten-cat-card__overlay {
    position: absolute;
    inset: 0;
    background: transparent; /* デフォルトはなし。管理画面で色設定時にインラインCSSで上書き */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 5px;
    transition: background 0.3s;
    text-shadow: 0 1px 4px rgba(0,0,0,.6); /* 背景なしでも文字が見えるように */
}
/* ホバー背景色は wp_add_inline_style で動的に出力。デフォルトは変化なし */
.sten-cat-card__name {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin: 0;
}
.sten-cat-card__count {
    font-size: 0.72rem;
    opacity: 0.85;
    margin: 0;
}
.sten-cat-card__more {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin-top: 4px;
    border-bottom: 1px solid rgba(255,255,255,.6);
    padding-bottom: 1px;
}
.sten-archive__empty {
    text-align: center;
    color: #aaa;
    font-size: 0.9rem;
    padding: 60px 0;
}


/* ==========================================================================
   タクソノミー: カテゴリーページ (/costume-cat/{slug}/)
   ========================================================================== */

.sten-taxonomy {
    padding: 60px 20px;
    max-width: 1060px;
    margin: 0 auto;
}

/* ── 見出し ── */
.sten-taxonomy__heading {
    text-align: center;
    margin-bottom: 36px;
}
.sten-taxonomy__heading-en {
    display: block;
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    font-weight: 400;
    margin: 0;
}
.sten-taxonomy__heading-ja {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: #999;
    margin-top: 6px;
}

/* ── フィルターバー（共通） ───────────────────────────────── */
.sten-cat-nav {
    margin-bottom: 40px;
}

/* ── フラット型（グループ未設定時） ── */
.sten-cat-nav__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #f8f8f8;
    border-radius: 8px;
}
.sten-cat-nav__label {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #888;
    letter-spacing: 0.08em;
    padding-top: 5px;
    white-space: nowrap;
}
.sten-cat-nav__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

/* ── グループ型（sten_filter_group 設定時） ── */
.sten-cat-nav--grouped {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px 20px;
}
.sten-cat-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sten-cat-nav__title {
    font-size: 0.75rem;
    color: #888;
    letter-spacing: 0.08em;
}
.sten-cat-nav__reset {
    font-size: 0.75rem;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #888;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sten-cat-nav__reset.is-active {
    background: #555;
    border-color: #555;
    color: #fff;
}
.sten-cat-nav__groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sten-filter-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sten-filter-group__label {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #999;
    letter-spacing: 0.06em;
    padding-top: 6px;
    min-width: 4.5em;
    white-space: nowrap;
    margin: 0;
}
.sten-filter-group__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}
@media (max-width: 600px) {
    .sten-cat-nav--grouped { padding: 14px 16px; }
    .sten-filter-group { flex-direction: column; gap: 6px; }
    .sten-filter-group__label { padding-top: 0; }
}

/* ── フィルタータブ ── */
.sten-cat-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px 5px 9px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #555;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    line-height: 1.4;
}
/* チェックボックスアイコン */
.sten-cat-nav__tab::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1.5px solid #ccc;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
/* 「すべてリセット」タブ */
.sten-cat-nav__tab[data-filter="all"] {
    padding: 5px 14px;
    color: #888;
    border-color: #ddd;
    background: #fff;
}
.sten-cat-nav__tab[data-filter="all"]::before { display: none; }
.sten-cat-nav__tab[data-filter="all"].is-active {
    background: #555;
    border-color: #555;
    color: #fff;
}
/* ホバー */
.sten-cat-nav__tab:hover { border-color: #aaa; color: #333; }
.sten-cat-nav__tab:hover::before { border-color: #aaa; }
/* チェック済み */
.sten-cat-nav__tab.is-active {
    background: #222;
    border-color: #222;
    color: #fff;
}
.sten-cat-nav__tab.is-active::before {
    border-color: transparent;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23222' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / 10px;
}
@media (max-width: 600px) {
    .sten-cat-nav__inner { flex-direction: column; gap: 8px; }
    .sten-cat-nav__label { padding-top: 0; }
}


/* ==========================================================================
   衣装グリッド
   ========================================================================== */

.sten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 480px) {
    .sten-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── 衣装カード ── */
.sten-card {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    width: 100%;
    font-family: inherit;
    color: inherit;
    display: block;
}
.sten-card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #f2f2f2;
}
/* 画像は上揃え（衣装の頭・ネックラインが最優先） */
.sten-card .sten-card__img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.3s ease;
}
.sten-card:hover .sten-card__img img { transform: scale(1.04); }
/* ホバーカラーオーバーレイ（管理画面で色設定時にインラインCSSで表示） */
.sten-card__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.sten-card__img .sten-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 0.8rem;
}
.sten-card__body {
    padding: 8px 2px 0;
}
.sten-card__no {
    font-size: 0.7rem;
    color: #999;
    margin: 0 0 2px;
    letter-spacing: 0.04em;
}
.sten-card__name {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    margin: 0;
}
.sten-card__badges {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
    min-height: 20px; /* バッジ有無でカード高さが変わらないよう確保 */
}

/* ── バッジ ── */
.sten-badge-new {
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: #c0392b;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}
.sten-badge-maintenance {
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: #e67e22;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}
.sten-badge-extra {
    font-size: 0.68rem;
    color: #888;
    border: 1px solid #ddd;
    padding: 2px 7px;
    border-radius: 3px;
}

/* ── 空状態 ── */
.sten-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 0;
    color: #aaa;
    font-size: 0.9rem;
}


/* ==========================================================================
   モーダル
   ========================================================================== */

.sten-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.sten-modal.is-open { display: flex; }
.sten-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    cursor: pointer;
}
.sten-modal__box {
    position: relative;
    background: #fff;
    display: flex;
    max-width: 720px;
    width: calc(100% - 40px);
    max-height: 90vh;
    overflow: hidden;
    z-index: 1;
}
@media (max-width: 580px) {
    .sten-modal__box {
        flex-direction: column;
        overflow-y: auto;
    }
}
.sten-modal__image {
    flex: 0 0 45%;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 300px;
    position: relative;
}
.sten-modal__image > img {
    display: block;
    width: 100%;
    flex: 1;
    object-fit: contain;
    object-position: center top;
    min-height: 0;
}

/* ── 前/後 画像切替タブ ── */
.sten-modal__img-tabs {
    display: flex;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.sten-modal__img-tab {
    flex: 1;
    padding: 8px 4px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    background: #f5f5f5;
    border: none;
    border-right: 1px solid #e0e0e0;
    color: #999;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sten-modal__img-tab:last-child { border-right: none; }
.sten-modal__img-tab.is-active {
    background: #fff;
    color: #333;
    font-weight: 600;
}
@media (max-width: 580px) {
    .sten-modal__image {
        flex: 0 0 auto;
        aspect-ratio: 3 / 4;
        width: 100%;
    }
}
.sten-modal__info {
    flex: 1;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    overflow-y: auto;
}
@media (max-width: 580px) {
    .sten-modal__info { padding: 24px 20px; }
}
.sten-modal__badges {
    min-height: 0;
}
.sten-modal__badges:empty {
    display: none;
}
.sten-modal__no {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #333;
    margin: 0;
}
.sten-modal__desc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #555;
    margin: 0;
}

/* ── 閉じるボタン ── */
.sten-modal__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #333;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.sten-modal__close:hover { background: #000; }

/* ── 前後ナビボタン ── */
.sten-modal__prev,
.sten-modal__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(255,255,255,.9);
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    padding: 0;
}
.sten-modal__prev { left: max(8px, calc(50% - 400px)); }
.sten-modal__next { right: max(8px, calc(50% - 400px)); }
.sten-modal__prev:hover,
.sten-modal__next:hover { background: #fff; color: #000; }