/* 江戸草子 — 文様（もんよう）
 *
 * 江戸の意匠を、飾りではなく**この資料庫の語彙**として入れる。
 *
 * 決めごと:
 *   1. **本文には敷かない。**読むところに模様を置くと、字が読みにくくなる。
 *      模様は縁・見出し・仕切り・札の地——「読まないところ」に置く
 *   2. **色は一箇所で決める。**mask で抜いて背景色を当てるので、
 *      `--mon` を変えるだけで文様の色が変わる。図を作り直さなくてよい
 *   3. **実在の文様に沿う。**麻の葉・青海波・市松・七宝・矢絣・鱗・亀甲は、
 *      いずれも江戸期に染織や工芸で広く使われた幾何文様である。
 *      **それらしく見せるために形を崩さない**
 *   4. **動きは控えめに。**暖簾が揺れる、小判が返る——一箇所ずつ。
 *      画面じゅうが動くと、資料が読めなくなる
 *   5. `prefers-reduced-motion` を必ず見る
 *
 * 幾何文様そのものは意匠として広く共有されてきたもので、
 * ここでは形を数式で引き直している（写しではない）。
 */

:root{
  --mon: rgba(36, 72, 110, .10);      /* 文様の色。ここ一箇所で決める */
  --mon-strong: rgba(36, 72, 110, .18);
  --mon-shu: rgba(181, 68, 60, .12);
  --mon-kin: rgba(168, 132, 44, .16);
  --mon-size: 34px;
}

/* ── 文様の下地 ─────────────────────────────────────────────
   mask で形を抜き、背景色を当てる。色は --mon で決まる。 */
[class*="mon-"]{
  background-color: var(--mon);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-size: var(--mon-size) var(--mon-size);
          mask-size: var(--mon-size) var(--mon-size);
}

/* 麻の葉 — 六角に星を組む。子の健やかな育ちを願う文様として使われた */
.mon-asanoha{
  --mon-size: 40px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 104' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M30 0v26M30 26L7.5 13M30 26L52.5 13M30 26v26M30 52L7.5 39M30 52L52.5 39M30 52v26M30 78L7.5 65M30 78L52.5 65M30 78v26M0 26v52M60 26v52M0 26l7.5-13M0 78l7.5 13M60 26l-7.5-13M60 78l-7.5 13M7.5 13v26M7.5 39v26M7.5 65v26M52.5 13v26M52.5 39v26M52.5 65v26M7.5 13L30 0M52.5 13L30 0M7.5 91L30 104M52.5 91L30 104'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 104' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M30 0v26M30 26L7.5 13M30 26L52.5 13M30 26v26M30 52L7.5 39M30 52L52.5 39M30 52v26M30 78L7.5 65M30 78L52.5 65M30 78v26M0 26v52M60 26v52M0 26l7.5-13M0 78l7.5 13M60 26l-7.5-13M60 78l-7.5 13M7.5 13v26M7.5 39v26M7.5 65v26M52.5 13v26M52.5 39v26M52.5 65v26M7.5 13L30 0M52.5 13L30 0M7.5 91L30 104M52.5 91L30 104'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 69px; mask-size: 40px 69px;
}

/* 青海波 — 重なる波。果てしなく続く穏やかな海を表す */
.mon-seigaiha{
  --mon-size: 44px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cg%3E%3Cpath d='M-22 22a22 22 0 0 1 44 0M0 22a22 22 0 0 1 44 0M22 22a22 22 0 0 1 44 0'/%3E%3Cpath d='M-22 22a15 15 0 0 1 30 0M0 22a15 15 0 0 1 30 0M22 22a15 15 0 0 1 30 0'/%3E%3Cpath d='M-22 22a8 8 0 0 1 16 0M0 22a8 8 0 0 1 16 0M22 22a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cg%3E%3Cpath d='M-22 22a22 22 0 0 1 44 0M0 22a22 22 0 0 1 44 0M22 22a22 22 0 0 1 44 0'/%3E%3Cpath d='M-22 22a15 15 0 0 1 30 0M0 22a15 15 0 0 1 30 0M22 22a15 15 0 0 1 30 0'/%3E%3Cpath d='M-22 22a8 8 0 0 1 16 0M0 22a8 8 0 0 1 16 0M22 22a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 44px 22px; mask-size: 44px 22px;
}

/* 市松 — 佐野川市松が舞台で用いて広まったとされる、石畳の文様 */
.mon-ichimatsu{
  --mon-size: 26px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23000'/%3E%3C/svg%3E");
}

/* 七宝 — 円を四方に重ねる。縁がつながることを表す */
.mon-shippou{
  --mon-size: 38px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='0' cy='0' r='14'/%3E%3Ccircle cx='40' cy='0' r='14'/%3E%3Ccircle cx='0' cy='40' r='14'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='0' cy='0' r='14'/%3E%3Ccircle cx='40' cy='0' r='14'/%3E%3Ccircle cx='0' cy='40' r='14'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3C/svg%3E");
}

/* 矢絣 — 矢羽根。射た矢は戻らないことから、嫁入りの着物にも使われた */
.mon-yagasuri{
  --mon-size: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M0 0l10 10L20 0v6L10 16 0 6z' fill='%23000'/%3E%3Cpath d='M0 20l10 10 10-10v6L10 36 0 26z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M0 0l10 10L20 0v6L10 16 0 6z' fill='%23000'/%3E%3Cpath d='M0 20l10 10 10-10v6L10 36 0 26z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 22px 44px; mask-size: 22px 44px;
}

/* 鱗 — 三角を交互に。厄を落とす文様として能装束などに使われた */
.mon-uroko{
  --mon-size: 24px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l8 14H2z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l8 14H2z' fill='%23000'/%3E%3C/svg%3E");
}

/* 亀甲 — 六角。長寿を表す */
.mon-kikkou{
  --mon-size: 30px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M13 0l11 6.5v13L13 26 2 19.5v-13z'/%3E%3Cpath d='M13 26v4M2 6.5L-9 0M24 6.5L35 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M13 0l11 6.5v13L13 26 2 19.5v-13z'/%3E%3Cpath d='M13 26v4M2 6.5L-9 0M24 6.5L35 0'/%3E%3C/svg%3E");
  -webkit-mask-size: 26px 30px; mask-size: 26px 30px;
}

/* ── 障子の桟 ───────────────────────────────────────────────
   仕切りに使う。**縦横の格子だけ。**障子は、光を通すための道具である。 */
.shoji{
  position: relative;
  background-image:
    linear-gradient(to right, var(--mon-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mon-strong) 1px, transparent 1px);
  background-size: 2.2rem 2.2rem;
}

/* ── 暖簾 ───────────────────────────────────────────────────
   店の入口。三枚に割れているのが暖簾の形。 */
.noren{
  position: relative;
  padding-top: 1.35rem;
}
.noren::before{
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 1.35rem;
  background: var(--shu, #b5443c);
  -webkit-mask-image:
    linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-image:
    linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 31% 100%, 31% 100%, 31% 100%;
          mask-size: 31% 100%, 31% 100%, 31% 100%;
  -webkit-mask-position: 0 0, 34.5% 0, 100% 0;
          mask-position: 0 0, 34.5% 0, 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference){
  .noren:hover::before{ animation: noren-yure 1.5s ease-in-out; }
}
@keyframes noren-yure{
  0%, 100%{ transform: skewX(0deg); }
  25%{ transform: skewX(1.6deg); }
  60%{ transform: skewX(-1deg); }
}

/* ── 小判 ───────────────────────────────────────────────────
   値段のところに置く。**押すと返る。**表は「一両」、裏は今の円。 */
.koban{
  display: inline-grid; place-items: center;
  width: 3.4rem; height: 2.2rem;
  border-radius: 50% / 50%;
  background: linear-gradient(145deg, #d9b45c, #c9a25a 40%, #a8842c);
  color: #4a3a18;
  font-family: var(--font-mincho, serif);
  font-size: .68rem; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(74,58,24,.35), 0 1px 2px rgba(28,24,21,.25);
  position: relative;
}
.koban::before, .koban::after{
  content: ''; position: absolute; left: 12%; right: 12%;
  height: 1px; background: rgba(74,58,24,.3);
}
.koban::before{ top: 22%; }
.koban::after{ bottom: 22%; }
@media (prefers-reduced-motion: no-preference){
  .koban{ transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .koban:hover{ transform: rotateY(180deg); }
}

/* ── 扇 ─────────────────────────────────────────────────────
   末広がり。見出しの飾りに使う。 */
.sensu{
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 22A14 14 0 0 1 2 8l10-6 10 6a14 14 0 0 1-10 14z' opacity='0'/%3E%3Cpath d='M12 21.5c-4.5-2-7.5-6.5-8.2-11.4L12 3l8.2 7.1c-.7 4.9-3.7 9.4-8.2 11.4z'/%3E%3Cpath d='M12 3v18.5M7.6 4.9l-1 15.1M16.4 4.9l1 15.1M3.8 10.1h16.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 21.5c-4.5-2-7.5-6.5-8.2-11.4L12 3l8.2 7.1c-.7 4.9-3.7 9.4-8.2 11.4z'/%3E%3Cpath d='M12 3v18.5M7.6 4.9l-1 15.1M16.4 4.9l1 15.1M3.8 10.1h16.4'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ── 銭と小判 ───────────────────────────────────────────────
   値段のところに添える。**数字だけより、手触りが残る。**
   一文銭は真ん中が四角い穴（寛永通宝）。小判は楕円。 */
.kan-koban, .kan-zeni{ display: inline-flex; align-items: center; gap: .22rem; }
.koban-i{
  width: 2.5rem; height: 1.55rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(148deg, #e0c274, #c9a25a 45%, #a8842c);
  box-shadow: inset 0 0 0 1px rgba(74,58,24,.4), 0 1px 2px rgba(28,24,21,.22);
  position: relative;
}
.koban-i b{
  font-family: var(--font-mincho, serif);
  font-size: .58rem; color: #5a4418; font-weight: 700;
}
.koban-i::before, .koban-i::after{
  content: ''; position: absolute; left: 16%; right: 16%; height: 1px;
  background: rgba(74,58,24,.28);
}
.koban-i::before{ top: 20%; }
.koban-i::after{ bottom: 20%; }

/* 寛永通宝。真ん中の四角い穴が、この銭の顔である */
.zeni-i{
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(150deg, #9a7f52, #7d6540);
  box-shadow: inset 0 0 0 1px rgba(40,32,20,.35);
  position: relative;
}
.zeni-i::after{
  content: ''; position: absolute; left: 50%; top: 50%;
  width: .34rem; height: .34rem; transform: translate(-50%, -50%);
  background: var(--washi-card, #fbf7ef);
  box-shadow: 0 0 0 1px rgba(40,32,20,.3);
}
@media (prefers-reduced-motion: no-preference){
  .koban-i, .zeni-i{ transition: transform .4s cubic-bezier(.16,1,.3,1); }
  .kan-mon:hover .koban-i{ transform: rotate(-6deg) translateY(-2px); }
  .kan-mon:hover .zeni-i{ transform: translateY(-2px); }
  .kan-mon:hover .koban-i:nth-child(2), .kan-mon:hover .zeni-i:nth-child(2){ transition-delay: .04s; }
  .kan-mon:hover .koban-i:nth-child(3), .kan-mon:hover .zeni-i:nth-child(3){ transition-delay: .08s; }
  .kan-mon:hover .zeni-i:nth-child(4){ transition-delay: .12s; }
  .kan-mon:hover .zeni-i:nth-child(5){ transition-delay: .16s; }
  .kan-mon:hover .zeni-i:nth-child(6){ transition-delay: .2s; }
}

/* ── 和紙のきめ ─────────────────────────────────────────────
   紙の地に、ごく細かい繊維の揺らぎを置く。**気づかない程度に。**
   気づく濃さにすると、字が読みにくくなる。 */
body{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,100,70,.020) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(120,100,70,.016) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(120,100,70,.014) 0 1px, transparent 1px);
  background-size: 13px 13px, 19px 19px, 29px 29px;
}