/* 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",var(--h-font);
  /* 主役のボタン＝あたたかい山吹（文字は濃い緑。白文字にしない） */
  --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(--h-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-tod="night"]{
  --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-tod="night"] .hs-scene .cloud{opacity:.06}
:root:not([data-tod="night"]) .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-tod="night"] .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 var(--h-hair) 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(--h-deep-text);background:none;border:0}
:root[data-tod="night"] .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 var(--h-hair) 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 var(--h-hair) var(--hs-glass-line)}

/* ---------- 7. 浮いたタブバー ---------- */
.hs-tabbar{position:absolute;left:12px;right:12px;bottom:calc(12px + var(--h-safe-b));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 var(--h-hair) 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}

/* ---------- 8. 本体画面で共有する部品 ---------- */
:root{--hs-solid:#fffdf4;--hs-solid-text:#193b2a;--hs-solid-line:#d5e4cd;--hs-muted:#4c6253}
:root[data-tod="night"]{--hs-solid:#173b35;--hs-solid-text:#f3f7ee;--hs-solid-line:#52766a;--hs-muted:#d0dfd1}
.app-shell{min-height:100vh;min-height:100dvh;position:relative;padding:calc(18px + env(safe-area-inset-top)) 22px calc(110px + env(safe-area-inset-bottom));overflow:hidden}
.app-shell.hs-world{color:var(--hs-solid-text)}
.app-shell>*:not(.hs-scene){position:relative;z-index:1}
.app-top{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.app-logo{display:block;width:150px;height:auto;max-height:65px;object-fit:contain;object-position:left center}
.app-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-tools a,.app-tools button{border:0;border-radius:999px;padding:7px 12px;background:var(--hs-solid);color:var(--hs-solid-text);font:700 13px var(--hs-round);text-decoration:none;box-shadow:inset 0 0 0 1px var(--hs-solid-line)}
.app-tools button[aria-pressed="true"]{background:var(--hs-amber-a);color:var(--hs-amber-text)}
.app-main{width:min(100%,1120px);margin:24px auto 0}
.app-intro{margin-bottom:20px;color:var(--hs-solid-text)}
.app-intro p{margin:5px 0}
.app-panel{background:var(--hs-solid);color:var(--hs-solid-text);border-radius:28px;padding:22px;box-shadow:inset 0 0 0 var(--h-hair) var(--hs-solid-line),inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px rgba(16,45,32,.12)}
.app-panel h2,.app-panel h3{font-family:var(--hs-round);margin:0 0 12px}
.app-panel p{margin:5px 0 12px}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.app-stack{display:grid;gap:14px}
.app-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.app-meta{color:var(--hs-muted);font-size:13px}
.app-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.app-list>li{padding:14px 0;border-bottom:1px solid var(--hs-solid-line)}
.app-list>li:last-child{border:0}
.app-list strong{font-family:var(--hs-round)}
.app-nav{display:flex;gap:6px;overflow-x:auto;margin:0 0 18px;padding:6px;background:var(--hs-solid);border-radius:999px;box-shadow:inset 0 0 0 1px var(--hs-solid-line)}
.app-nav a{flex:1;min-width:max-content;text-align:center;border-radius:999px;padding:10px 12px;color:var(--hs-solid-text);font:700 14px var(--hs-round);text-decoration:none}
.app-nav a[aria-current="page"]{background:var(--hs-amber-a);color:var(--hs-amber-text)}
.app-input,.app-select,.app-textarea{width:100%;min-height:48px;border:1px solid var(--hs-solid-line);border-radius:12px;padding:10px 12px;font:16px var(--h-font);background:var(--hs-solid);color:var(--hs-solid-text)}
.app-textarea{min-height:96px}
.app-field{display:grid;gap:5px;font-size:14px;font-weight:700}
.app-smallbtn{border:1px solid var(--hs-solid-line);background:var(--hs-solid);color:var(--hs-solid-text);border-radius:999px;padding:8px 14px;font:700 14px var(--hs-round);cursor:pointer;white-space:nowrap}
.app-smallbtn.is-on{background:var(--hs-amber-a);color:var(--hs-amber-text)}
.app-action{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.app-action .hs-cta{width:auto;min-height:44px;font-size:15px;padding:8px 22px}
.app-feedback{min-height:1.6em;font-weight:700;color:var(--hs-solid-text)}
.app-tag{display:inline-block;background:var(--h-mint);color:var(--h-deep-text);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
:root[data-tod="night"] .app-tag{background:#214733;color:#e5f3e3}
.app-table-wrap{overflow:auto}
.app-table{border-collapse:collapse;width:100%;min-width:500px;text-align:left}
.app-table th,.app-table td{padding:11px 10px;border-bottom:1px solid var(--hs-solid-line)}
.app-table th{font-size:13px;color:var(--hs-muted)}
.app-table td{font-size:14px}
.app-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.app-calendar button{min-height:58px;border:1px solid var(--hs-solid-line);background:var(--hs-solid);color:var(--hs-solid-text);border-radius:12px;font-size:13px;cursor:pointer}
.app-calendar button[aria-pressed="true"]{background:var(--hs-amber-a);color:var(--hs-amber-text)}
.app-calendar button[disabled]{opacity:.45}
.app-tree-mark{font-size:19px;font-weight:900;white-space:nowrap}
.app-tree-sketch{display:flex;align-items:center;gap:12px}
.app-tree-sketch svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.app-tree-sketch .app-meta{font-size:12px}
.app-qr{width:150px;height:150px;background:var(--hs-solid);border:8px solid var(--hs-solid-line);display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:8px}
.app-qr i{background:var(--hs-solid-text)}
.staff-stage{min-height:480px;position:relative;display:grid;align-content:start;gap:18px}
.staff-stage .hs-bubble{max-width:500px}
.staff-pyoko{justify-self:center;align-self:center;margin:20px 0}
.staff-card{padding:20px}
.staff-float-nav{position:fixed;left:max(12px,calc((100vw - 600px)/2));right:max(12px,calc((100vw - 600px)/2));bottom:calc(12px + env(safe-area-inset-bottom));z-index:5}
.staff-float-nav.hs-tabbar{position:fixed}
.staff-float-nav a{text-decoration:none}
.staff-float-nav svg{width:22px;height:22px}
.app-chat{display:grid;gap:10px;max-height:320px;overflow:auto}
.app-chat p{padding:10px 14px;border-radius:16px;margin:0;max-width:86%;background:var(--h-mint);color:var(--h-deep-text)}
.app-chat p.is-user{justify-self:end;background:var(--hs-amber-a);color:var(--hs-amber-text)}
:root[data-tod="night"] .app-chat p:not(.is-user){background:#285443;color:#f3f7ee}
@media(max-width:700px){.app-shell{padding-left:16px;padding-right:16px}.app-main{margin-top:18px}.app-grid{grid-template-columns:1fr}.app-panel{padding:18px}.app-logo{width:125px}.app-tools{gap:5px}.app-tools a,.app-tools button{font-size:11px;padding:6px 9px}.staff-stage{min-height:420px}.app-nav{border-radius:18px}.app-nav a{font-size:12px;padding:8px}}
@media(min-width:768px){.hs-scene.is-mobile{display:none}}
@media(max-width:767px){.hs-scene.is-desktop{display:none}}
.login-wrap{width:min(100%,480px);margin:5vh auto 0;display:grid;gap:16px}
.login-wrap>.app-logo{width:190px}
.login-wrap>.app-panel{display:grid;gap:16px}
.login-tabs{display:flex;gap:6px;flex-wrap:wrap}
.login-tabs button[aria-pressed="true"]{background:var(--hs-amber-a);color:var(--hs-amber-text)}
[hidden]{display:none!important}