/* ZERO — VRChat向けアセット配布ページ。catalog.js が作るカタログを Material 3 Expressive 風に表示します。 */

.catalog-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-inline:0}
.catalog-panel .page-section-head{margin-bottom:0}

/* ===== 上の操作列（戻る・現在地・再読み込み） ===== */
.catalog-stage-nav{display:flex;align-items:center;gap:8px;padding:6px;background:var(--surface-container);border-radius:999px}
.catalog-back-button{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:44px;padding:0 18px 0 14px;border:0;background:var(--secondary-container);color:var(--on-secondary-container);border-radius:22px;font-weight:900;cursor:pointer;transition:border-radius .4s var(--spring-fast),opacity .2s}
.catalog-back-button svg{width:20px;height:20px}
.catalog-back-button:active{border-radius:14px}
.catalog-back-button:disabled{background:transparent;color:var(--on-surface-variant);cursor:default}
.catalog-breadcrumbs{display:flex;flex:1;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.catalog-breadcrumbs::-webkit-scrollbar{display:none}
.catalog-breadcrumbs button,.catalog-breadcrumbs [aria-current]{flex:0 0 auto;min-height:36px;padding:0 14px;border:0;border-radius:999px;font-weight:900;font-size:.9rem;line-height:36px}
.catalog-breadcrumbs button{background:transparent;color:var(--primary);cursor:pointer;transition:background-color .2s}
@media(hover:hover){.catalog-breadcrumbs button:hover{background:var(--surface-container-highest)}}
.catalog-breadcrumbs [aria-current]{background:var(--primary);color:var(--on-primary)}
.catalog-breadcrumb-separator{flex:0 0 auto;color:var(--on-surface-variant);font-weight:700}
.catalog-refresh-button{display:inline-grid;flex:0 0 auto;place-items:center;width:44px;height:44px;padding:0;border:0;background:var(--surface-container-highest);color:var(--on-surface);border-radius:22px;cursor:pointer;transition:border-radius .4s var(--spring-fast),rotate .6s var(--spring)}
.catalog-refresh-button svg{width:22px;height:22px}
@media(hover:hover){.catalog-refresh-button:hover{rotate:-90deg}}
.catalog-refresh-button:active{border-radius:14px}
.catalog-refresh-button:disabled{opacity:.6;cursor:progress}

/* ===== 一覧 ===== */
.catalog-file-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-height:240px;outline:none}
.catalog-file-list.is-entering{animation:catalogEnter .45s var(--spring)}
/* 文字の濃さ（コントラスト）が途中で薄くならないよう、透明度は変えずに動きだけにしています */
@keyframes catalogEnter{from{transform:translateY(10px) scale(.99)}to{transform:none}}
.catalog-section-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.catalog-section-title h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.3;outline:none}
.catalog-section-title span{padding:2px 12px;background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:999px;font-family:var(--flex);font-weight:800;font-size:.8rem}
.catalog-section-divider{width:100%;height:10px;margin:6px 0;border:0;background-image:radial-gradient(var(--outline-variant) 2.5px,transparent 3px);background-size:14px 10px;background-position:center}

.catalog-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.catalog-category-card{display:flex;align-items:center;gap:14px;min-height:104px;padding:14px 18px 14px 14px;border:0;background:var(--surface-container-high);color:var(--on-surface);border-radius:28px;text-align:left;cursor:pointer;--tone:var(--pop-pink);--shape:var(--shape-cookie9);transition:border-radius .45s var(--spring-fast),background-color .25s var(--effects),translate .45s var(--spring)}
.catalog-category-card[data-kind="world"]{--tone:var(--pop-blue);--shape:var(--shape-clover4)}
@media(hover:hover){.catalog-category-card:hover{background:color-mix(in oklch,var(--tone) 35%,var(--surface-container-high));border-radius:40px}}
.catalog-category-card:active{border-radius:18px}
.catalog-category-card.is-featured{min-height:150px;padding:20px 24px 20px 20px;background:var(--tone);color:var(--on-pop)}
@media(hover:hover){.catalog-category-card.is-featured:hover{background:color-mix(in oklch,var(--tone) 80%,#fff)}}
.catalog-category-artwork{display:grid;flex:0 0 auto;place-items:center;width:64px;height:64px;background:color-mix(in oklch,var(--tone) 45%,#fff);color:var(--on-pop);clip-path:var(--shape);transition:clip-path .6s var(--spring),rotate .6s var(--spring)}
.catalog-category-card.is-featured .catalog-category-artwork{width:80px;height:80px;background:color-mix(in oklch,#fff 62%,var(--tone))}
@media(hover:hover){.catalog-category-card:hover .catalog-category-artwork{clip-path:var(--shape-circle);rotate:-24deg}}
.catalog-category-artwork svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.catalog-category-artwork .catalog-art-spark{fill:currentColor;stroke:none}
.catalog-category-copy{display:grid;flex:1;min-width:0}
.catalog-category-copy strong{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.3;overflow-wrap:break-word}
.catalog-category-card.is-featured .catalog-category-copy strong{font-size:1.5rem}
.catalog-category-copy small{font-weight:700;font-size:.82rem;opacity:.85}
.catalog-card-arrow{flex:0 0 auto;font-weight:900;font-size:1.2rem;transition:translate .45s var(--spring)}
@media(hover:hover){.catalog-category-card:hover .catalog-card-arrow{translate:4px 0}}

.catalog-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.catalog-item-card{display:flex;flex-direction:column;gap:10px;padding:10px 10px 14px;border:0;background:var(--surface-container-high);color:var(--on-surface);border-radius:28px;text-align:left;cursor:pointer;--tone:var(--pop-violet);transition:border-radius .45s var(--spring-fast),background-color .25s var(--effects),box-shadow .25s,translate .45s var(--spring)}
.catalog-item-card:nth-child(4n+2){--tone:var(--pop-mint)}
.catalog-item-card:nth-child(4n+3){--tone:var(--pop-yellow)}
.catalog-item-card:nth-child(4n+4){--tone:var(--pop-orange)}
@media(hover:hover){.catalog-item-card:hover{background:color-mix(in oklch,var(--tone) 35%,var(--surface-container-high));border-radius:36px;box-shadow:var(--elev-2)}}
.catalog-item-card:active{border-radius:20px}
.catalog-item-art{display:grid;place-items:center;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--tone);clip-path:var(--shape-square);transition:clip-path .7s var(--spring)}
@media(hover:hover){.catalog-item-card:hover .catalog-item-art{clip-path:var(--shape-cookie12)}}
.catalog-item-art img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--spring)}
@media(hover:hover){.catalog-item-card:hover .catalog-item-art img{scale:1.1}}
.catalog-preview-placeholder{padding:0 12px;color:var(--on-pop);font-weight:900;font-size:.85rem;text-align:center}
.catalog-item-copy{display:grid;gap:6px;padding:0 6px}
.catalog-item-copy strong{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.3;overflow-wrap:anywhere}
.catalog-item-meta{display:flex;flex-wrap:wrap;gap:4px}
.catalog-item-meta span{padding:1px 10px;background:var(--secondary-container);color:var(--on-secondary-container);border-radius:8px;font-weight:700;font-size:.76rem}
.catalog-item-affordance{display:inline-flex;gap:6px;color:var(--primary);font-weight:900;font-size:.88rem}
@media(hover:hover){.catalog-item-card:hover .catalog-item-affordance{color:var(--on-surface)}}

/* ===== 読み込み中・エラー ===== */
.catalog-empty-state{display:grid;justify-items:center;gap:8px;padding:clamp(28px,6vw,56px) 20px;background:var(--surface-container);border-radius:32px;text-align:center}
.catalog-empty-state h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.4;outline:none}
.catalog-empty-state p{margin:0;max-width:34em;color:var(--on-surface-variant);font-weight:700}
.catalog-spinner{display:inline-block;flex:0 0 auto;width:48px;height:48px;background:var(--primary);clip-path:var(--shape-cookie9);animation:loaderMorph 2.6s var(--spring) infinite,loaderSpin 2.6s linear infinite}
.catalog-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.catalog-retry-button,.catalog-primary-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;background:var(--primary);color:var(--on-primary);border-radius:24px;font-weight:900;cursor:pointer;transition:border-radius .45s var(--spring-fast),transform .45s var(--spring-fast)}
.catalog-retry-button:active,.catalog-primary-link:active{border-radius:16px;transform:scale(.97)}
.catalog-repo-link{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--secondary-container);color:var(--on-secondary-container);border-radius:999px;font-weight:900;text-decoration:none}
.catalog-status{margin:0;padding:10px 18px;background:var(--surface-container);color:var(--on-surface-variant);border-radius:20px;font-weight:700;font-size:.86rem}
.catalog-status.catalog-error{background:oklch(.92 .06 25);color:oklch(.38 .14 25)}
:root[data-theme="dark"] .catalog-status.catalog-error{background:oklch(.36 .09 25);color:oklch(.93 .04 25)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .catalog-status.catalog-error{background:oklch(.36 .09 25);color:oklch(.93 .04 25)}}

/* ===== アセットの詳細 ===== */
.catalog-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.catalog-detail-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:18px 22px;background:var(--primary-container);color:var(--on-primary-container);border-radius:32px}
.catalog-detail-heading h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.25;overflow-wrap:anywhere;outline:none}
.catalog-detail-heading p{margin:2px 0 0;font-weight:700;opacity:.9}
.catalog-detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);align-items:start;gap:16px}
.catalog-detail-main{display:grid;gap:16px;min-width:0}
.catalog-picture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.catalog-picture{display:block;overflow:hidden;background:var(--surface-container-high);border-radius:28px;transition:border-radius .45s var(--spring-fast)}
@media(hover:hover){.catalog-picture:hover{border-radius:44px}}
.catalog-picture img{width:100%;height:auto;transition:scale .6s var(--spring)}
@media(hover:hover){.catalog-picture:hover img{scale:1.03}}
.catalog-info-sections{display:grid;gap:12px}
.catalog-info-loading{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface-container);border-radius:24px;font-weight:700}
.catalog-info-loading .catalog-spinner{width:28px;height:28px}
.catalog-detail-section{padding:18px 22px;background:var(--surface-container-high);border-radius:28px}
.catalog-detail-section h4{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.35}
.catalog-detail-section>p{margin:0 0 10px;color:var(--on-surface-variant);font-weight:700;font-size:.9rem}
.catalog-markdown{overflow-wrap:anywhere}
.catalog-markdown>:first-child{margin-top:0}
.catalog-markdown>:last-child{margin-bottom:0}
.catalog-markdown h2,.catalog-markdown h3,.catalog-markdown h4{margin:1em 0 .4em;font-weight:900;font-size:1.02rem}
.catalog-markdown a{color:var(--primary);font-weight:700;text-underline-offset:.2em}
.catalog-markdown code{padding:.1em .4em;background:var(--surface-container-highest);border-radius:8px;font-size:.9em}
.catalog-markdown hr{border:0;border-top:2px dashed var(--outline-variant)}
.catalog-markdown blockquote{margin:.8em 0;padding:8px 14px;background:var(--surface-container);border-radius:16px}
.catalog-markdown ul,.catalog-markdown ol{padding-left:1.4em}
.catalog-dependency-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.catalog-dependency{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--surface-container-lowest);border-radius:16px;font-weight:700}
.catalog-dependency:first-child{border-radius:22px 22px 10px 10px}
.catalog-dependency:last-child{border-radius:10px 10px 22px 22px}
.catalog-dependency-status{flex:0 0 auto;padding:1px 12px;background:var(--primary);color:var(--on-primary);border-radius:999px;font-weight:900;font-size:.8rem}
.catalog-dependency-status.is-no{background:var(--surface-container-highest);color:var(--on-surface-variant)}
.catalog-distribution{position:sticky;top:80px;display:grid;gap:10px;background:var(--tertiary-container);color:var(--on-tertiary-container);outline:none}
.catalog-distribution h4{margin-bottom:0}
.catalog-distribution>p{margin:0;color:inherit;opacity:.9}
.catalog-download-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.catalog-download{display:grid;gap:8px;padding:14px;background:var(--surface-container-lowest);color:var(--on-surface);border-radius:22px}
.catalog-download-name{font-weight:900;overflow-wrap:anywhere}
.catalog-download-meta{display:flex;flex-wrap:wrap;gap:6px}
.catalog-file-format{padding:0 10px;background:var(--primary-container);color:var(--on-primary-container);border-radius:8px;font-family:var(--flex);font-weight:800;font-size:.76rem}
.catalog-row-size{color:var(--on-surface-variant);font-family:var(--flex);font-weight:700;font-size:.8rem}
.catalog-download-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:var(--primary);color:var(--on-primary);border-radius:24px;font-weight:900;text-decoration:none;transition:border-radius .45s var(--spring-fast),transform .45s var(--spring-fast)}
@media(hover:hover){.catalog-download-link:hover{border-radius:18px}}
.catalog-download-link:active{transform:scale(.97)}
.catalog-license-note{margin:0;font-weight:700;font-size:.84rem;opacity:.9}
.catalog-source-link{color:inherit;font-weight:900;text-underline-offset:.2em}

/* ===== 画面幅ごとの調整 ===== */
@media(max-width:860px){
.catalog-detail-grid{grid-template-columns:1fr}
.catalog-distribution{position:static}
}
@media(max-width:560px){
.catalog-stage-nav{border-radius:28px}
.catalog-back-button{padding:0 14px 0 10px}
.catalog-category-grid,.catalog-item-grid{grid-template-columns:1fr}
.catalog-category-card.is-featured{min-height:150px}
.catalog-detail-heading{padding:16px 18px}
.catalog-detail-heading .catalog-primary-link{width:100%}
}