/* ============================================================
   お城の庭（2026-10-26 高橋さんが決定。DESIGN-UI.md の「方向」）
   <html class="castle"> の画面にだけ効く。共通の app.css の上に重ねる。
   背景の絵・空の色・ホタル・クリアの演出は castle.js。
   切り替えていない画面は、これを読み込まないので今の「作業台」のまま。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@700&family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

html.castle{
  /* app.css は「濃い地に var(--bg) の文字」（選んだタブ・番号の丸など）で使う。地は body で夜にしているので、ここは羊皮紙の白 */
  --bg:#fffaf0;
  --ink:#3a2a14; --ink2:#6c5536; --ink3:#937c58;
  /* 羊皮紙。文字の地は不透明に近く（DESIGN-UI.md: 部品の地は 90%以上） */
  --glass:rgba(255,248,230,.96); --glass-solid:#fffaf0; --glass-edge:#fff1cf;
  --line:rgba(122,79,18,.2); --line2:rgba(122,79,18,.11);
  /* 差し色は金。押せるもの・いま居る場所に */
  --v1:#c8902c; --v1-bg:rgba(242,194,78,.24); --v1-ink:#8a5a12;
  --gray-bg:rgba(122,79,18,.08);
  --gold1:#fff1b8; --gold2:#f2c24e; --gold3:#c8902c; --gold4:#7a4f12;
  --night:#1a1d48; --night2:#141739;
  --red1:#ef6a5a; --red2:#b8372b; --red3:#7a1f17;
  --grn1:#9be36a; --grn2:#4fb33a; --grn3:#2c6e1f;
  --gem:#a35ce0; --gem2:#5b2a9e;
  --sh-1:0 12px 30px rgba(0,0,0,.45); --sh-2:0 18px 40px rgba(0,0,0,.55);
  --sans:'M PLUS Rounded 1c','Zen Kaku Gothic New','Yu Gothic UI',sans-serif;
  --disp:'Kaisei Decol','M PLUS Rounded 1c',serif;
}
/* 絵の画面なので、明暗の切り替えは使わない */
html.castle #themeBtn{display:none}
html.castle body{background:var(--night2)}
html.castle body::before{display:none}

/* ===== 左メニュー: 夜の紺と金 ===== */
html.castle .top{background:linear-gradient(#22265c,#15183c); backdrop-filter:none; -webkit-backdrop-filter:none;
  border-right:3px solid var(--gold3); box-shadow:8px 0 30px rgba(0,0,0,.5); color:#e3e5f7}
html.castle .brand{color:var(--gold2); font-size:20px; text-shadow:0 2px 0 var(--gold4)}
html.castle .brand-mark{background:radial-gradient(circle at 35% 35%,#f3dcff,var(--gem) 45%,var(--gem2)); border:2px solid var(--gold3);
  transform:rotate(45deg); border-radius:6px; box-shadow:0 0 12px var(--gem); color:transparent}
html.castle .dept-btn{color:#a3a8dc}
html.castle .dept-btn:hover,html.castle .tab:hover{background:rgba(255,255,255,.08); color:#fff}
html.castle .dept-btn.on{background:linear-gradient(var(--gold1),var(--gold2)); color:var(--gold4); box-shadow:inset 0 -3px 0 var(--gold3)}
html.castle .tabs{border-top-color:rgba(255,255,255,.12)}
html.castle .tab{color:#dfe1f5}
html.castle .tab.on{background:linear-gradient(var(--gold1),var(--gold2)); color:var(--gold4); box-shadow:inset 0 -3px 0 var(--gold3)}
html.castle .tab.tabgrp{color:#a3a8dc}
html.castle .tab.tabsub::before{color:#a3a8dc}
html.castle .tab.always{border-top-color:rgba(255,255,255,.12)}
html.castle .navver{color:#a3a8dc}
/* 左メニューの木（nav.js の nv-）。紺の地で読める色に */
html.castle .nv-head,html.castle .nv-leaf{color:#dfe1f5}
html.castle .nv-head.d0,html.castle .nv-leaf.d0{color:#fff}
html.castle .nv-head.d1{color:#c9cdf5}
html.castle .nv-head:hover,html.castle .nv-leaf:hover{background:rgba(255,255,255,.1); color:#fff}
html.castle .nv-grp.here > .nv-head{color:var(--gold2)}
html.castle .nv-leaf.on{background:linear-gradient(var(--gold1),var(--gold2)); color:var(--gold4); box-shadow:inset 0 -3px 0 var(--gold3)}
html.castle .nv-head:focus-visible,html.castle .nv-leaf:focus-visible{outline-color:var(--gold2)}
html.castle .navcnt.done{background:rgba(155,227,106,.2); color:#bff0a0}
html.castle .navcnt.late{background:rgba(239,106,90,.25); color:#ffc2b8}
html.castle .tab.on .navcnt,html.castle .nv-leaf.on .navcnt{background:rgba(122,79,18,.18); color:var(--gold4)}
html.castle .navfoot{border-top-color:rgba(255,255,255,.12)}
html.castle .navfoot a{color:#c9cdf5}
html.castle .navfoot a:hover{background:rgba(255,255,255,.1); color:#fff}
html.castle .navfoot a.on{background:var(--gold2); color:var(--gold4)}

/* ===== 見出し: 赤いリボンの札 ===== */
html.castle .head{margin-top:28px}
html.castle .h1{position:relative; display:inline-block; z-index:0; font-family:var(--disp); font-size:26px; font-weight:700;
  letter-spacing:0; color:#fff; padding:6px 30px 9px; background:linear-gradient(var(--red1),var(--red2));
  text-shadow:0 2px 0 var(--red3); box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--red3); border-radius:4px}
html.castle .h1::before,html.castle .h1::after{content:''; position:absolute; top:9px; width:24px; height:100%; background:var(--red3); z-index:-1}
html.castle .h1::before{left:-18px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,34% 50%)}
html.castle .h1::after{right:-18px; clip-path:polygon(0 0,100% 0,66% 50%,100% 100%,0 100%)}
html.castle .h1 b{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff}
html.castle .h1sub{color:#e9e4ff; text-shadow:0 1px 4px rgba(0,0,0,.8); margin-top:12px; font-weight:700}
html.castle .ms-today{background:linear-gradient(#2a2e6c,#1a1d48); border:2px solid var(--gold3); border-radius:999px; padding:4px 20px;
  box-shadow:0 6px 16px rgba(0,0,0,.5); align-items:center}
html.castle .ms-today small{color:#c9cdf5}
html.castle .ms-today b{color:var(--gold2); font-family:var(--disp)}
html.castle .ms-today b span{color:#dfe1f5}

/* ===== 枠: 金の装飾＋四隅の宝石 ===== */
html.castle .panel{position:relative; backdrop-filter:none; -webkit-backdrop-filter:none;
  background:radial-gradient(120% 100% at 50% 0%,#fff8e6,#f6e7c1); border:3px solid var(--gold3); border-radius:18px;
  box-shadow:0 0 0 2px var(--gold4),0 0 0 6px var(--gold2),0 0 0 8px var(--gold4),var(--sh-1),inset 0 0 0 2px #fffbe8, inset 0 0 22px rgba(217,180,106,.35);
  margin:8px}
html.castle .panel::before,html.castle .panel::after{content:''; position:absolute; top:-12px; width:16px; height:16px; transform:rotate(45deg);
  background:radial-gradient(circle at 35% 35%,#f3dcff,var(--gem) 45%,var(--gem2)); border:2px solid var(--gold4); box-shadow:0 0 8px var(--gem); z-index:2; pointer-events:none}
html.castle .panel::before{left:-12px} html.castle .panel::after{right:-12px}
html.castle .ptitle{display:inline-block; font-family:var(--disp); font-size:15px; color:var(--gold4); padding:2px 16px 4px;
  background:linear-gradient(var(--gold1),var(--gold2) 55%,var(--gold3)); border-radius:4px; box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 var(--gold4)}
html.castle .pnote{color:var(--ink2)}
html.castle .empty{color:var(--ink2)}

/* ===== ボタン: 立体の金 ===== */
html.castle .btn{font-family:var(--sans); font-weight:800; font-size:14px; color:var(--gold4); border:3px solid var(--gold4); border-radius:16px;
  background:linear-gradient(var(--gold1),var(--gold2) 50%,var(--gold3)); text-shadow:0 1px 0 var(--gold1);
  box-shadow:inset 0 3px 0 #fffbe0,inset 0 -5px 0 #b07a1c,0 5px 0 #4a2e06,0 0 16px rgba(242,194,78,.4); transition:transform .06s}
html.castle .btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:inset 0 3px 0 #fffbe0,inset 0 -5px 0 #b07a1c,0 6px 0 #4a2e06,0 0 22px rgba(242,194,78,.6)}
html.castle .btn:active:not(:disabled){transform:translateY(4px); box-shadow:inset 0 3px 0 #fffbe0,inset 0 -3px 0 #b07a1c,0 1px 0 #4a2e06}
html.castle .btn-o{background:#fffaf0; color:var(--ink); border:2px solid var(--gold3); text-shadow:none; box-shadow:0 3px 0 var(--gold3)}
html.castle .btn-o:hover:not(:disabled){background:#fff1cf; color:var(--ink); box-shadow:0 3px 0 var(--gold3)}
html.castle .btn-sm{font-size:12.5px; padding:6px 14px; border-radius:12px}
html.castle .btn-danger{background:#fffaf0; color:var(--red2); border:2px solid var(--red2); box-shadow:0 3px 0 var(--red2); text-shadow:none}

/* ===== 手順の帯（steps.js の .wiz）: 羊皮紙の帯に金の札。いまの手順は金 ===== */
html.castle .wiz{background:radial-gradient(120% 100% at 50% 0%,#fff8e6,#f6e7c1); border:3px solid var(--gold3);
  box-shadow:0 0 0 2px var(--gold4),var(--sh-1); border-radius:16px}
html.castle .wiz-i{color:var(--ink2)}
html.castle .wiz-i:hover:not(:disabled){background:#fff1cf; color:var(--ink)}
html.castle .wiz-i.on{background:linear-gradient(var(--gold1),var(--gold2) 55%,var(--gold3)); color:var(--gold4); box-shadow:inset 0 2px 0 #fffbe0,0 3px 0 var(--gold4)}
html.castle .wiz-i.on .wiz-t{color:var(--gold4)}
html.castle .wiz-i.on .wiz-d{color:var(--gold4); opacity:.85}
html.castle .wiz-n{background:#fffaf0; color:var(--ink2); border-color:var(--gold3)}
html.castle .wiz-i.on .wiz-n{background:#fffaf0; color:var(--gold4); border-color:var(--gold4)}
html.castle .wiz-i.done .wiz-n{background:var(--grn2); color:#fff; border-color:var(--grn3)}
html.castle .wiz-t{color:var(--ink)}
html.castle .wiz-d{color:var(--ink2)}
html.castle .wiz-note,html.castle .wiz-lock{color:#f1eeff; text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* ===== 入力・表・そのほか ===== */
html.castle .inp,html.castle .sel{background:#fffdf6; border-color:var(--line)}
html.castle .inp:focus,html.castle .sel:focus{border-color:var(--gold3); box-shadow:0 0 0 3px var(--v1-bg)}
html.castle .row:hover{background:#fff3d6; box-shadow:none}
/* 枠が太くなったぶん、狭い画面では表を枠の中で横に送る（枠の外にはみ出さない） */
html.castle .panel .rows{overflow-x:auto}
html.castle .toast{background:#fffaf0; color:var(--ink); border:3px solid var(--gold3); box-shadow:var(--sh-2); font-weight:700}
html.castle .toast.err{background:#fdece8; color:var(--red2); border-color:var(--red2)}
html.castle .hint{background:#fffaf0}
html.castle .ms-dept{background:#fffaf0; border:2px solid var(--gold3); color:var(--ink); box-shadow:0 3px 0 var(--gold3)}
html.castle .ms-dept:hover{background:#fff1cf; color:var(--ink)}
html.castle .ms-dept[aria-pressed="true"]{background:linear-gradient(var(--gold1),var(--gold2)); color:var(--gold4); border-color:var(--gold4); box-shadow:0 3px 0 var(--gold4)}
html.castle .ms-dept small.late{color:var(--red2)}
html.castle .ms-dept[aria-pressed="true"] small.late{color:var(--red3)}
html.castle a{color:var(--v1-ink)}
html.castle .hm-board > summary,html.castle .hm-foot{color:#f1eeff}
/* 絵の上に直に乗る文は、暗い札に載せて読めるようにする（昼の明るい空でも） */
html.castle .hm-foot{display:inline-block; background:rgba(20,23,57,.82); border:1px solid rgba(242,194,78,.45); border-radius:12px; padding:6px 14px; margin:8px 12px}
html.castle .h1sub{display:inline-block; background:rgba(20,23,57,.72); border-radius:999px; padding:2px 12px}
html.castle .h1sub[hidden]{display:none}
html.castle .hm-foot a{color:var(--gold2)}
html.castle .hm-board > summary{border-color:rgba(242,194,78,.5); background:rgba(20,23,57,.55)}

/* ===== 絵の世界（castle.js が body の先頭に置く） ===== */
.cw{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--night2)}
.cw-world{position:absolute; inset:0; background:url('/img/castle-garden.jpg') 62% 8% / cover no-repeat;
  transform-origin:63% 38%; transition:transform 1.6s cubic-bezier(.45,0,.2,1)}
.cw-tint,.cw-glow{position:absolute; inset:0; transition:background-color 2s,opacity 2s;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 64%); mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 64%)}
.cw-stars{position:absolute; inset:0 0 50% 0; transition:opacity 2s}
.cw-star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; animation:cwTw var(--t) ease-in-out infinite alternate}
@keyframes cwTw{from{opacity:.15}to{opacity:.9}}
.cw-fly{position:absolute; width:6px; height:6px; border-radius:50%; background:#fffbe0; box-shadow:0 0 8px 3px var(--gold2,#f2c24e);
  animation:cwDrift var(--t) ease-in-out infinite alternate}
@keyframes cwDrift{0%{transform:translate(0,0);opacity:.2}50%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:.3}}
/* 左メニューの右側と、文字の周りを少し暗くして読みやすく */
.cw-shade{position:absolute; inset:0; background:radial-gradient(95% 80% at 63% 38%,transparent 40%,rgba(13,15,43,.55))}

/* ===== クリアの画面 ===== */
.cw-win{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,rgba(26,29,72,.7),rgba(11,12,34,.93));
  animation:cwFade .25s}
@keyframes cwFade{from{opacity:0}}
.cw-win .box{position:relative; width:min(480px,92vw); text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.cw-stars3{display:flex; gap:6px; align-items:flex-end; margin-bottom:-6px}
.cw-stars3 svg{width:70px; height:70px; filter:drop-shadow(0 0 14px #f2c24e); animation:cwStar .45s cubic-bezier(.2,1.8,.4,1) both}
.cw-stars3 svg:nth-child(2){width:92px; height:92px; animation-delay:.25s}
.cw-stars3 svg:nth-child(3){animation-delay:.5s}
@keyframes cwStar{from{transform:scale(0) rotate(-120deg); opacity:0}}
.cw-ribbon{position:relative; display:inline-block; z-index:0; font-family:'Kaisei Decol',serif; font-size:32px; color:#fff; padding:10px 40px 12px;
  background:linear-gradient(#ef6a5a,#b8372b); text-shadow:0 2px 0 #7a1f17; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #7a1f17; border-radius:4px}
.cw-ribbon::before,.cw-ribbon::after{content:''; position:absolute; top:10px; width:26px; height:100%; background:#7a1f17; z-index:-1}
.cw-ribbon::before{left:-20px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,34% 50%)}
.cw-ribbon::after{right:-20px; clip-path:polygon(0 0,100% 0,66% 50%,100% 100%,0 100%)}
.cw-list{width:100%; background:rgba(13,15,43,.85); border:2px solid #c8902c; border-radius:16px; padding:12px 18px; color:#fff;
  display:flex; flex-direction:column; gap:6px; font-family:'M PLUS Rounded 1c',sans-serif}
.cw-list div{display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:800}
.cw-list b{color:#f2c24e; font-size:19px; white-space:nowrap}
.cw-go{min-height:54px; min-width:280px; padding:10px 24px; border:3px solid #2c6e1f; border-radius:18px; cursor:pointer;
  font:800 17px 'M PLUS Rounded 1c',sans-serif; color:#fff; background:linear-gradient(#9be36a,#4fb33a); text-shadow:0 2px 0 #2c6e1f;
  box-shadow:inset 0 3px 0 #e6ffd0,inset 0 -5px 0 #3b8a2a,0 5px 0 #1a4512}
.cw-go:active{transform:translateY(4px)}
.cw-go:focus-visible{outline:3px solid #f2c24e; outline-offset:3px}
.cw-spark{position:absolute; width:8px; height:8px; border-radius:50%; background:#fffbe8; box-shadow:0 0 10px 4px #f2c24e;
  animation:cwSpark 1.6s ease-out both; pointer-events:none}
@keyframes cwSpark{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}

/* ===== ホーム: 今月の作業のカード ===== */
.cw-stages{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; margin:8px 8px 20px}
.cw-card{position:relative; border-radius:14px; padding:10px 8px 12px; text-decoration:none; color:var(--ink);
  background:radial-gradient(120% 100% at 50% 0%,#fff8e6,#f6e7c1); border:3px solid var(--gold3);
  box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 0 0 2px #fff8e6; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:132px}
.cw-card .no{font-family:'Kaisei Decol',serif; font-size:13px; color:#fff; background:linear-gradient(#ef6a5a,#b8372b); border-radius:999px; padding:0 10px; box-shadow:0 2px 0 #7a1f17}
.cw-card .nm{font-size:12.5px; font-weight:800; text-align:center; line-height:1.4; word-break:break-all}
.cw-card .gl{font-size:11px; color:var(--ink2); margin-top:auto; text-align:center}
.cw-card .gl.late{color:#b8372b; font-weight:800}
.cw-card.done{background:linear-gradient(#efe4c4,#e2d2a6); border-color:#b9a06a}
.cw-card.done .nm,.cw-card.done .gl{color:#8a7650}
.cw-card .stamp{position:absolute; right:6px; bottom:6px; width:44px; height:44px; border-radius:50%; border:3px solid #b8372b; color:#b8372b;
  display:grid; place-items:center; font-family:'Kaisei Decol',serif; font-size:19px; transform:rotate(-14deg); background:rgba(255,248,230,.8)}
.cw-card.now{transform:translateY(-6px); border-color:#f2c24e; box-shadow:0 0 0 3px #fff1b8,0 0 26px #f2c24e,0 10px 20px rgba(0,0,0,.6)}
.cw-card.now::after{content:'対応中'; position:absolute; left:50%; top:-13px; transform:translateX(-50%); font-size:11px; font-weight:800;
  background:#f2c24e; color:#7a4f12; border-radius:999px; padding:0 8px; white-space:nowrap; border:2px solid #7a4f12}
.cw-stages-h{margin:4px 12px 0; font-family:'Kaisei Decol',serif; color:#f2c24e; font-size:16px; text-shadow:0 2px 6px rgba(0,0,0,.8)}
/* ホームのいまの作業の札 */
html.castle .hm-now{padding:34px 28px 26px; margin-top:30px}
html.castle .hm-now .cw-quest{position:absolute; left:50%; top:-20px; transform:translateX(-50%); z-index:3; white-space:nowrap; font-size:18px; padding:5px 24px 7px}
html.castle .hm-now h2{font-family:var(--disp); font-size:28px}
html.castle .hm-now .hm-where .late{color:var(--red2)}
html.castle .hm-now .btn{font-size:16px; padding:14px 26px}
html.castle .hm-cell.ok{background:rgba(79,179,58,.18); color:var(--grn3)}
html.castle .hm-cell.late{background:#fdece8; color:var(--red2)}

/* ===== 部署の動物（castle.js の Castle.mascot） ===== */
.cw-mascot{display:flex; flex-direction:column; align-items:center; gap:4px}
.cw-imgs{display:flex; align-items:flex-end; justify-content:center}
.cw-imgs img{width:130px; height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.cw-mascot.many .cw-imgs img{width:96px; margin:0 -10px}
.cw-mascot.cw-sm .cw-imgs img{width:96px}
.cw-mascot.cw-sm.many .cw-imgs img{width:70px}
.cw-mascot.cw-lg .cw-imgs img{width:170px; animation:cwHop .6s ease-out 2}
.cw-mascot.cw-lg.many .cw-imgs img{width:130px}
@keyframes cwHop{40%{transform:translateY(-22px) rotate(-4deg)}}
.cw-say{position:relative; max-width:220px; background:#fffdf5; color:#3a2a14; border:3px solid #c8902c; border-radius:18px; padding:6px 14px;
  font:800 13px/1.5 'M PLUS Rounded 1c',sans-serif; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.25)}
.cw-say::after{content:''; position:absolute; left:50%; bottom:-11px; margin-left:-8px; border:8px solid transparent; border-bottom:0; border-top:10px solid #c8902c}
/* ホームのいまの作業: 札の右上に、部署の動物と吹き出し */
html.castle .hm-now{padding-right:200px; min-height:300px}
html.castle .hm-now > .cw-mascot{position:absolute; right:18px; top:30px; width:180px}
html.castle .hm-empty-mascot{display:flex; flex-direction:column; align-items:center; gap:10px}
/* ホーム: 部署の切り替えのすぐ下を空けて、お城を見せる（2026-10-28 高橋さん「お城見えてていい。下に項目」） */
html.castle .cw-vista{height:clamp(170px,44vh,440px)}

/* ===== 動き: 動物は息をするように上下し、ときどき跳ねる ===== */
.cw-imgs img{transform-origin:50% 100%; animation:cwIdle 3.4s ease-in-out infinite}
.cw-imgs img:nth-child(2){animation-delay:-1.1s} .cw-imgs img:nth-child(3){animation-delay:-2.2s}
@keyframes cwIdle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4px) scale(.985,1.02)}}
.cw-mascot.cw-lg .cw-imgs img{animation:cwHop .6s ease-out 2}
.cw-say,.cw-gsay{animation:cwPop .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cwPop{from{transform:scale(.6); opacity:0}}

/* ===== 案内役（castle.js の mountGuide） ===== */
/* 手順の帯の右端に立つ。帯から頭が少し出る */
.cw-guide-row{display:flex; align-items:flex-end; gap:4px}
.cw-guide-row > .wiz{flex:1; min-width:0}
.cw-guide{flex:none; display:flex; align-items:center; gap:2px; margin:-46px 2px 0 0; position:relative; z-index:4}
.cw-guide .cw-imgs{cursor:default}
.cw-guide .cw-imgs img{width:92px}
.cw-guide .cw-mascot.many .cw-imgs img{width:64px}
.cw-gsay{position:relative; display:flex; flex-direction:column; gap:2px; width:max-content; max-width:250px; background:#fffdf5; color:#3a2a14;
  border:3px solid #c8902c; border-radius:16px; padding:7px 13px; font:700 12.5px/1.55 'M PLUS Rounded 1c',sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.3); margin-right:8px}
.cw-gsay b{font-weight:800; font-size:13px; color:#7a4f12}
.cw-gsay::after{content:''; position:absolute; right:-12px; top:50%; margin-top:-8px; border:8px solid transparent; border-right:0; border-left:11px solid #c8902c}
.cw-gsay[hidden]{display:none}
.cw-guide.pop .cw-imgs img{animation:cwHop .6s ease-out 1}
.cw-guide.pop .cw-gsay{animation:cwPop .35s cubic-bezier(.2,1.6,.4,1) both}
/* 帯が無い画面は見出しの右 */
.head:has(> .cw-guide){flex-wrap:nowrap}
.head:has(> .cw-guide) > div:first-child{flex:1; min-width:0}
.head > .cw-guide{margin:0 0 -8px}
@media (max-width:1100px){
  .cw-guide-row{flex-direction:column-reverse; align-items:stretch}
  .cw-guide-row > .cw-guide{align-self:flex-end; margin:0 8px -14px 0}
}

@media (prefers-reduced-motion:reduce){
  .cw-imgs img,.cw-mascot.cw-lg .cw-imgs img,.cw-guide.pop .cw-imgs img{animation:none!important}
  .cw-say,.cw-gsay{animation:none!important}
  .cw-world{transition:none}
  .cw-star,.cw-fly,.cw-win,.cw-stars3 svg,.cw-spark{animation:none!important}
}
@media (max-width:600px){
  html.castle .h1{font-size:20px; padding:5px 22px 7px}
  html.castle .hm-now h2{font-size:22px}
  .cw-stages{grid-template-columns:repeat(2,1fr)}
  html.castle .hm-now{padding-right:18px; min-height:0}
  html.castle .hm-now > .cw-mascot{position:static; width:auto; margin:4px 0 8px}
  html.castle .cw-vista{height:110px}
  .head > .cw-guide{display:none}
  .cw-gsay{max-width:200px}
}

/* ログイン画面（2026-10-26）。左のメニューが無いので、BOS の名前は絵の上に白で置く */
html.castle .gate{position:relative; z-index:1}
html.castle .gate .brand{color:#fff3d6; text-shadow:0 2px 6px rgba(0,0,0,.8)}

/* ===== ほかの画面（2026-10-26 全画面に展開） =====
   枠の外で絵の上に直に乗る文は、暗い札に載せて白い文字にする */
html.castle .head .pnote,html.castle .ms-period b{color:#f1eeff; text-shadow:0 1px 4px rgba(0,0,0,.85)}
html.castle .sumline,html.castle .srcline,html.castle .toolline,html.castle .step-h,html.castle .ms-foot,html.castle .dept-h{
  background:rgba(20,23,57,.8); border:1px solid rgba(242,194,78,.4); border-radius:12px; padding:6px 14px; color:#f1eeff}
html.castle .sumline *,html.castle .srcline *,html.castle .toolline *,html.castle .step-h *,html.castle .ms-foot *,html.castle .dept-h *{color:inherit}
html.castle .sumline a,html.castle .srcline a,html.castle .toolline a,html.castle .step-h a,html.castle .ms-foot a,html.castle .dept-h a,
html.castle .h1sub a{color:var(--gold2)}
html.castle .ms-foot .btn,html.castle .toolline .btn,html.castle .dept-h .btn{color:var(--gold4)}
/* 切り替えのタブ・選んだ札は金 */
html.castle .rtab{background:#fffaf0; color:var(--ink); border:2px solid var(--gold3)}
html.castle .rtab .rcount{color:var(--ink2)}
html.castle .rtab.on,html.castle .chip.on,html.castle #setNav .on{background:linear-gradient(var(--gold1),var(--gold2)); color:var(--gold4); border-color:var(--gold4)}
html.castle .rtab.on .rcount{color:var(--gold4)}
html.castle .wiz-i.done .wiz-n{background:var(--grn3)}
/* 業務委託の画面の見出し（.page-title / .page-lead）を、ほかの画面の見出しと同じリボンに */
html.castle .page-title{display:inline-block; position:relative; font-family:var(--disp); color:#fff; padding:6px 30px 9px; margin-top:28px;
  background:linear-gradient(var(--red1),var(--red2)); text-shadow:0 2px 0 var(--red3); box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--red3); border-radius:4px}
html.castle .page-title .accent{color:#fff; background:none; -webkit-text-fill-color:#fff}
html.castle .page-lead{display:inline-block; color:#f1eeff; background:rgba(20,23,57,.75); border-radius:999px; padding:2px 12px; text-shadow:none}
html.castle .page-lead a{color:var(--gold2)}
/* 手順書の本文は羊皮紙の紙に載せる */
html.castle .wrap.doc #view:not(:empty),html.castle .wrap.doc #editor{background:radial-gradient(120% 100% at 50% 0%,#fff8e6,#f6e7c1);
  border:3px solid var(--gold3); border-radius:18px; box-shadow:0 0 0 2px var(--gold4),var(--sh-1); padding:20px 28px 28px; margin-top:16px}
/* 一覧の中の文字リンク（編集など）は、金だと白い地で薄いので濃い金に */
html.castle .lnk{color:var(--v1-ink)}