/* バーチャル美術館 — 夜の展示室。絵だけが光り、UIは黒子（デザイン仕様書 v1） */
:root {
  --base: #141312;
  --surface: #1E1C1B;
  --ink: #F1ECE3;
  --ink-muted: #A8A196;
  --line: rgba(241, 236, 227, .24);
  --accent: #E0634D;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --top: calc(max(var(--safe-t), 16px) + 16px);
  --bottom: calc(72px + max(var(--safe-b), 16px) + 16px);
  --area-h: calc(100vh - var(--top) - var(--bottom));
  --ease-sheet: cubic-bezier(.2, .8, .2, 1);
}
@supports (height: 100svh) {
  :root { --area-h: calc(100svh - var(--top) - var(--bottom)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--base); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px; line-height: 28px; font-weight: 500;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
h1, h2, p, ul { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* 文字の4段 */
.t1 { font-size: 28px; line-height: 36px; font-weight: 700; }
.t2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.t3 { font-size: 16px; line-height: 28px; font-weight: 500; }
.t4 { font-size: 13px; line-height: 24px; font-weight: 500; }
.muted { color: var(--ink-muted); }
.jp { word-break: keep-all; overflow-wrap: normal; line-break: strict; }
.balance { text-wrap: balance; }

#app { position: fixed; inset: 0; }

/* ---------- 絵の枠（トリミングなし・実寸の箱） ---------- */
.frame { --r: 1.4; --c: #2a2624;
  position: relative; overflow: hidden; background: var(--c);
  aspect-ratio: var(--r);
  box-shadow: 0 0 0 1px rgba(241, 236, 227, .08), 0 8px 32px rgba(0, 0, 0, .48); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.frame .thumb { filter: blur(12px); }
.frame .full { opacity: 0; transition: opacity 240ms ease-out; }
.frame.loaded .full { opacity: 1; }
.frame.loaded .thumb { opacity: 0; transition: opacity 240ms ease-out 240ms; }
.frame.thumb-only .thumb { filter: none; }
.frame.flat { box-shadow: 0 0 0 1px rgba(241, 236, 227, .08); }
.frame .retry { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; color: var(--ink); text-align: center; }
.frame .retry span { display: block; min-height: 48px; padding: 12px 16px; font-size: 13px; line-height: 24px; }

/* ---------- 流し見 ---------- */
#feed { position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#feed::-webkit-scrollbar { display: none; }
.slide { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: var(--top) 16px var(--bottom); background: var(--base); }
@supports (height: 100svh) { .slide { height: 100svh; } }
.slide .frame { width: min(100%, calc(var(--area-h) * var(--r))); cursor: pointer; }

.msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 0 16px; }
.msg.boot { opacity: 0; animation: bootin 240ms ease-out 1.5s forwards; }
@keyframes bootin { to { opacity: 1; } }

.hint { position: fixed; left: 0; right: 0; bottom: calc(72px + var(--safe-b) - 4px); display: flex; justify-content: center; pointer-events: none; color: var(--ink);
  animation: hint 2.4s ease-in-out 1 both; }
.hint.done { opacity: .56; animation: none; }
@keyframes hint { 0%, 100% { opacity: 0; } 50% { opacity: .8; } }

/* ---------- 操作バー ---------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; margin-inline: auto; width: 100%;
  height: calc(72px + var(--safe-b)); padding: 8px 16px calc(8px + var(--safe-b));
  display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; z-index: 5; }
.bar-btn { justify-self: center; min-width: 80px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); }
.bar-btn .t4 { color: var(--ink-muted); white-space: nowrap; line-height: 20px; }
.bar-btn .ico { position: relative; width: 24px; height: 24px; display: block; }
.badge { position: absolute; top: -8px; left: 16px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 24px; background: var(--ink); color: var(--base);
  font-size: 13px; line-height: 20px; font-weight: 700; text-align: center; }
.heart-btn { grid-column: 2; width: 56px; height: 56px; border-radius: 24px; display: grid; place-items: center; color: var(--ink); }
.heart-btn path { fill: none; }
.heart-btn[aria-pressed="true"] { color: var(--accent); }
.heart-btn[aria-pressed="true"] path { fill: currentColor; }
.heart-btn.pop svg { animation: pop 220ms ease-out; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.bar.solo { grid-template-columns: 1fr; justify-items: center; }
.bar.solo .heart-btn { grid-column: 1; }

.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); }

/* ---------- 画面（詳細・コレクション） ---------- */
.screen { position: absolute; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; background: var(--base); overscroll-behavior: contain; animation: enter 200ms ease-out; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }

#detail { background: var(--bg, var(--base)); }
#detail .back { display: grid; margin: max(var(--safe-t), 16px) 0 0 4px; }
.d-media { padding: 16px 16px 0; display: flex; justify-content: center; }
#detail .frame { width: min(100%, calc(56vh * var(--r))); cursor: zoom-in; }
@supports (height: 100svh) { #detail .frame { width: min(100%, calc(56svh * var(--r))); } }
.d-text { padding: 24px 16px calc(72px + var(--safe-b) + 32px); }
.nb { white-space: nowrap; }
.t1-sub { display: block; margin-left: -.5em; }
.d-text .artist { margin-top: 8px; }
.d-text .meta { margin-top: 16px; }
.d-text .tech { margin-top: 4px; }
.d-text .desc { margin-top: 24px; }
.credit { margin-top: 32px; }
.credit p { margin: 0; }
.credit .src { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
#detail .bar { background: var(--bg, var(--base)); }

/* ---------- コレクション ---------- */
#likes .head { position: sticky; top: 0; z-index: 3; background: var(--base);
  height: calc(56px + var(--safe-t)); padding: var(--safe-t) 16px 0 4px; display: flex; align-items: center; gap: 0; }
#likes .head .t2 { flex: 1; margin-left: 4px; }
#likes .head .count { color: var(--ink-muted); }
#likes .grid { column-count: 2; column-gap: 8px; padding: 8px 16px calc(32px + var(--safe-b)); }
#likes .tile { display: block; width: 100%; margin: 0 0 8px; break-inside: avoid; }
#likes .tile .frame { width: 100%; }
#likes .empty { display: grid; justify-items: center; gap: 16px; padding: 96px 16px 0; text-align: center; }
#likes .empty svg { color: var(--line); }
.inline-heart { display: inline-block; vertical-align: -6px; margin: 0 4px; color: var(--ink-muted); }
.btn-line { min-height: 48px; padding: 0 24px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 絞り込みシート ---------- */
#sheet { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .56); display: flex; align-items: flex-end; justify-content: center; animation: enter 200ms ease-out; }
#sheet .panel { width: 100%; max-height: 80vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 24px 24px 0 0;
  animation: rise 280ms var(--ease-sheet); }
@supports (height: 100svh) { #sheet .panel { max-height: 80svh; } }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
#sheet .grab { flex: none; height: 32px; display: grid; place-items: center; touch-action: none; cursor: grab; }
#sheet .grab i { display: block; width: 48px; height: 4px; border-radius: 24px; background: var(--line); }
#sheet .body { flex: 1; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
#sheet h2 { margin: 16px 0 8px; font-size: 16px; line-height: 28px; font-weight: 700; }
#sheet h2:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 16px; line-height: 28px; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--base); }
.chip:disabled { color: var(--ink-muted); border-color: rgba(241, 236, 227, .12); cursor: default; }
.swatch { flex: none; width: 24px; height: 24px; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); }
#sheet .foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 16px calc(16px + var(--safe-b)); }
#sheet .clear { height: 48px; padding: 0 16px; color: var(--ink); white-space: nowrap; }
#sheet .go { flex: 1; height: 56px; border-radius: 24px; background: var(--ink); color: var(--base); font-weight: 700; text-align: center; white-space: nowrap; }
#sheet .go:disabled { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }

/* ---------- ビューア ---------- */
#viewer { position: absolute; inset: 0; z-index: 30; background: var(--base); overflow: hidden; touch-action: none; display: grid; place-items: center; animation: enter 200ms ease-out; }
#viewer img { max-width: 100%; max-height: 100%; display: block; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
#viewer .close { position: absolute; top: max(var(--safe-t), 16px); right: 4px; z-index: 2; }

/* ---------- PC幅 ---------- */
@media (min-width: 768px) {
  :root { --top: 96px; --bottom: 120px; }
  .slide { padding-inline: max(48px, calc((100vw - 1024px) / 2)); }
  .bar { max-width: 480px; }
  #detail { display: grid; grid-template-columns: 58% 1fr; align-items: start; }
  #detail .back { position: fixed; top: 32px; left: 28px; margin: 0; z-index: 4; }
  #detail .d-media { position: sticky; top: 0; height: 100vh; padding: 48px; align-items: center; }
  #detail .frame { width: min(100%, calc((100vh - 96px) * var(--r))); }
  #detail .d-text { max-width: 464px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 32px; }
  #detail .bar { position: fixed; left: 58%; right: 0; width: auto; max-width: none; }
  #likes .head { padding-inline: 28px 32px; }
  #likes .grid { max-width: 1280px; margin-inline: auto; padding-inline: 32px; column-gap: 8px; }
  #sheet { align-items: center; }
  #sheet .panel { width: 480px; max-height: 80vh; border-radius: 24px; animation: enter 200ms ease-out; }
  #sheet .grab { cursor: default; }
}
@media (min-width: 600px) { #likes .grid { column-count: 3; } }
@media (min-width: 900px) { #likes .grid { column-count: 4; } }
@media (min-width: 1200px) { #likes .grid { column-count: 5; } }

/* ---------- 動きを減らす ---------- */
@media (prefers-reduced-motion: reduce) {
  .frame .full, .frame.loaded .thumb { transition-duration: 1ms; transition-delay: 0s; }
  .screen, #sheet, #viewer { animation-duration: 120ms; }
  #sheet .panel { animation: enter 120ms ease-out; }
  .heart-btn.pop svg { animation: none; }
  .hint { animation: none; opacity: .56; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms; }
}
::view-transition-group(art) { animation-duration: 240ms; animation-timing-function: ease-out; }