/* Hoppin ── 絵本のテイスト（2026-11-01 小泉「全体の雰囲気・タッチを添付に寄せて。キャラはそのまま」）
   hoppin.css の後に読む。トークン・枠の3層・改行の約束は hoppin.css のまま。ここは「世界の絵」と「やわらかい部品」だけ。
   正＝BAN_Vault/30_Systems/Hoppin設計.md §14。見本＝public/taste.html */

:root{
  /* 見出しは丸ゴシック・字間を少し開ける（本文は hoppin.css の --h-font のまま） */
  --hs-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Zen Kaku Gothic New",sans-serif;
  /* 主役のボタン＝あたたかい山吹（文字は濃い緑。白文字にしない） */
  --hs-amber-a:#ffd66b; --hs-amber-b:#f9bd36; --hs-amber-c:#f2a823; --hs-amber-text:#173b28;
  /* 吹き出し＝クリーム */
  --hs-bubble:#fffbee; --hs-bubble-text:#173b28;
  /* 世界の色（朝昼夕夜で入れ替える）：空3段・光・丘3枚 */
  --hs-sky-1:#cfeaf6; --hs-sky-2:#e7f4ee; --hs-sky-3:#fbf6e2; --hs-glow:#fff3c4;
  --hs-hill-1:#b9dc9c; --hs-hill-2:#8cc77a; --hs-hill-3:#5fa765; --hs-hill-shade:#3f8a55;
  --hs-star:transparent;
  /* ガラスのカード（絵の上に乗せる面） */
  --hs-glass:rgba(255,253,244,.72); --hs-glass-line:rgba(255,255,255,.7); --hs-glass-text:var(--ink);
  --hs-tab:rgba(255,253,244,.82); --hs-tab-on:rgba(50,132,75,.14);
}
:root[data-tod="morning"]{
  --hs-sky-1:#f9dcc0; --hs-sky-2:#fbecd5; --hs-sky-3:#f2f5e0; --hs-glow:#ffe6a6;
  --hs-hill-1:#c7e2a2; --hs-hill-2:#9fce83; --hs-hill-3:#6cb069; --hs-hill-shade:#4b9358;
}
:root[data-tod="evening"]{
  --hs-sky-1:#f6b98c; --hs-sky-2:#f9d4a8; --hs-sky-3:#f6e6c6; --hs-glow:#ffd38a;
  --hs-hill-1:#b8c98a; --hs-hill-2:#8fae6c; --hs-hill-3:#62905a; --hs-hill-shade:#46744a;
}
:root[data-theme="dark"]{
  --hs-sky-1:#0a1f33; --hs-sky-2:#0f3245; --hs-sky-3:#17474d; --hs-glow:#bfe9d6;
  --hs-hill-1:#1f4f45; --hs-hill-2:#183f37; --hs-hill-3:#12322c; --hs-hill-shade:#0c2520;
  --hs-star:#ffe6a0;
  --hs-glass:rgba(17,52,60,.62); --hs-glass-line:rgba(255,255,255,.12); --hs-glass-text:#eef5ea;
  --hs-tab:rgba(14,40,48,.78); --hs-tab-on:rgba(255,255,255,.1);
}

/* ---------- 1. 世界の絵（画面いっぱいの背景） ---------- */
/* <div class="hs-world"><svg class="hs-scene">…</svg> 中身 </div>。絵は taste.html の #hs-scene を写す */
.hs-world{position:relative;isolation:isolate;overflow:hidden;color:var(--hs-glass-text);
  background:linear-gradient(180deg,var(--hs-sky-1) 0%,var(--hs-sky-2) 42%,var(--hs-sky-3) 78%,var(--hs-sky-3) 100%)}
.hs-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hs-scene .sky-glow{stop-color:var(--hs-glow)}
.hs-scene .h1{fill:var(--hs-hill-1)}.hs-scene .h2{fill:var(--hs-hill-2)}.hs-scene .h3{fill:var(--hs-hill-3)}
.hs-scene .shade{fill:var(--hs-hill-shade)}
.hs-scene .star{fill:var(--hs-star)}
.hs-scene .cloud{fill:#fff;opacity:.55}
:root[data-theme="dark"] .hs-scene .cloud{opacity:.06}
:root:not([data-theme="dark"]) .hs-scene .stars{display:none}
.hs-scene .stars .star{animation:hs-twinkle 4s ease-in-out infinite}
.hs-scene .stars .star:nth-child(3n){animation-delay:-1.3s}.hs-scene .stars .star:nth-child(3n+1){animation-delay:-2.6s}
@keyframes hs-twinkle{0%,100%{opacity:.95}50%{opacity:.35}}

/* ---------- 2. キャラの光（原画はそのまま・まわりに光を置くだけ） ---------- */
.hs-glow{position:relative;display:inline-grid;place-items:center}
.hs-glow::before{content:"";position:absolute;inset:-18%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,246,196,.85) 0%,rgba(255,240,180,.45) 45%,rgba(255,236,170,.14) 72%,rgba(255,236,170,0) 100%)}
:root[data-theme="dark"] .hs-glow::before{background:radial-gradient(closest-side,rgba(200,244,214,.55) 0%,rgba(170,232,200,.28) 45%,rgba(150,220,190,.08) 72%,rgba(150,220,190,0) 100%)}
.hs-float{animation:hs-float 3.6s ease-in-out infinite}
@keyframes hs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.hs-float,.hs-scene .stars .star{animation:none}}

/* ---------- 3. 吹き出し（クリーム・しっぽ付き・大きな丸ゴシック） ---------- */
.hs-bubble{position:relative;display:inline-block;padding:14px 22px;border-radius:28px;background:var(--hs-bubble);color:var(--hs-bubble-text);
  font-family:var(--hs-round);font-weight:700;font-size:19px;line-height:1.55;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,30,30,.08),0 8px 22px rgba(10,30,30,.14)}
.hs-bubble::after{content:"";position:absolute;bottom:-9px;left:30px;width:22px;height:14px;background:var(--hs-bubble);
  clip-path:polygon(0 0,100% 0,8% 100%)}
.hs-bubble.is-right::after{left:auto;right:30px;clip-path:polygon(0 0,100% 0,92% 100%)}
.hs-bubble.is-down::after{left:50%;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%)}
.hs-bubble.is-card{display:block;border-radius:28px;padding:20px 22px;font-size:16px;font-weight:500}

/* ---------- 4. 主役のボタン（山吹のピル・下に光） ---------- */
.hs-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:14px 24px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--hs-round);font-weight:900;font-size:18px;letter-spacing:.06em;color:var(--hs-amber-text);
  background:linear-gradient(180deg,var(--hs-amber-a) 0%,var(--hs-amber-b) 55%,var(--hs-amber-c) 100%);
  box-shadow:0 0 0 .5px rgba(160,100,10,.35),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(170,100,0,.18),0 8px 24px rgba(249,189,54,.35)}
.hs-cta:active{transform:translateY(1px)}
.hs-link{display:block;margin:12px auto 0;text-align:center;font-family:var(--hs-round);font-weight:700;letter-spacing:.06em;color:var(--ink);background:none;border:0}
:root[data-theme="dark"] .hs-link{color:#9fe0c4}

/* ---------- 5. ガラスのカード（絵の上に乗せる） ---------- */
.hs-glass{border-radius:28px;background:var(--hs-glass);color:var(--hs-glass-text);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 .5px var(--hs-glass-line),inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px rgba(10,30,30,.12)}

/* ---------- 6. 見出し（丸ゴシック・字間広め） ---------- */
.hs-title{margin:0;font-family:var(--hs-round);font-weight:700;font-size:28px;line-height:1.45;letter-spacing:.08em;text-wrap:balance}
.hs-sub{margin:10px 0 0;font-family:var(--hs-round);font-weight:500;font-size:15px;line-height:1.8;letter-spacing:.04em;opacity:.86}
.hs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-family:var(--hs-round);font-weight:700;font-size:14px;
  background:var(--hs-glass);box-shadow:inset 0 0 0 .5px var(--hs-glass-line)}

/* ---------- 7. 浮いたタブバー ---------- */
.hs-tabbar{position:absolute;left:12px;right:12px;bottom:calc(12px + var(--sab));display:flex;justify-content:space-around;padding:6px;border-radius:999px;
  background:var(--hs-tab);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 .5px var(--hs-glass-line),0 10px 30px rgba(10,30,30,.18)}
.hs-tabbar a{flex:1;display:grid;justify-items:center;gap:2px;padding:7px 0 5px;border-radius:999px;font-size:10.5px;font-weight:700;color:var(--hs-glass-text);opacity:.75}
.hs-tabbar a[aria-current="page"]{opacity:1;background:var(--hs-tab-on)}
.hs-tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}