/* 「それ、何に使うの？」専用の見た目（sore-nanitsukau/index.html のみ読み込み）
   色の由来 = チャンネルのバナー（NanitsukaVideo/assets/channel/banner.png）の、淡い水色からクリームへの地と白い札。
   ヘッダー/フッターのDマーク(スタジオの顔)は下記で house cyan に固定する。 */
:root{
  --paper:#f6f6ef;
  --surface:#ffffff;
  --ink:#1f2933;
  --ink-soft:#4a5a6a;
  --mist:#5a6875;
  --cyan:#1d5fc4;
  --cyan-bright:#1d5fc4;
  --aqua:#fdf1c7;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
body{background:linear-gradient(180deg,#e6f3fc 0,#f4f5ef 520px,#fdf5e4 100%);background-attachment:fixed}
.site-head{background:rgba(236,245,251,.86)}
.site-head .dmark,.foot .dmark{color:#1f9fc4}

.channel-hero{padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.8rem,4vw,2.6rem)}
.channel-hero img{display:block;width:100%;max-width:760px;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:18px;box-shadow:0 14px 40px -26px rgba(30,60,100,.4)}
.channel-hero h1{font-family:var(--sans);font-weight:900;font-size:clamp(1.7rem,4.4vw,2.6rem);letter-spacing:.02em;line-height:1.4;margin-top:1.6rem}
.channel-hero .sub{font-weight:700;color:var(--ink-soft);font-size:clamp(1rem,1.8vw,1.15rem)}
.channel-hero .about{color:var(--ink-soft);margin-top:.7rem;max-width:44em;word-break:auto-phrase}
.channel-hero .btn-fill{margin-top:1.3rem}

.release-card{border-radius:14px;background:var(--surface);box-shadow:0 8px 24px -18px rgba(30,60,100,.35)}
.release-card .ttl{font-family:var(--sans);font-weight:700}
.release-card .tag{font-weight:700;color:#7a4b00}
.release-card[hidden]{display:none}

.finder{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;padding-bottom:1.2rem}
.finder[hidden]{display:none}
.finder input{flex:1 1 100%;max-width:30rem;min-height:46px;padding:.5rem 1rem;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.finder-subjects{display:flex;flex-wrap:wrap;gap:.5rem}
.finder-subjects button,.finder-empty button{min-height:44px;padding:.3rem 1rem;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.finder-subjects button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#fff}
.finder-count{color:var(--mist);font-size:.85rem}
.finder-empty{padding-bottom:clamp(3rem,7vw,5rem);color:var(--ink-soft)}
.finder-empty button{margin-left:.6rem}
.finder input:focus-visible,.finder button:focus-visible,.finder-empty button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}