/* ============================================================
   parts-motion.css — きなこのHTML部品集 K-28 / K-29 / K-30 の共通スタイル
   デザインキット: 紺 #0D3761 / 赤 #C0421E / 黄 #F4E51E / 水色 #48B9D7
                   紙色 #FFFDF7・#F6F0E6 / 墨 #2C2620
   ============================================================ */

/* ---------- K-28 和紙シェーダー背景 ---------- */
.washi-host{position:relative;}
/* トップページの #stage は子要素が独自の重なりを持つため、この持ち上げは適用しない */
.washi-host:not(#stage) > *:not(.washi-bg){position:relative; z-index:1;}
canvas.washi-bg{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
/* WebGL2が使えない場合の静止フォールバック（紙の質感を重ねたグラデーション） */
.washi-fallback-paper{
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(13,55,97,.055), transparent 55%),
    radial-gradient(90% 70% at 85% 90%, rgba(192,66,30,.045), transparent 55%),
    repeating-linear-gradient(93deg, rgba(44,38,32,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(4deg, rgba(44,38,32,.016) 0 1px, transparent 1px 7px),
    linear-gradient(168deg, #FFFDF7 0%, #FBF6EA 55%, #F6F0E6 100%);
}
.washi-fallback-navy{
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(72,185,215,.13), transparent 55%),
    radial-gradient(90% 70% at 85% 95%, rgba(244,229,30,.05), transparent 55%),
    repeating-linear-gradient(93deg, rgba(255,253,247,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(4deg, rgba(255,253,247,.022) 0 1px, transparent 1px 7px),
    linear-gradient(168deg, #0E3A66 0%, #0D3761 55%, #0A2C4E 100%);
}

/* 本棚ページ：ヘッダーを紙テクスチャの帯にする */
.shelf-hero{
  margin:0 -18px; padding-left:18px; padding-right:18px;
  border-radius:0 0 14px 14px; overflow:hidden;
}

/* 市ページ：見出し帯を紺の和紙パネルにする */
.city-hero{
  background:#0D3761;
  border-bottom:none; border-radius:14px;
  padding:30px 24px 24px; margin:16px 0 10px;
  overflow:hidden;
}
.city-hero .kicker{color:#48B9D7;}
.city-hero h1{color:#FFFDF7;}
.city-hero .ruby{color:#B9C9D9;}
.city-hero .subtitle{color:#FFFFFF;}
.city-hero .intro{color:#E7EDF3;}
.city-hero .ednote{color:#A9BCD0;}
.city-hero a{color:#BFE3F2;}

/* 広場ページ：看板を紙テクスチャの帯にする */
.plaza-hero{overflow:hidden; border-radius:10px;}

/* トップページ：写真シーンの上に和紙の粒を重ねる */
#stage canvas.washi-bg{mix-blend-mode:soft-light; opacity:.5;}

/* ---------- K-29 SplitText ---------- */
.split-char{display:inline-block; will-change:transform,opacity;}

/* ---------- K-30 栞ボタン ---------- */
.shiori-btn{
  position:absolute; top:0; right:14px; z-index:3;
  width:38px; height:52px; padding:0;
  background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
.shiori-btn .shiori-ribbon{
  display:block; width:24px; height:20px;
  background:#D9D2C2;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transition:height .38s cubic-bezier(.34,1.3,.5,1), background-color .25s ease;
}
.shiori-btn .shiori-label{
  margin-top:3px; font-size:10px; letter-spacing:.18em; color:#6B6257;
  transition:color .25s ease;
}
.shiori-btn:hover .shiori-ribbon{background:#B9AE97;}
.shiori-btn[aria-pressed="true"] .shiori-ribbon{background:#C0421E; height:44px;}
.shiori-btn[aria-pressed="true"] .shiori-label{color:#C0421E; font-weight:700;}
.shiori-btn:hover[aria-pressed="true"] .shiori-ribbon{background:#A8371A;}
.shiori-btn:focus-visible{outline:2px solid #0D3761; outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  .shiori-btn .shiori-ribbon{transition:none;}
}

/* 本棚カード：栞ボタンを置くための調整（リンクは内側に分離） */
.shelf-card{position:relative;}
.shelf-card .card-link{display:block; text-decoration:none; color:inherit;}

/* 「栞 N件」の小さな表示 */
.shiori-count-bar{
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:#6B6257; margin:0 0 14px;
}
.shiori-count-bar .mark{color:#C0421E; font-size:14px;}
.shiori-count-bar b{color:#0D3761; font-weight:700;}