/* Uburia sitehub — shared stylesheet. Dark, editorial, high-density. No external assets. */

:root{
  --bg: #0b0a0f;
  --bg-alt: #131017;
  --card: #17141d;
  --card-hover: #1e1a25;
  --text: #ece7f0;
  --text-dim: #a89fb3;
  --text-faint: #6f6779;
  --accent: #b98ee0;
  --accent-2: #7c8fe8;
  --accent-soft: rgba(185,142,224,0.14);
  --border: #2a2432;
  --warn-bg: #2a1f14;
  --warn-border: #4a3a20;
  --warn-text: #e8c98a;
  --radius: 14px;
  --maxw: 1100px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: radial-gradient(ellipse at top, var(--bg-alt) 0%, var(--bg) 55%);
  color: var(--text);
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-2); }

img{ max-width:100%; display:block; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Age Gate ---------- */
#age-gate{
  position: fixed; inset:0; z-index: 999;
  background: #050407;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#age-gate .box{
  max-width: 440px; text-align:center;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 40px 28px;
}
#age-gate .logo{ width:56px; height:56px; margin: 0 auto 18px; border-radius: 50%; overflow:hidden; }
#age-gate h1{ font-size: 1.3rem; letter-spacing: .08em; margin: 0 0 12px; }
#age-gate p{ color: var(--text-dim); font-size: .92rem; margin: 0 0 10px; }
#age-gate .legal-note{ font-size: .74rem; color: var(--text-faint); margin-top: 18px; line-height:1.6; }
#age-gate .btns{ display:flex; gap:10px; margin-top: 22px; }
#age-gate button{
  flex:1; padding: 13px 10px; border-radius: 999px; border:1px solid var(--border);
  font-size: .9rem; cursor:pointer; font-weight:600; letter-spacing:.03em;
}
#age-gate .enter{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; border:none; }
#age-gate .leave{ background: transparent; color: var(--text-dim); }
/* Fail-safe R18 gate: overlay is shown by DEFAULT (fixed, opaque, full-screen),
   so with JS disabled or during load the adult content stays covered.
   JS adds .age-ok only after confirmation / prior acceptance. */
body.gated:not(.age-ok){ overflow:hidden; }
body.age-ok #age-gate{ display:none; }

/* ---------- Header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,10,15,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.site .bar{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; max-width: var(--maxw); margin:0 auto; }
header.site .brand{ display:flex; align-items:center; gap:10px; }
header.site .brand img{ width:30px; height:30px; border-radius:50%; }
header.site .brand span{ font-weight:700; letter-spacing:.14em; font-size:1.05rem; }
header.site nav{ display:flex; gap:18px; font-size:.85rem; }
header.site nav a{ color: var(--text-dim); }
header.site nav a:hover{ color: var(--text); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height: 62vh; display:flex; align-items:flex-end;
  border-bottom: 1px solid var(--border);
}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  filter: saturate(0.9);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,10,15,0.15) 0%, rgba(11,10,15,0.94) 92%);
}
.hero .content{ position:relative; z-index:2; padding: 60px 20px 44px; max-width: var(--maxw); margin:0 auto; width:100%; }
.hero .tag-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 16px; }
.hero .chip{ font-size:.68rem; letter-spacing:.06em; padding:4px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); }
.hero h1{ font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 14px; letter-spacing:.02em; }
.hero h1 small{ display:block; font-size: .42em; color: var(--text-dim); font-weight:400; letter-spacing:.2em; margin-bottom:10px; }
.hero p.lead{ max-width: 560px; color: var(--text-dim); font-size: 1rem; margin:0 0 22px; }
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding: 12px 24px; border-radius: 999px; font-size:.88rem; font-weight:600;
  border: 1px solid var(--border); letter-spacing:.03em;
}
.btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; border:none; }
.btn.ghost{ color: var(--text); }
.btn.disabled{ color: var(--text-faint); border-color: var(--border); pointer-events:none; opacity:.55; }

/* ---------- Sections ---------- */
section{ padding: 56px 0; }
section h2{ font-size: 1.4rem; letter-spacing:.04em; margin: 0 0 6px; }
section .section-sub{ color: var(--text-faint); font-size:.82rem; margin: 0 0 28px; }

/* ---------- Genre grid ---------- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{ transform: translateY(-4px); border-color: var(--accent); background: var(--card-hover); }
.card .thumb{ aspect-ratio: 3/4; overflow:hidden; position:relative; background:#000; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:hover .thumb img{ transform: scale(1.06); }
.card .thumb .badge{ position:absolute; top:10px; left:10px; font-size:.62rem; letter-spacing:.06em; background: rgba(11,10,15,.75); border:1px solid var(--border); padding:3px 8px; border-radius:999px; color: var(--text-dim); }
.card .body{ padding: 14px 16px 18px; }
.card .body h3{ font-size: 1rem; margin: 0 0 4px; }
.card .body .i18n{ font-size:.7rem; color: var(--text-faint); margin: 0 0 10px; }
.card .body p{ font-size: .82rem; color: var(--text-dim); margin: 0 0 14px; }
.card .body .btn{ width:100%; text-align:center; padding: 10px; font-size:.8rem; }

/* ---------- Platform cards ---------- */
.platforms{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.plat-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 22px;
  display:flex; flex-direction:column; gap:10px;
}
.plat-card h3{ margin:0; font-size:1.02rem; }
.plat-card p{ margin:0; color: var(--text-dim); font-size:.82rem; flex:1; }
.plat-card .status{ font-size:.68rem; letter-spacing:.06em; color: var(--accent); }
.plat-card .status.soon{ color: var(--text-faint); }

/* ---------- Statement / trust box ---------- */
.statement{
  border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: var(--radius);
  padding: 22px 24px; font-size: .82rem; color: var(--warn-text); line-height:1.8;
}
.statement h3{ margin:0 0 10px; font-size:.92rem; color: var(--text); }

/* ---------- Footer ---------- */
footer.site{
  border-top: 1px solid var(--border); padding: 40px 0 60px; margin-top: 30px;
  color: var(--text-faint); font-size: .76rem;
}
footer.site .flinks{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 14px; }
footer.site .flinks a{ color: var(--text-dim); }
footer.site .disclaimer{ max-width: 640px; line-height:1.8; }

/* ---------- Article / genre page ---------- */
.crumbs{ font-size:.78rem; color: var(--text-faint); padding: 16px 0 0; }
.crumbs a{ color: var(--text-dim); }
.article-body{ font-size:.95rem; color: var(--text-dim); max-width: 720px; }
.article-body p{ margin: 0 0 16px; }

/* FANZA作品紹介記事 */
.work-thumb{ display:block; max-width:300px; margin:22px 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#000; position:relative; }
.work-thumb img{ display:block; width:100%; height:auto; }
.work-thumb .badge{ position:absolute; top:10px; left:10px; font-size:.62rem; letter-spacing:.06em; background: rgba(11,10,15,.75); border:1px solid var(--border); padding:3px 8px; border-radius:999px; color: var(--text-dim); }
.work-thumb .cap{ font-size:.72rem; color: var(--text-faint); padding:8px 10px; }
.work-info{ width:100%; border-collapse:collapse; font-size:.86rem; margin: 6px 0 26px; color: var(--text-dim); }
.work-info th, .work-info td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.work-info th{ width:34%; color: var(--text-faint); font-weight:600; white-space:nowrap; }
.buy-row{ margin:26px 0 10px; }
.pr-note{ font-size:.74rem; color: var(--text-faint); margin-top:10px; }

/* ============================================================
   2026-07 modern refresh — products / tag回遊 / trust signals /
   whole-card click / denser grid. Extends the base above.
   ============================================================ */

/* Section eyebrow (Latin display label) */
.eyebrow{
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--accent); font-weight:700; margin:0 0 10px;
}
section h2{ font-feature-settings:"palt"; }
.hero h1{ font-feature-settings:"palt"; }

/* Featured section (自社作品) — the star, subtly lifted */
.section-feature{
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(185,142,224,.08), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.section-feature h2 .star{ color: var(--accent); }

/* Tag / genre 回遊 cloud (SEO + フェチ回遊の核) */
.tagcloud{ display:flex; flex-wrap:wrap; gap:9px; margin: 0 0 30px; }
.tagcloud a{
  font-size:.8rem; letter-spacing:.02em; padding:8px 15px; border-radius:999px;
  border:1px solid var(--border); color: var(--text-dim); background: var(--card);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.tagcloud a:hover{ border-color: var(--accent); color: var(--text); background: var(--card-hover); transform: translateY(-1px); }

/* Denser grid for 高密度 product wall */
.grid.dense{ grid-template-columns: repeat(auto-fill, minmax(205px,1fr)); gap:16px; }

/* Whole card clickable (stretched link). All inner anchors share one destination. */
.card{ position: relative; }
.card a:has(> .thumb)::after{ content:""; position:absolute; inset:0; z-index:2; }
.card .body h3 a, .card .body .btn{ position:relative; z-index:3; }

/* Trust chips (尺 / 形式 / サンプル) */
.card .meta{ display:flex; flex-wrap:wrap; gap:6px; margin: 2px 0 12px; }
.card .meta span{
  font-size:.63rem; letter-spacing:.03em; color: var(--text-dim);
  border:1px solid var(--border); border-radius:6px; padding:2px 7px; background: var(--bg-alt);
}
.card .meta span.hd{ color: var(--accent); border-color: rgba(185,142,224,.5); }

/* Price badge on thumbnail (top-right; 形式 badge stays top-left) */
.card .thumb .price-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:.74rem; font-weight:800; letter-spacing:.01em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f;
  padding:4px 11px; border-radius:999px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.card .thumb .price-badge.free{ background: linear-gradient(135deg,#4fd6a6,#39b98e); color:#04150e; }
.card .price{ font-weight:800; letter-spacing:.01em; color: var(--text); }
.card .price .yen{ font-size:.8rem; font-weight:700; opacity:.85; }

/* Primary CTA button variant inside cards */
.card .body .btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; border:none; }

/* Price + CTA row inside product cards */
.buyline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.buyline .btn{ width:auto; flex:0 0 auto; padding:9px 16px; font-size:.78rem; }
.buyline .price{ font-size:1.02rem; white-space:nowrap; }

/* 販路 status pill */
.plat-card .status::before{ content:"● "; }

/* Contact mailto form (no backend) */
.cform{ margin:22px 0 10px; display:flex; flex-direction:column; gap:15px; max-width:560px; }
.cform .field label{ font-size:.82rem; color:var(--text-dim); display:block; margin-bottom:7px; }
.cform select, .cform textarea{
  width:100%; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:11px 13px;
  font-size:.92rem; font-family:inherit; line-height:1.7;
}
.cform select:focus, .cform textarea:focus{ outline:none; border-color:var(--accent); }
.cform textarea{ min-height:150px; resize:vertical; }
.cform .hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform button{ align-self:flex-start; cursor:pointer; }
.cform .note{ font-size:.74rem; color:var(--text-faint); margin:2px 0 0; }

/* Genre map — 作品数バッジ (top-right count pill; reuses tokens). Additive, non-breaking. */
.card .thumb .count-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
  background: rgba(11,10,15,.78); border:1px solid var(--accent);
  color: var(--accent); padding:3px 9px; border-radius:999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.genre-map .card .thumb{ aspect-ratio: 4/3; }

/* ============================================================
   2026-07 sample video — inline player (detail) + hover preview (grid).
   Vendor promo CDN is hot-linked; nothing is re-hosted.
   ============================================================ */

/* Inline sample player on work-detail pages */
.sample-player{
  margin:22px 0; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; background:#000; position:relative;
}
.sample-player video{ display:block; width:100%; height:auto; background:#000; aspect-ratio:16/9; object-fit:contain; }
.sample-player .badge{
  position:absolute; top:10px; left:10px; z-index:3; font-size:.62rem; letter-spacing:.06em;
  background: rgba(11,10,15,.78); border:1px solid var(--border); padding:3px 8px; border-radius:999px;
  color: var(--text-dim); pointer-events:none;
}
.sample-player .cap{ font-size:.72rem; color: var(--text-faint); padding:8px 12px; background:var(--card); }

/* Hover preview inside grid card thumbnails.
   The card is a stretched-link (a::after z-index:2). The preview <video> sits at
   z-index:1 (below the click layer) so taps still navigate to the detail page. */
.card .thumb video.preview{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .35s ease; pointer-events:none;
}
.card .thumb.playing video.preview{ opacity:1; }
.card .thumb .play-hint{
  position:absolute; right:10px; bottom:10px; z-index:3; pointer-events:none;
  width:30px; height:30px; border-radius:50%;
  background: rgba(11,10,15,.66); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .25s ease, transform .25s ease;
}
.card .thumb .play-hint::before{
  content:""; display:block; width:0; height:0; margin-left:2px;
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--text);
}
.card:hover .thumb .play-hint, .card .thumb.playing .play-hint{ opacity:0; transform:scale(.8); }

@media (max-width: 640px){
  header.site nav{ gap:12px; font-size:.78rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hero{ min-height: 56vh; }
  #age-gate .btns{ flex-direction:column; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
  .grid.dense{ grid-template-columns: repeat(2,1fr); gap:12px; }
  .card .body{ padding: 12px 12px 15px; }
  .card .body h3{ font-size:.92rem; }
}

/* ============================================================
   2026-07 動画ファースト UX (mockup v3) — tap-to-play → maximize,
   weekly ranking, mixed video feed, tag回遊 bar, preroll self-ad.
   Namespaced (.vfeed*/.vc/.rank*/#preroll/#lb) to avoid clashing with
   the existing card/grid/hero system above.
   ============================================================ */
:root{
  --vf-gold:#e6b45a; --vf-green:#57c98a; --vf-rank:#ff5a7a;
  --vf-d3:#3a7bd5; --vf-d2:#8e5bd0; --vf-duga:#c0392b; --vf-fanza:#e6007e;
}

/* video-first intro band (below the image hero) */
.vfeed-intro{ padding: 34px 0 4px; }
.vfeed-intro .lead-vf{ color: var(--text-dim); max-width:56ch; font-size:.92rem; margin:6px 0 16px; }
.vfeed-intro .open-sample{ cursor:pointer; }
.vfeed-note{
  border:1px dashed var(--accent); background: var(--accent-soft);
  border-radius:12px; padding:9px 14px; margin:0 0 4px; font-size:.8rem; color: var(--text-dim);
}
.vfeed-note b{ color: var(--text); }

/* tag回遊 bar */
.vtags{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.vtags a{
  background: var(--card); border:1px solid var(--border); color: var(--text-dim);
  padding:6px 14px; border-radius:999px; font-size:.8rem; transition: all .2s ease;
}
.vtags a:hover{ background: var(--card-hover); border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.vtags a.on{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; border-color:transparent; font-weight:700; }

.sec-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.sec-head h2{ margin:0; }
.sec-head .sec-note{ color: var(--text-faint); font-size:.78rem; }

/* video card grid */
.vgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:14px; margin-top:16px; }
.vc{ position:relative; border-radius:12px; overflow:hidden; background:#000; border:1px solid var(--border); transition: transform .16s ease, border-color .16s ease; }
.vc:hover{ transform: translateY(-2px); border-color: var(--accent); }
.vwrap{ position:relative; aspect-ratio:4/3; background:#150f1c; overflow:hidden; cursor:pointer; }
.vwrap > video, .vwrap > img.poster{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.badges{ position:absolute; top:6px; left:6px; display:flex; gap:5px; flex-wrap:wrap; z-index:3; }
.b{ font-size:.58rem; font-weight:700; padding:3px 7px; border-radius:6px; color:#fff; background: rgba(0,0,0,.62); letter-spacing:.02em; }
.b.orig{ background: var(--vf-gold); color:#241600; }
.b.duga{ background: var(--vf-duga); }
.b.fanza{ background: var(--vf-fanza); }
.b.free{ background: var(--vf-green); color:#08210f; }
.b.price{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; }
.b.d3{ background: var(--vf-d3); }
.b.d2{ background: var(--vf-d2); }
.playbtn{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; background: rgba(0,0,0,.22); transition: opacity .2s ease; }
.playbtn span{ width:46px; height:46px; border-radius:50%; background: rgba(0,0,0,.55); border:1.5px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; }
.hint{ position:absolute; bottom:6px; right:6px; background: rgba(0,0,0,.66); font-size:.6rem; padding:2px 7px; border-radius:6px; z-index:3; color:#fff; }
.vc.playing .playbtn{ opacity:0; pointer-events:none; }
.vmeta{ padding:8px 10px 11px; }
.vmeta h3{ font-size:.79rem; font-weight:700; line-height:1.3; margin:0 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmeta h3 a{ color: var(--text); }
.vmeta h3 a:hover{ color: var(--accent); }
.vmeta .sub{ font-size:.66rem; color: var(--text-faint); }

/* weekly ranking rail */
.rank-row{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.rank-card{ position:relative; flex:0 0 240px; scroll-snap-align:start; }
.rnum{ position:absolute; top:-4px; left:4px; font-size:2.6rem; font-weight:900; font-style:italic; color: var(--vf-rank); text-shadow:0 2px 10px rgba(0,0,0,.85); z-index:4; line-height:1; font-family:Georgia,serif; }
.rank-card .vwrap{ aspect-ratio:16/10; }

/* preroll interstitial (self-ad + countdown) */
#preroll{ position:fixed; inset:0; background: rgba(0,0,0,.92); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
#preroll.on{ display:flex; }
.pr-box{ width:100%; max-width:640px; }
.pr-stage{ position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/10; }
.pr-stage video{ width:100%; height:100%; object-fit:contain; background:#000; }
.pr-adlabel{ position:absolute; top:9px; left:11px; background: rgba(0,0,0,.6); font-size:.6rem; padding:3px 8px; border-radius:6px; z-index:2; color:#fff; }
.pr-skip{ position:absolute; bottom:11px; right:11px; background: rgba(0,0,0,.78); color:#fff; font-size:.8rem; padding:8px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.28); min-width:130px; text-align:center; z-index:2; }
.pr-skip.ready{ cursor:pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0a0f; font-weight:700; border-color:transparent; }

/* lightbox 最大化 (sound on) */
#lb{ position:fixed; inset:0; background: rgba(0,0,0,.94); z-index:210; display:none; align-items:center; justify-content:center; padding:12px; }
#lb.on{ display:flex; }
#lb video{ max-width:100%; max-height:88vh; border-radius:12px; background:#000; }
#lbx{ position:absolute; top:14px; right:16px; font-size:1.6rem; color:#fff; background: rgba(0,0,0,.5); border:none; width:42px; height:42px; border-radius:50%; cursor:pointer; }

@media (max-width: 640px){
  .vgrid{ grid-template-columns: repeat(2,1fr); gap:10px; }
  .rank-card{ flex-basis:200px; }
  .vmeta h3{ font-size:.74rem; }
}

/* ===== モバイルファースト: ハンバーガーnav + コンパクトhero (2026-07-20 tono) ===== */
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); font-size:1.25rem; width:44px; height:44px; border-radius:10px; cursor:pointer; line-height:1; }
.hero.compact{ min-height:0 !important; }
.hero.compact .content{ padding:22px 20px 12px; }
.hero.compact h1{ font-size:clamp(1.25rem,4.5vw,2rem); margin:0 0 14px; }
.hero.compact h1 small{ font-size:.5em; margin-bottom:6px; }
header.site{ position:relative; }
@media (max-width: 768px){
  .nav-toggle{ display:block; }
  header.site .bar{ padding:11px 15px; flex-wrap:nowrap; }
  header.site nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:0; background:#14101a; border-top:1px solid var(--border); box-shadow:0 12px 30px rgba(0,0,0,.55); z-index:60; overflow:visible; }
  header.site nav.open{ display:flex; }
  header.site nav a{ padding:14px 18px; border-bottom:1px solid var(--border); font-size:.95rem; white-space:nowrap; }
  .hero.compact .content{ padding:14px 15px 8px; }
  .hero.compact .cta-row{ flex-direction:column; }
  .hero.compact .cta-row .btn{ width:100%; text-align:center; justify-content:center; }
}

/* ============================================================
   2026-07-20 UX: ランキングタブ / もっと見る / 検索 / 最近見た / ソート
   すべて既存トークン流用・追加のみ(既存挙動非改変)。
   ============================================================ */

/* ランキングタブ (#ranking) */
.rank-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
.rank-tab{
  font:inherit; cursor:pointer; font-size:.8rem; padding:7px 14px; border-radius:999px;
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  display:inline-flex; align-items:center; gap:5px; transition:.15s;
}
.rank-tab:hover{ border-color:var(--accent); color:var(--text); }
.rank-tab.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0a0f; border-color:transparent; font-weight:700; }
.rank-tab small{ font-size:.62rem; opacity:.8; letter-spacing:.02em; }
.rank-tab.disabled,.rank-tab[disabled]{ opacity:.5; cursor:not-allowed; color:var(--text-faint); border-style:dashed; }
.rank-tab.disabled:hover{ border-color:var(--border); color:var(--text-faint); }
.rank-note{ font-size:.74rem; color:var(--text-faint); margin:6px 0 0; }

/* もっと見る ページング */
.more-hide,.search-hide{ display:none !important; }
.more-wrap{ display:flex; justify-content:center; margin:14px 0 4px; }
.more-btn{
  font:inherit; cursor:pointer; font-size:.84rem; padding:11px 26px; border-radius:999px;
  background:transparent; border:1px solid var(--accent); color:var(--accent); transition:.15s;
}
.more-btn:hover{ background:var(--accent-soft); color:var(--text); }

/* 簡易検索 */
.search-bar{ margin:14px 0 4px; }
.search-bar input{
  width:100%; max-width:420px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:999px; padding:11px 18px; font:inherit; font-size:.9rem;
}
.search-bar input:focus{ outline:none; border-color:var(--accent); }
.search-bar input::placeholder{ color:var(--text-faint); }

/* 最近見た作品 (#recent-viewed) */
#recent-viewed .recent-row{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; }
.recent-card{ flex:0 0 132px; display:block; }
.recent-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.recent-card .rc-title{ display:block; font-size:.72rem; color:var(--text-dim); margin-top:5px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.recent-card:hover .rc-title{ color:var(--text); }

/* ジャンル一覧の 人気/新着 ソート */
.sort-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 12px; }
.sort-bar .sort-label{ font-size:.76rem; color:var(--text-faint); }
.sort-btn{
  font:inherit; cursor:pointer; font-size:.78rem; padding:6px 14px; border-radius:999px;
  background:transparent; border:1px solid var(--border); color:var(--text-dim); transition:.15s;
}
.sort-btn:hover{ border-color:var(--accent); color:var(--text); }
.sort-btn.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0a0f; border-color:transparent; font-weight:700; }