@font-face{font-family:'Zen Kaku Gothic New';font-weight:400;font-display:swap;src:url('../../fonts/zenkaku-400.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:500;font-display:swap;src:url('../../fonts/zenkaku-500.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:700;font-display:swap;src:url('../../fonts/zenkaku-700.woff2') format('woff2')}
@font-face{font-family:'Shippori Mincho B1';font-weight:700;font-display:swap;src:url('../../fonts/shippori-700.woff2') format('woff2')}
@font-face{font-family:'Shippori Mincho B1';font-weight:800;font-display:swap;src:url('../../fonts/shippori-800.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('../../fonts/fraunces-italic.woff2') format('woff2')}

:root{
  --page:#18171B; --card:#222026; --raise:#2B2830; --thumb:#2E2B33;
  --ink:#ECE8E1; --ink-sub:#A29D94; --brass:#C79A5B; --brass-ink:#231A0E;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --jp:'Zen Kaku Gothic New',-apple-system,'Hiragino Sans','Noto Sans JP',sans-serif;
  --serif:'Shippori Mincho B1',serif; --latin:'Fraunces',Georgia,serif;
  --maxw:1240px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --fast:180ms; --base:320ms; --slow:560ms;
  --r-s:8px; --r-m:12px; --r-l:16px;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{appearance:none;font:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--brass);color:var(--brass-ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ── ヒーロー：コピーとステージ ── */
.hero{max-width:var(--maxw);margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center}
.eyebrow{margin:0 0 14px;color:var(--brass);font-family:var(--latin);font-style:italic;letter-spacing:.12em;font-size:13px}
.wordmark{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(44px,6.4vw,88px);line-height:1;letter-spacing:.01em}
.wordmark span{color:var(--brass)}
.lead{max-width:30em;margin:24px 0 0;color:var(--ink-sub);font-size:15.5px;line-height:1.9}

.stage{min-width:0}
.stage-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--thumb);border:1px solid var(--line-2);box-shadow:0 40px 80px -48px rgba(0,0,0,.95)}
.stage-base,.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-img{transition:opacity var(--fast)}
.stage-img.flip{animation:stage-flip 380ms var(--ease-out)}
.stage-frame.holding .stage-img{opacity:0}
.stage-label{position:absolute;left:14px;bottom:14px;margin:0;display:flex;align-items:baseline;gap:10px;max-width:calc(100% - 28px);padding:8px 13px;border-radius:var(--r-s);background:rgba(20,19,23,.82);box-shadow:0 2px 12px rgba(0,0,0,.35);font-size:12px;line-height:1.4}
.stage-label span{color:var(--brass);font-family:var(--latin);font-style:italic;white-space:nowrap}
.stage-label strong{font-family:var(--serif);font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-hold{position:absolute;top:12px;right:12px;min-height:36px;padding:6px 12px;border-radius:var(--r-s);border:1px solid var(--line-2);background:rgba(20,19,23,.72);box-shadow:0 2px 10px rgba(0,0,0,.3);font-size:12px;user-select:none;-webkit-user-select:none;touch-action:none;transition:background var(--fast),border-color var(--fast)}
.stage-hold:hover,.stage-frame.holding .stage-hold{border-color:rgba(199,154,91,.6);background:rgba(43,36,29,.9)}

.dial{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin-top:18px}
.dial-step{width:44px;height:44px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--card);font-size:22px;line-height:1;transition:border-color var(--fast),transform var(--fast) var(--ease-out)}
.dial-step:hover{border-color:rgba(199,154,91,.6)}
.dial-step:active{transform:scale(.92)}
.dial-track{position:relative;height:44px}
.dial-genres{position:absolute;left:0;right:0;top:50%;height:18px;transform:translateY(-50%);display:flex;gap:3px;pointer-events:none}
.dial-genres i{flex:var(--n) 1 0;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px calc(100% / var(--n)));border:1px solid var(--line);transition:background-color var(--base),border-color var(--base)}
.dial-genres i.on{background-color:rgba(199,154,91,.16);border-color:rgba(199,154,91,.5)}
#dial{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:grab;z-index:1}
#dial:active{cursor:grabbing}
#dial::-webkit-slider-runnable-track{height:44px;background:transparent}
#dial::-moz-range-track{height:44px;background:transparent}
#dial::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:34px;margin-top:5px;border-radius:5px;background:var(--brass);border:2px solid var(--page);box-shadow:0 0 0 1px rgba(199,154,91,.6),0 6px 16px -4px rgba(0,0,0,.8);transition:transform var(--fast) var(--ease-spring)}
#dial::-moz-range-thumb{width:12px;height:32px;border-radius:5px;background:var(--brass);border:2px solid var(--page);box-shadow:0 0 0 1px rgba(199,154,91,.6)}
#dial:active::-webkit-slider-thumb{transform:scaleY(1.12)}
#dial:focus-visible{outline:none}
#dial:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(199,154,91,.55)}
.stage-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}
.dial-hint{margin:0;color:var(--ink-sub);font-size:12.5px}
.btn-open{min-height:44px;padding:10px 16px;border-radius:var(--r-m);border:1px solid rgba(199,154,91,.55);background:rgba(199,154,91,.12);color:#f4eadb;font-size:13.5px;font-weight:700;white-space:nowrap;transition:background var(--fast),border-color var(--fast)}
.btn-open:hover{background:rgba(199,154,91,.22);border-color:rgba(199,154,91,.8)}

/* ── ジャンルの帯 ── */
.filters{position:sticky;top:0;z-index:20;background:rgba(24,23,27,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.filters-scroll{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters-scroll::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.filters-scroll{scrollbar-width:thin;scrollbar-color:rgba(199,154,91,.45) transparent}.filters-scroll::-webkit-scrollbar{display:block;height:4px}.filters-scroll::-webkit-scrollbar-thumb{background:rgba(199,154,91,.45);border-radius:2px}}
.filters-scroll.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.chip{position:relative;flex:0 0 auto;min-height:52px;padding:0 14px;border:0;background:none;color:var(--ink-sub);font-size:13.5px;white-space:nowrap;transition:color var(--fast)}
.chip small{margin-left:6px;font-family:var(--latin);font-style:italic;font-size:12px;opacity:.75}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);font-weight:700}
.chip-fav{color:var(--brass)}
.filters-ink{position:absolute;bottom:0;left:0;height:2px;width:var(--w,0);transform:translateX(var(--x,0));background:var(--brass);border-radius:2px;transition:transform var(--base) var(--ease-out),width var(--base) var(--ease-out);pointer-events:none}

/* ── 一覧 ── */
.gallery{max-width:var(--maxw);margin:0 auto;padding:22px 24px 96px}
.gallery-count{margin:0 0 16px;color:var(--ink-sub);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px 18px}
.empty{margin:48px 0;color:var(--ink-sub);text-align:center;font-size:14px}

.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:transform var(--base) var(--ease-out),border-color var(--fast),box-shadow var(--base) var(--ease-out)}
.card.enter{animation:card-in 520ms var(--ease-out) both;animation-delay:calc(min(var(--i),16) * 28ms)}
.card-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.card-open:focus-visible{outline-offset:-2px;border-radius:var(--r-l)}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--thumb);overflow:hidden;--x:100%}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb-after{opacity:0;transition:opacity var(--slow),transform var(--slow) var(--ease-out)}
.thumb-after.ld{opacity:1}
.thumb-before{z-index:1;clip-path:inset(0 calc(100% - var(--x)) 0 0);opacity:0;transition:opacity var(--fast)}
.thumb-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity var(--fast);pointer-events:none}
.thumb-tag{position:absolute;z-index:2;top:10px;left:10px;padding:3px 8px;border-radius:6px;background:rgba(20,19,23,.8);box-shadow:0 1px 6px rgba(0,0,0,.35);font-size:11.5px;opacity:0;transition:opacity var(--fast);pointer-events:none}
.card.peek .thumb-before,.card.peek .thumb-line,.card.peek .thumb-tag{opacity:1}
.card-body{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.card-meta{display:flex;gap:10px;align-items:baseline;color:var(--ink-sub);font-size:12px}
.card-meta b{color:var(--brass);font-family:var(--latin);font-style:italic;font-weight:400}
.card-name{margin:4px 0 12px;font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.5}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.btn-card-copy{flex:1;min-height:40px;padding:8px 12px;border-radius:var(--r-s);border:1px solid rgba(199,154,91,.42);background:rgba(199,154,91,.08);color:#f4eadb;font-size:13px;font-weight:700;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:background var(--fast),border-color var(--fast)}
.btn-card-copy::after{content:"";color:var(--brass);font-size:14px}
.btn-card-copy.done{background:rgba(199,154,91,.24);border-color:var(--brass);animation:copy-pop 420ms var(--ease-out)}
.btn-card-copy.done::after{content:"✓"}
.star{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-s);border:1px solid var(--line-2);background:transparent;color:var(--ink-sub);font-size:17px;transition:color var(--fast),border-color var(--fast),background var(--fast)}
.star.on{color:var(--brass);border-color:rgba(199,154,91,.5);background:rgba(199,154,91,.12)}
.star.pop{animation:star-pop 460ms var(--ease-spring)}

/* ── 詳細 ── */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,9,12,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity var(--base)}
.modal.show .modal-backdrop{opacity:1}
body:has(.modal.show) .toast{bottom:auto;top:24px}
.modal-panel{position:relative;width:100%;max-width:1180px;max-height:calc(100vh - 48px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"cmp text" "head text" "actions text";background:var(--card);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;opacity:0;transform:translateY(18px) scale(.985);transition:opacity var(--base),transform var(--slow) var(--ease-out)}
.modal.show .modal-panel{opacity:1;transform:none}
.compare{grid-area:cmp;position:relative;aspect-ratio:16/9;background:var(--page);overflow:hidden;--pos:50%;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-after.swap{animation:stage-flip 380ms var(--ease-out)}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.compare-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--page);font-size:15px;font-weight:700;letter-spacing:.1em;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.compare-tag{position:absolute;top:12px;padding:4px 9px;border-radius:6px;background:rgba(20,19,23,.8);box-shadow:0 1px 6px rgba(0,0,0,.35);font-size:12px;pointer-events:none}
.compare-tag-before{left:12px}
.compare-tag-after{right:12px}
.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.modal-head{grid-area:head;padding:18px 24px 0}
.modal-meta{display:flex;gap:12px;margin:0;color:var(--ink-sub);font-size:12.5px}
.modal-meta span:first-child{color:var(--brass);font-family:var(--latin);font-style:italic}
.modal-title{margin:4px 0 0;font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.45}
.modal-text{grid-area:text;min-height:0;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--page);border-left:1px solid var(--line);padding:26px 26px 30px;font-family:var(--jp);font-size:14px;line-height:1.9}
.modal-actions{grid-area:actions;align-self:end;display:flex;align-items:center;gap:10px;padding:18px 24px 22px}
.btn-copy{min-height:46px;padding:12px 20px;white-space:nowrap;border:0;border-radius:var(--r-m);background:var(--brass);color:var(--brass-ink);font-size:14.5px;font-weight:700;transition:filter var(--fast),transform var(--fast)}
.btn-copy:hover{filter:brightness(1.07)}
.btn-copy:active{transform:scale(.97)}
.btn-copy.done{animation:copy-pop 420ms var(--ease-out)}
.btn-fav{min-height:46px;padding:10px 14px;white-space:nowrap;border-radius:var(--r-m);border:1px solid var(--line-2);background:transparent;color:var(--ink-sub);font-size:13.5px;transition:color var(--fast),border-color var(--fast)}
.btn-fav[aria-pressed="true"]{color:var(--brass);border-color:rgba(199,154,91,.5)}
.btn-fav.pop{animation:star-pop 460ms var(--ease-spring)}
.modal-nav{display:flex;gap:6px;margin-left:auto}
.btn-nav,.btn-close{width:46px;height:46px;border-radius:var(--r-m);border:1px solid var(--line-2);background:transparent;font-size:20px;line-height:1;transition:border-color var(--fast)}
.btn-nav:hover,.btn-close:hover{border-color:rgba(199,154,91,.6)}

.foot{max-width:var(--maxw);margin:0 auto;padding:28px 24px 56px;border-top:1px solid var(--line);color:var(--ink-sub);font-size:13px;display:flex;justify-content:space-between;gap:24px}
.foot p{margin:0;max-width:44em}
.foot-mark{font-family:var(--serif);font-weight:800;color:var(--brass);white-space:nowrap}

.toast[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:28px;z-index:60;pointer-events:none;max-width:calc(100vw - 32px);transform:translateX(-50%);padding:11px 20px;border-radius:var(--r-m);background:var(--ink);color:var(--page);font-size:13.5px;font-weight:700;box-shadow:0 12px 40px -12px rgba(0,0,0,.6);animation:toast-in 360ms var(--ease-out)}

@keyframes stage-flip{from{opacity:.55;transform:scale(1.012)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes copy-pop{45%{transform:scale(1.04)}}
@keyframes star-pop{40%{transform:scale(1.22) rotate(-8deg)}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}}

@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-5px);border-color:rgba(199,154,91,.45);box-shadow:0 26px 50px -32px rgba(0,0,0,.95)}
  .btn-card-copy:hover{background:rgba(199,154,91,.18);border-color:rgba(199,154,91,.7)}
  .star:hover{color:var(--brass);border-color:rgba(199,154,91,.5)}
}
@media (hover:none),(pointer:coarse){
  .card:active{transform:scale(.99)}
}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:28px;padding:44px 20px 28px}
  .modal{padding:0;align-items:flex-end}
  .modal-panel{max-height:94vh;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"cmp" "head" "text" "actions";border-radius:18px 18px 0 0}
  .modal-text{margin:12px 16px 0;border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;max-height:34vh}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .wordmark{font-size:clamp(40px,13vw,60px)}
  .stage-actions{flex-direction:column;align-items:stretch}
  .dial-hint{text-align:center}
  .filters-inner,.gallery{padding-left:16px;padding-right:16px}
  .grid{grid-template-columns:1fr;gap:16px}
  .modal-head{padding:14px 16px 0}
  .modal-title{font-size:19px}
  .modal-actions{padding:10px 16px 16px;gap:8px;flex-wrap:wrap}
  .btn-copy{flex:1}
  .foot{flex-direction:column;padding:24px 16px 48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}