/* 道具の画面の絵（2026-10-06 卓馬「CSSやHTMLだけで難しいなら画像生成をして、全体のクリエイティブのレベルを上げる」）。
絵は GPT Image 2.5（sunburst）で作り、文字は入れていない（文字はHTMLで載せる＝崩れない・直せる）。
分け方は docs/DESIGN-GOOGLE.md のとおり：
・部屋の帯／はじめての案内／お祝い＝世界観（紺と金・ドラクエ風のギルド）
・空の状態の小さな絵＝道具（Google風の平らな絵）
CSP で style 属性が使えないので、絵はすべてこのファイルのクラスで付ける。全ページの最後に読む */
/* ── 部屋の帯（キュロ・バルドの部屋のページ） ─────────────────── */
.room-banner{position:relative;display:flex;align-items:center;gap:18px;min-height:132px;padding:18px 24px;margin:0 0 18px;
border-radius:18px;overflow:hidden;color:#fff;border:1px solid #b99858;box-shadow:0 6px 18px #0c182b2e;
background-color:#0c182b;background-repeat:no-repeat;background-size:cover,cover;background-position:0 0,right 0 center;box-sizing:border-box}
.room-banner.room-seo{background-image:linear-gradient(90deg,#0c182bf5 0%,#0c182bd9 34%,#0c182b59 68%,#0c182b0d 100%),url('/art/room-seo.webp');background-position:0 0,70% 62%}
.room-banner.room-youtube{background-image:linear-gradient(90deg,#1a0f08f5 0%,#1a0f08d9 34%,#1a0f0859 68%,#1a0f080d 100%),url('/art/room-youtube.webp');background-position:0 0,80% 40%}
.room-portrait{flex:0 0 auto;width:84px;height:84px;border-radius:18px;border:2px solid #f0d798;box-shadow:0 4px 14px #0008;
background-size:150%;background-repeat:no-repeat;background-position:50% 40%}
.room-portrait-seo{background-image:url('/art/pop-seo.webp')}
.room-portrait-youtube{background-image:url('/art/pop-youtube.webp')}
.room-banner-text{display:grid;gap:4px;min-width:0;text-shadow:0 1px 6px #000a}
.room-banner-text small{color:#f0d798;font-size:12px;letter-spacing:.14em;font-weight:700}
.room-banner-text strong{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:.02em}
.room-banner-text span{color:#e3e9f2;font-size:13px;line-height:1.6}
/* 帯に名前を出したので、上の小さな案内（キュロ ｜ SEO・AI検索 など）は重ねて出さない */
.room-banner ~ .topbar .eyebrow{display:none}
@media(max-width:600px){
.room-banner{min-height:104px;padding:14px 14px;gap:12px;border-radius:14px;margin-bottom:14px}
.room-banner.room-seo,.room-banner.room-youtube{background-position:0 0,62% 55%}
.room-portrait{width:60px;height:60px;border-radius:14px}
.room-banner-text strong{font-size:19px}
.room-banner-text span{font-size:12px}
}
/* ── 部屋の帯（ダイアログの上：ゼノの広告レポート・プルムの部屋） ─────── */
.room-bar{background-color:#0c182b;background-repeat:no-repeat;background-size:cover,cover;color:#fff}
.adr-dialog-bar.room-bar{border-bottom:1px solid #b99858;padding:14px 18px;min-height:72px;box-sizing:border-box;
background-image:linear-gradient(90deg,#160a0cf7 0%,#160a0ce0 40%,#160a0c80 75%,#160a0c33 100%),url('/art/room-ads.webp');background-position:0 0,70% 62%}
.adr-dialog-bar.room-bar .adr-who{align-items:center}
.adr-dialog-bar.room-bar .adr-who strong{color:#fff;font-size:18px;text-shadow:0 1px 5px #000a}
.adr-dialog-bar.room-bar .adr-who span{color:#f0d798}
.room-face{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:2px solid #f0d798;background:#1f1f1f center/cover no-repeat;box-shadow:0 3px 10px #0007}
.room-face-ads{background-image:url('/art/pop-ad-operation.webp');background-size:150%;background-position:50% 40%}
.adr-dialog-bar.room-bar .adr-btn{background:#fffffff2;border-color:#ffffff;color:#1f1f1f}
.adr-dialog-bar.room-bar .adr-btn:hover{background:#fff}
@media(max-width:600px){.adr-dialog-bar.room-bar{padding:10px 12px}.adr-dialog-bar.room-bar .adr-who{flex-wrap:nowrap}.room-face{width:36px;height:36px;border-radius:10px}}
.lp-hub-head.room-bar{padding:18px 20px;border-radius:18px;border:1px solid #b99858;box-shadow:0 6px 18px #0c182b2e;
background-image:linear-gradient(90deg,#08160ff5 0%,#08160fd9 42%,#08160f66 75%,#08160f1a 100%),url('/art/room-lp.webp');background-position:0 0,85% 45%}
.lp-hub-head.room-bar h2{color:#fff;text-shadow:0 1px 6px #000a}
.lp-hub-head.room-bar p{color:#e3e9f2;text-shadow:0 1px 4px #0009}
.lp-hub-head.room-bar p:first-child{color:#f0d798}
.lp-hub-head.room-bar .lp-hub-art{border:2px solid #f0d798;box-shadow:0 4px 14px #0008}
.lp-hub-head.room-bar .lp-hub-close{background:#fffffff2;color:#1f1f1f;border-color:#fff}
@media(max-width:700px){.lp-hub-head.room-bar{padding:14px}}
/* ── はじめての案内（ログイン直後のダイアログ） ─────────────────── */
.onboarding-intro{overflow:hidden;padding:0 0 18px;gap:14px}
.onb-hero{position:relative;height:200px;display:flex;align-items:flex-end;padding:18px 22px;box-sizing:border-box;
background-color:#0c182b;background-image:linear-gradient(180deg,#0c182b00 30%,#0c182bd9 100%),url('/art/onboarding-guild.webp');
background-size:cover,cover;background-position:0 0,center 62%;background-repeat:no-repeat;border-bottom:2px solid #b99858}
.onboarding-intro .onb-hero strong{color:#fff;font-size:21px;line-height:1.4;text-shadow:0 2px 8px #000c}
.onboarding-intro ol{list-style:none;padding:0 18px;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:onb}
.onboarding-intro li{counter-increment:onb;position:relative;background:#fff;border:1px solid #d3e3fd;border-radius:14px;padding:16px 14px 14px 58px;min-height:92px;box-sizing:border-box}
.onboarding-intro li::before{content:counter(onb);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;font-weight:800;font-size:15px;color:#3b2a06;background:radial-gradient(circle at 35% 30%,#fff1c2,#e2b54e 70%,#a87d22);box-shadow:0 2px 5px #8a651f55}
.onboarding-intro li b{font-size:14.5px;margin-bottom:6px;color:#1f1f1f}
.onboarding-intro li span{display:block;line-height:1.65}
.onboarding-intro .onboarding-start{margin:2px 18px 0;padding:12px 26px;font-size:16px;box-shadow:0 3px 10px #0b57d040}
.onboarding-dialog h2.onb-sub{font-size:18px;font-weight:500;margin:22px 0 6px;color:#1f1f1f}
@media(max-width:700px){
.onb-hero{height:140px;padding:14px 16px}
.onboarding-intro .onb-hero strong{font-size:17px}
.onboarding-intro ol{grid-template-columns:1fr;padding:0 14px;gap:8px}
.onboarding-intro li{min-height:0;padding:12px 12px 12px 54px}
.onboarding-intro .onboarding-start{margin:2px 14px 0;justify-self:stretch}
}
/* ── 空の状態の小さな絵（道具の側：Google風） ─────────────────── */
.spot{width:120px;height:120px;background:center/contain no-repeat;flex:0 0 auto}
.spot-seo{background-image:url('/art/spot-seo.webp')}
.spot-youtube{background-image:url('/art/spot-youtube.webp')}
.spot-ads{background-image:url('/art/spot-ads.webp')}
.spot-lp{background-image:url('/art/spot-lp.webp')}
/* お祝い（世界観の側）：準備が終わった・やることが全部消えた */
.art-celebrate{width:112px;height:112px;border-radius:16px;border:2px solid #e2b54e;background:#0c182b url('/art/celebrate.webp') center/cover no-repeat;box-shadow:0 4px 14px #8a651f40;flex:0 0 auto}
.spot.art-celebrate{width:96px;height:96px}
/* キュロ：今日やることが空 */
.cempty .spot{width:110px;height:110px;margin:2px 0 8px}
/* キュロ：初期設定の最後の段 */
.wiz-celebrate{display:flex;align-items:center;gap:18px;padding:16px 18px;margin:0 0 16px;border-radius:16px;background:linear-gradient(90deg,#fff8e1,#fffdf6);border:1px solid #f0d798}
.wiz-celebrate strong{display:block;font-size:17px;color:#3b2a06;margin-bottom:4px}
.wiz-celebrate p{margin:0;font-size:13px;line-height:1.7}
@media(max-width:600px){.wiz-celebrate{gap:12px;padding:12px}.wiz-celebrate .art-celebrate{width:76px;height:76px}}
/* バルド：最初の画面 */
.welcome .spot-youtube{float:right;width:150px;height:150px;margin:-4px 0 8px 18px}
@media(max-width:600px){.welcome .spot-youtube{width:96px;height:96px;margin:0 0 6px 10px}}
/* ゼノ：事業がまだ無いとき */
.adr-empty-card .spot-ads{width:132px;height:132px;float:right;margin:0 0 8px 18px}
@media(max-width:600px){.adr-empty-card .spot-ads{width:92px;height:92px;margin-left:10px}}
/* プルム：作ったLPがまだ無いとき */
.lp-hub-empty{display:flex;align-items:center;gap:16px;padding:16px;border:1px dashed #c4c7c5;border-radius:14px;background:#fff}
.lp-hub-empty .spot{width:96px;height:96px}
.lp-hub-empty p{margin:0;color:#444746;font-size:14px;line-height:1.7}
/* ── AIエージェントの帯（共通部品 agent-header.js） ─────────────────
2026-10-07 卓馬「広告のAIの画面の上の、押した時に出てくる画面のヘッダー部分のデザインを全AIエージェントに反映」。
手本はゼノの広告レポートの帯（上の .adr-dialog-bar.room-bar）。部屋の絵＋顔＋名前＋役割の1行＋右に白いボタン。
帯の左は暗く塗って文字を読ませ、右に部屋の絵を見せる。位置合わせ（ダイアログの余白を打ち消す）は agent-header.js が測って行う */
.agent-hdr{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px 14px;flex-wrap:nowrap;
min-height:72px;padding:14px 18px;margin-bottom:16px;box-sizing:border-box;border-bottom:1px solid #b99858;border-radius:0;
background-color:#0c182b;background-repeat:no-repeat;background-size:cover,cover;color:#fff;text-align:left}
.agent-hdr-who{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.agent-hdr-text{display:grid;gap:2px;min-width:0}
.agent-hdr .agent-hdr-name{color:#fff;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 5px #000a;white-space:nowrap}
.agent-hdr .agent-hdr-line{margin:0;padding:0;font-size:12.5px;line-height:1.5;font-weight:500;color:#f0d798;text-shadow:0 1px 4px #0009;letter-spacing:.01em;border:0;background:none}
.agent-hdr .agent-hdr-job{white-space:nowrap}
.agent-hdr .agent-hdr-what:not(:empty)::before{content:' ・ ';color:#f0d798}
.agent-hdr .agent-hdr-what{color:#e3e9f2}
.agent-hdr-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:wrap;margin-left:auto;min-width:0}
.agent-hdr-actions:empty{display:none}
.agent-hdr .agent-hdr-btn,.agent-hdr .agent-hdr-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;margin:0;position:static;
border-radius:999px;border:1px solid #fff;background:#fffffff2;color:#1f1f1f;font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:0 1px 4px #0004;text-decoration:none;width:auto;flex:0 0 auto;transform:none}
.agent-hdr .agent-hdr-btn:hover,.agent-hdr .agent-hdr-actions button:hover{background:#fff;color:#1f1f1f}
.agent-hdr .agent-hdr-actions button:disabled{opacity:.6;cursor:default}
.agent-hdr .agent-hdr-actions [hidden]{display:none}
.agent-hdr .agent-hdr-actions button:focus-visible{outline:2px solid #f0d798;outline-offset:2px}
/* 顔：手本（ゼノ）と同じ 44px の角丸・金の縁 */
.agent-face{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:2px solid #f0d798;box-shadow:0 3px 10px #0007;box-sizing:border-box;
background:#1f1f1f center/cover no-repeat}
/* 顔は3Dオフィスのリグと同じポップなキャラ（2026-10-09 卓馬「ドラクエ風のポップなキャラに統一・写実のキャラは出さない」）。
art/pop-*.webp は office-3d.js の立ち絵を、GPT Image でデザインを変えずに描き直したもの（2026-10-21）。カードの立ち絵（syncPortraits）も同じ絵を出す。
全身の絵なので、小さな顔の枠では少し寄せて頭が見えるようにする */
.agent-face:not(.agent-face-finance):not(.agent-face-coo){background-size:150%;background-position:50% 40%}
.agent-face-proposal{background-image:url('/art/pop-proposal.webp')}
.agent-face-content{background-image:url('/art/pop-content.webp')}
.agent-face-instagram{background-image:url('/art/pop-instagram.webp')}
.agent-face-seo{background-image:url('/art/pop-seo.webp')}
.agent-face-youtube{background-image:url('/art/pop-youtube.webp')}
.agent-face-operations{background-image:url('/art/pop-operations.webp')}
.agent-face-marketing_design{background-image:url('/art/pop-marketing-design.webp')}
.agent-face-ad_creative{background-image:url('/art/pop-ad-creative.webp')}
.agent-face-ad_operation{background-image:url('/art/pop-ad-operation.webp')}
.agent-face-rival_analysis{background-image:url('/art/pop-rival-analysis.webp')}
.agent-face-ad_google{background-image:url('/art/pop-ad-google.webp')}
.agent-face-ad_short{background-image:url('/art/pop-ad-short.webp')}
/* 社長AI・統括AI は紋章 */
.agent-face-finance,.agent-face-coo{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2a3f66,#0c182b);color:#f0d798;font-size:22px}
.agent-face b{font-weight:700}
/* 部屋ごとの絵と、左の塗りの色（左は文字が読める暗さ、右へ行くほど絵が見える） */
.agent-room-ads{background-image:linear-gradient(90deg,#160a0cf7 0%,#160a0ce0 40%,#160a0c80 75%,#160a0c33 100%),url('/art/room-ads.webp');background-position:0 0,70% 62%}
.agent-room-lp{background-image:linear-gradient(90deg,#08160ff5 0%,#08160fd9 42%,#08160f66 75%,#08160f1a 100%),url('/art/room-lp.webp');background-position:0 0,85% 45%}
.agent-room-seo{background-image:linear-gradient(90deg,#0c182bf5 0%,#0c182bd9 40%,#0c182b66 75%,#0c182b1a 100%),url('/art/room-seo.webp');background-position:0 0,70% 62%}
.agent-room-youtube{background-image:linear-gradient(90deg,#1a0f08f5 0%,#1a0f08d9 40%,#1a0f0866 75%,#1a0f081a 100%),url('/art/room-youtube.webp');background-position:0 0,80% 40%}
.agent-room-design{background-image:linear-gradient(90deg,#0a1430f5 0%,#0a1430d9 40%,#0a143066 75%,#0a14301a 100%),url('/art/room-design.webp');background-position:0 0,70% 55%}
.agent-room-creative{background-image:linear-gradient(90deg,#0b1a0df5 0%,#0b1a0dd9 40%,#0b1a0d66 75%,#0b1a0d1a 100%),url('/art/room-creative.webp');background-position:0 0,70% 50%}
.agent-room-proposal{background-image:linear-gradient(90deg,#0a1128f5 0%,#0a1128d9 40%,#0a112866 75%,#0a11281a 100%),url('/art/room-proposal.webp');background-position:0 0,70% 55%}
.agent-room-rival{background-image:linear-gradient(90deg,#1a1206f5 0%,#1a1206d9 40%,#1a120666 75%,#1a12061a 100%),url('/art/room-rival.webp');background-position:0 0,70% 55%}
.agent-room-instagram{background-image:linear-gradient(90deg,#1c0b1af5 0%,#1c0b1ad9 40%,#1c0b1a66 75%,#1c0b1a1a 100%),url('/art/room-instagram.webp');background-position:0 0,70% 45%}
.agent-room-adteam{background-image:linear-gradient(90deg,#0b1424f5 0%,#0b1424d9 40%,#0b142466 75%,#0b14241a 100%),url('/art/room-creative.webp');background-position:0 0,70% 50%}
.agent-room-operations{background-image:linear-gradient(90deg,#0b1618f5 0%,#0b1618d9 40%,#0b161866 75%,#0b16181a 100%),url('/art/room-operations.webp');background-position:0 0,70% 50%}
.agent-room-guild{background-image:linear-gradient(90deg,#0c182bf5 0%,#0c182bd9 40%,#0c182b66 75%,#0c182b1a 100%),url('/art/onboarding-guild.webp');background-position:0 0,center 55%}
/* 部屋のページ（キュロ /seo・バルド /youtube）：ダイアログではないので、角を丸めた1枚として置く */
.agent-hdr.agent-hdr-page{position:relative;top:auto;z-index:auto;min-height:96px;padding:18px 22px;margin:0 0 18px;border:1px solid #b99858;border-radius:18px;box-shadow:0 6px 18px #0c182b2e}
.agent-hdr-page .agent-face{width:60px;height:60px;border-radius:14px}
.agent-hdr-page .agent-hdr-name{font-size:22px}
.agent-hdr-page .agent-hdr-line{font-size:13px}
.agent-hdr-page ~ .topbar .eyebrow{display:none}
@media(max-width:600px){.agent-hdr.agent-hdr-page{padding:12px 14px;margin-bottom:14px;border-radius:14px;min-height:0}.agent-hdr-page .agent-face{width:44px;height:44px;border-radius:12px}.agent-hdr-page .agent-hdr-name{font-size:18px}}
/* 画面ごとの合わせ：帯が上に貼り付くので、元の見出し行は貼り付けない（2枚重なって本文が狭くなる） */
.agent-hdr~.intake-header{position:static;padding-top:10px;padding-bottom:10px}
.intake-dialog>.agent-hdr{margin-bottom:0}
/* スマホ：顔と名前を1行、ボタンはその下に右寄せで小さく（1文字ずつ折り返さない） */
@media(max-width:600px){
/* 1行目＝顔・名前・閉じる、2行目＝ほかのボタンを1列（はみ出す分は横に送る。1文字ずつ折り返さない・帯を3段にしない）。
閉じるは帯の右のボタンの最後に置く約束（どの画面もそう）なので、最後のボタンを1行目の右上に置く。幅は agent-header.js が測って --agent-close-w に入れる */
.agent-hdr{flex-wrap:wrap;padding:10px 12px;min-height:0;gap:0;margin-bottom:12px}
.agent-hdr-who{flex:1 1 100%;gap:10px;padding-right:calc(var(--agent-close-w,64px) + 8px);box-sizing:border-box;min-height:36px}
.agent-hdr:not(.agent-hdr-page) .agent-hdr-actions{flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:8px 0 0;gap:6px}
.agent-hdr-actions::-webkit-scrollbar{display:none}
.agent-hdr .agent-hdr-actions>:last-child{position:absolute;top:12px;right:12px}
.agent-hdr-actions:not(:has(>:not(:last-child):not([hidden]):not(:empty))){margin-top:0}
.agent-face{width:36px;height:36px;border-radius:10px}
.agent-hdr .agent-hdr-name{font-size:16px}
.agent-hdr .agent-hdr-line{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 指で押す高さは 40px 以上（2026-10-09 監査：32px で押しにくかった） */
.agent-hdr .agent-hdr-btn,.agent-hdr .agent-hdr-actions button{min-height:40px;padding:5px 12px;font-size:13px}
.agent-hdr .agent-hdr-actions>:last-child{top:10px}
}
/* ── 仲間の立ち絵（WebGL が無いとき） ─────────────────────────────
これまでは studio-team.png / portrait-*.webp（写実の絵）に戻っていた。リグを描けたときと同じ絵（art/pop-*.webp）を出す。
リグを描けたとき（.has-guild-rig）は canvas が入るので背景は消える（style.css） */
.guild-portrait.guild-proposal:not(.has-guild-rig){background-image:url('/art/pop-proposal.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-content:not(.has-guild-rig){background-image:url('/art/pop-content.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-instagram:not(.has-guild-rig){background-image:url('/art/pop-instagram.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-seo:not(.has-guild-rig){background-image:url('/art/pop-seo.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-youtube:not(.has-guild-rig){background-image:url('/art/pop-youtube.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-operations:not(.has-guild-rig){background-image:url('/art/pop-operations.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-marketing_design:not(.has-guild-rig){background-image:url('/art/pop-marketing-design.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-ad_creative:not(.has-guild-rig){background-image:url('/art/pop-ad-creative.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-ad_operation:not(.has-guild-rig){background-image:url('/art/pop-ad-operation.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-rival_analysis:not(.has-guild-rig){background-image:url('/art/pop-rival-analysis.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-ad_google:not(.has-guild-rig){background-image:url('/art/pop-ad-google.webp')!important;background-size:cover!important;background-position:center!important}
.guild-portrait.guild-ad_short:not(.has-guild-rig){background-image:url('/art/pop-ad-short.webp')!important;background-size:cover!important;background-position:center!important}
/* WebGL が無いときのオフィスの一覧（.office-list-agent）では紋章が顔の上に大きく重なっていた。立ち絵が同じポップな絵になったので、他の一覧と同じく紋章は出さない */
.office-list-agent .guild-role-crest{display:none}
/* ── 鍵（2026-10-21 卓馬「ロックのマークがチープ」「外販に耐える見た目に」）──────────────
錠前は GPT Image で作った透過の紋章（art/lock-emblem.webp・lock-ready.webp）。キャラは隠しきらず、色を抜いた影で見せる。
解除条件は社員ごと（agent_unlock）。そろった数を輪で、足りないものを3つまで見せる */
[data-design-locked="true"] img.agent-lock-emblem{opacity:1;filter:drop-shadow(0 8px 18px #000000b0) drop-shadow(0 0 14px #ffcf6b40)}
.agent-lock{background:radial-gradient(90% 70% at 50% 40%,#0a1324d9 0%,#0a1324b0 55%,#0a132460 100%);gap:6px;padding:12px 10px}
.agent-lock-emblem{width:76px;height:auto;display:block;animation:lock-float 4.5s ease-in-out infinite;pointer-events:none;user-select:none}
.agent-lock-ready .agent-lock-emblem{width:84px;animation:lock-glow 1.8s ease-in-out infinite}
@keyframes lock-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lock-glow{0%,100%{filter:drop-shadow(0 0 10px #ffd36a80) drop-shadow(0 8px 16px #0009);transform:scale(1)}
50%{filter:drop-shadow(0 0 22px #ffd36acc) drop-shadow(0 8px 16px #0009);transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.agent-lock-emblem{animation:none!important}}
.agent-lock .agent-lock-title{font-size:13px;letter-spacing:.24em;color:#ffe3a1}
/* そろった条件の輪 */
.agent-lock-meter{--p:0;position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
background:conic-gradient(#f5c95c calc(var(--p)*1%),#ffffff1f 0);box-shadow:0 0 0 1px #ffffff26,0 6px 14px #0007}
.agent-lock-meter::before{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d2c47,#0b1426)}
.agent-lock-meter-num{position:relative;font-size:15px;font-weight:900;color:#fff;letter-spacing:.02em;line-height:1}
.agent-lock-meter-say{position:absolute;top:100%;margin-top:3px;white-space:nowrap;font-size:10.5px;font-weight:800;color:#eef3fb;letter-spacing:.06em;text-shadow:0 1px 3px #000c}
.agent-lock-reqs{margin-top:14px!important;display:grid;gap:3px;width:min(184px,94%);padding:0;list-style:none}
.agent-lock-reqs li{display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:#ffffff14;
font-size:11px;font-weight:700;color:#eef3fb;line-height:1.35;text-align:left}
.agent-lock-reqs .agent-lock-req-more{background:none;justify-content:center;color:#c9d6ea;font-weight:600}
.agent-lock-req-mark{flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1.5px solid #f5c95c;
font-size:9px;color:#1b2333;background:transparent}
.agent-lock-reqs li .agent-lock-todo-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-lock-next{display:none;max-width:17em;font-size:10.5px;line-height:1.5;color:#c9d6ea}
#office-person-dialog .agent-lock-next,.agent-lock-wide .agent-lock-next{display:block}
.agent-lock-todo-head{margin-top:2px}
.studio-specialists .agent-lock-emblem{width:62px}
.studio-specialists .agent-lock-meter{width:50px;height:50px}
/* カードに乗せた・選んだとき：錠前を小さくして、足りない条件の一覧を絵の枠に収める（2026-10-21 撮って確認：見出しが重なり一覧が下へはみ出した） */
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock{align-content:start;padding-top:10px;gap:4px}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-emblem{width:38px;animation:none}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-title{display:none}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-meter{width:40px;height:40px}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-meter-num{font-size:12px}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-meter-say,
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-todo-head{display:none!important}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-reqs{margin-top:4px!important;gap:3px}
.studio-specialists>button[data-design-locked="true"] .agent-lock-reqs li{font-size:10.5px;padding:3px 8px}
/* 購入のロック（2026-10-21 卓馬「キャラクター1体1体を月額で。購入しないと解放されない」）：契約書の封蝋（art/lock-contract.webp）。
情報のロック（錠前・紺）と見分けがつくよう、紅と金にする。押すと契約の画面が開く */
.agent-lock-buy,.studio-specialists .agent-lock-buy,.studio-specialists>button[data-design-locked="true"] .agent-lock.agent-lock-buy{background:radial-gradient(86% 72% at 50% 42%,#3a1222f0 0%,#1c0a14ea 100%)!important}
[data-design-locked="true"] .agent-lock-buy img.agent-lock-emblem{filter:drop-shadow(0 8px 18px #000000b0) drop-shadow(0 0 14px #ff8a7a40)}
.agent-lock-buy .agent-lock-title{color:#ffd9a8}
.agent-lock-price{display:inline-block;padding:3px 12px;border-radius:999px;border:1px solid #f5c95c99;background:linear-gradient(180deg,#5a1626,#3a0d19);
font-size:11.5px;font-weight:800;color:#ffe9b8;letter-spacing:.06em;box-shadow:0 4px 10px #0007}
.agent-lock-buy .agent-lock-say{color:#f3dfe4}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-buy{align-content:center}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-buy .agent-lock-emblem{width:54px}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-buy .agent-lock-title{display:block!important}
.studio-specialists>button[data-design-locked="true"]:is(:hover,:focus-visible,:focus-within) .agent-lock-buy .agent-lock-next{display:block;color:#f3dfe4}
/* オフィスの一覧：輪の下の「そろった条件」と「次にやること」が重なっていた（2026-10-21 撮って確認） */
.office-list-agent .agent-lock-meter{margin-bottom:18px}
/* 契約の画面（2026-10-23）：ライル＋1体のセット。紅と金の封蝋（購入のロックと同じ色） */
.hire-set{max-width:520px;width:calc(100vw - 32px);border:1px solid #f5c95c88;border-radius:20px;padding:26px 24px 20px;text-align:center;
color:#f3dfe4;background:radial-gradient(90% 70% at 50% 25%,#3a1222,#1c0a14);box-shadow:0 24px 60px #000b}
.hire-set::backdrop{background:#0a0710c0;backdrop-filter:blur(3px)}
.hire-seal{width:96px;height:auto;margin:-6px auto 2px;display:block}
.hire-set h2{margin:4px 0 6px;font-size:20px;color:#ffd9a8;letter-spacing:.04em}
.hire-set p.hire-lead,.hire-set p.hire-after{color:#f3dfe4!important}
.hire-lead{margin:0 0 14px;font-size:14px;line-height:1.7}
.hire-pair{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 12px}
.hire-card{display:grid;justify-items:center;gap:2px;width:170px;padding:10px 8px 12px;border-radius:14px;background:#ffffff10;border:1px solid #ffffff22}
.hire-card img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:2px solid #f0d798}
.hire-card strong{font-size:15px;color:#fff}
.hire-card small{font-size:12px;color:#e8cfd6}
.hire-tag{font-style:normal;font-size:11px;font-weight:800;color:#2a1606;background:#f5c95c;border-radius:999px;padding:1px 8px;margin-top:4px}
.hire-plus{font-size:26px;font-weight:900;color:#f5c95c}
.hire-price{display:inline-block;margin:2px 0 8px;padding:4px 16px;border-radius:999px;border:1px solid #f5c95c99;background:#5a1626;color:#ffe9b8;font-weight:800}
.hire-after{margin:0 0 14px;font-size:13px;color:#e8cfd6;line-height:1.7}
.hire-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hire-go{padding:10px 22px;border-radius:999px;border:0;background:linear-gradient(180deg,#ffd76a,#f0a92a);color:#2a1606;font-weight:800;cursor:pointer}
.hire-go:disabled{opacity:.55;cursor:not-allowed}
.hire-close{padding:10px 18px;border-radius:999px;border:1px solid #ffffff44;background:transparent;color:#f3dfe4;cursor:pointer}
@media (max-width:420px){.hire-card{width:130px}.hire-card img{width:76px;height:76px}}
/* ジャンルの見出し（2026-10-26 卓馬「広告は広告など、ジャンルで選びやすく」・app.js setupStudioRoster の GROUPS） */
.studio-specialists>.studio-genre{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;min-width:0;padding:4px 2px 6px;border-bottom:2px solid #c3a66b;margin-top:6px}
.studio-genre strong{font-size:14px;font-weight:700;color:#473b2a;white-space:nowrap}
.studio-genre small{font-size:12px;color:#7a6a4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.studio-genre[data-genre^="ad_"]{border-bottom-color:#d65337}
/* 一言と補足は1行。長いときは … で切り、枠を広げない */
.studio-specialists .specialist-card-copy{min-width:0}
.studio-specialists .specialist-card-copy>b,.studio-specialists .specialist-card-copy>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:1101px){
.studio-specialists>.studio-specialists-heading{grid-row:1}
.studio-specialists>.rg-r2{grid-row:2}
.studio-specialists>.rg-r3{grid-row:3}
.studio-specialists>.rg-r4{grid-row:4}
.studio-specialists>.rg-r5{grid-row:5}
.studio-specialists>.rg-r6{grid-row:6}
.studio-specialists>.rg-r7{grid-row:7}
.studio-specialists>.rg-r8{grid-row:8}
.studio-specialists>.rg-r9{grid-row:9}
.studio-specialists>.rg-r10{grid-row:10}
.studio-specialists>.rg-r11{grid-row:11}
.studio-specialists>.rg-r12{grid-row:12}
.studio-specialists>.rg-c1{grid-column-start:1}
.studio-specialists>.rg-c2{grid-column-start:2}
.studio-specialists>.rg-c3{grid-column-start:3}
.studio-specialists>.rg-c4{grid-column-start:4}
.studio-specialists>.rg-c5{grid-column-start:5}
.studio-specialists>.rg-c6{grid-column-start:6}
.studio-specialists>.rg-s1{grid-column-end:span 1}
.studio-specialists>.rg-s2{grid-column-end:span 2}
.studio-specialists>.rg-s3{grid-column-end:span 3}
.studio-specialists>.rg-s4{grid-column-end:span 4}
.studio-specialists>.rg-s5{grid-column-end:span 5}
.studio-specialists>.rg-s6{grid-column-end:span 6}
}
@media (min-width:701px) and (max-width:1100px){
.studio-specialists>.studio-specialists-heading{grid-row:1}
.studio-specialists>.rm-r2{grid-row:2}
.studio-specialists>.rm-r3{grid-row:3}
.studio-specialists>.rm-r4{grid-row:4}
.studio-specialists>.rm-r5{grid-row:5}
.studio-specialists>.rm-r6{grid-row:6}
.studio-specialists>.rm-r7{grid-row:7}
.studio-specialists>.rm-r8{grid-row:8}
.studio-specialists>.rm-r9{grid-row:9}
.studio-specialists>.rm-r10{grid-row:10}
.studio-specialists>.rm-r11{grid-row:11}
.studio-specialists>.rm-r12{grid-row:12}
.studio-specialists>.rm-r13{grid-row:13}
.studio-specialists>.rm-r14{grid-row:14}
.studio-specialists>.rm-r15{grid-row:15}
.studio-specialists>.rm-r16{grid-row:16}
.studio-specialists>.rm-c1{grid-column-start:1}
.studio-specialists>.rm-c2{grid-column-start:2}
.studio-specialists>.rm-c3{grid-column-start:3}
.studio-specialists>.rm-s1{grid-column-end:span 1}
.studio-specialists>.rm-s2{grid-column-end:span 2}
.studio-specialists>.rm-s3{grid-column-end:span 3}
}
/* ジャンルの枠（2026-10-26 同日・目につくように）。見出しとカードの2段を、色の付いた枠で囲む。広い画面と中くらいの幅だけ */
.studio-specialists>.studio-genre-frame{display:none}
@media (min-width:701px){
.studio-specialists>.studio-genre-frame{display:block;align-self:stretch;justify-self:stretch;z-index:0;margin:-8px;border:2px solid #c3a66b;border-radius:16px;background:#fbf3df;pointer-events:none}
.studio-specialists>.studio-genre-frame[data-genre^="ad_"]{border-color:#d65337;background:#fcebe4}
.studio-specialists>.studio-genre,.studio-specialists>button{position:relative;z-index:1}
.studio-specialists>.studio-genre{border-bottom:0;margin-top:0;padding:2px 4px 0}
.studio-specialists{row-gap:18px!important}
}
/* 見出しは札のように。広告は赤、ほかは金 */
.studio-specialists>.studio-genre strong{display:inline-block;font-size:15px;padding:3px 12px;border-radius:999px;background:#7a5a24;color:#fff}
.studio-specialists>.studio-genre[data-genre^="ad_"] strong{background:#b8402a}
.studio-specialists>.studio-genre small{font-size:12px;font-weight:700}
@media (min-width:1101px){ .studio-specialists>.rg-h2{grid-row-end:span 2} }
@media (min-width:701px) and (max-width:1100px){ .studio-specialists>.rm-h2{grid-row-end:span 2} }