/* Googleのツールの見た目にそろえる（2026-10-01 卓馬「全体的なデザインやカラーデザインをGoogleのツールっぽく」）。
 *
 * 全ページの最後に読む。色そのものは style.css 側で Google の色の段階に置き換え済み
 * （白・#f8fafd の地、#0b57d0 の青、#1f1f1f / #444746 の文字、#c4c7c5 / #e1e3e1 の線）。
 * ここでは形・書体・動きをそろえる。
 *
 * **キャラクター・オフィス・ジャーニー・ライバルは世界観なので触らない。**
 * 外し方は :where(...) にする。:not(...) だと優先度が上がり、カード型のボタン
 * （.feed-item など、button で作った大きな面）の形まで上書きしてしまう。
 */
:root{
 --g-primary:#0b57d0;--g-primary-hover:#0842a0;--g-on-primary:#ffffff;
 --g-bg:#f8fafd;--g-surface:#ffffff;--g-container:#f0f4f9;--g-container-high:#e9eef6;
 --g-selected:#c2e7ff;--g-on-selected:#001d35;
 --g-text:#1f1f1f;--g-text-2:#444746;--g-outline:#747775;--g-outline-2:#c4c7c5;--g-outline-3:#e1e3e1;
 --g-elev-1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
 --g-elev-2:0 1px 2px rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
 --g-elev-3:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
 --g-font:"Google Sans","Google Sans Text",Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,Arial,sans-serif;
 font-family:var(--g-font);
}
body{font-family:var(--g-font);background:var(--g-bg);color:var(--g-text);-webkit-font-smoothing:antialiased}

/* ── 上の帯（ヘッダー）は世界観の側（2026-10-01 卓馬「世界観はドラクエなので、ヘッダーの色合いや
   デザインは前の方が圧倒的に良かった」）。ここでは触らない。ボタンの指定からも外す ── */

/* ── ボタン（世界観の中のボタンは除く） ── */
button:where(:not(.studio-specialists *,#my-office *,.office-rival-frontier *,.journey-band *,.flow-team-training *,
 #office-person-dialog *,#office-growth-dialog *,#office-catalog *,.office-scene *,.agent-lock *,body>header *)){
 border-radius:20px;border:1px solid var(--g-outline-2);background:var(--g-surface);color:var(--g-primary);
 font-weight:500;letter-spacing:.01em;padding:8px 20px;min-height:36px;line-height:20px;
 transition:background-color .15s,box-shadow .15s,border-color .15s}
button:where(:not(.studio-specialists *,#my-office *,.office-rival-frontier *,.journey-band *,.flow-team-training *,
 #office-person-dialog *,#office-growth-dialog *,#office-catalog *,.office-scene *,.agent-lock *,body>header *)):hover:not(:disabled){
 background:#e8f0fe;border-color:var(--g-outline-2)}
button:where(:not(.studio-specialists *,#my-office *,.office-rival-frontier *,.journey-band *,.flow-team-training *,
 #office-person-dialog *,#office-growth-dialog *,#office-catalog *,.office-scene *,.agent-lock *,body>header *)):disabled{
 background:#f1f3f4;color:#5f6368;border-color:transparent}
/* 青で塗ったボタン（主な操作）。浮かせて押せることを示す */
button[style*="0b57d0"],button:where(.primary,#order-submit,#proposal-generate,#rough-save,#scope-approve,#client-register,#lp-ideas-run,#lp-ab-ga4){
 background:var(--g-primary);color:var(--g-on-primary);border-color:var(--g-primary)}
button:where(.primary,#order-submit,#proposal-generate,#rough-save,#scope-approve,#client-register,#lp-ideas-run,#lp-ab-ga4):hover:not(:disabled){
 background:var(--g-primary-hover);border-color:var(--g-primary-hover);box-shadow:var(--g-elev-1);color:#fff}

/* ── 入力欄（枠は細く、入力中だけ青） ── */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea){
 border:1px solid #80868b;border-radius:8px;background:var(--g-surface);color:var(--g-text)}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea):hover:not(:disabled){border-color:var(--g-text)}
:where(input,select,textarea):focus{outline:none;border-color:var(--g-primary);box-shadow:inset 0 0 0 1px var(--g-primary)}
input[type=checkbox],input[type=radio]{accent-color:var(--g-primary)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--g-primary)!important;outline-offset:2px!important}

/* ── ダイアログ（角を大きく丸め、影で浮かせる） ── */
dialog:where(:not(#office-person-dialog,#office-growth-dialog,#office-catalog)){
 border:0!important;border-radius:28px!important;box-shadow:var(--g-elev-3)!important;background:var(--g-surface)}
dialog::backdrop{background:rgba(0,0,0,.32)!important;backdrop-filter:none!important}
dialog .editor-top h2{font-weight:400;font-size:24px;letter-spacing:0}

/* ── 見出しと文字（太すぎない。Google の見出しは 400〜500） ── */
:where(h1,h2,h3):where(:not(.studio-specialists *,#my-office *,.office-rival-frontier *,.journey-band *,.flow-team-training *)){
 font-weight:500;letter-spacing:0;color:var(--g-text)}
a:where(:not(body>header a)){color:var(--g-primary)}

/* ── 面（カード）：白・角丸12・細い線 ── */
:where(#creation-feed,#calendar-section,#workspace,#event-detail,.utility-panel,#utility-panel)>:where(section,article,div.panel){border-radius:16px}
.feed-item,.client-card,.work-item,.outputs-card{border-color:var(--g-outline-3)!important;border-radius:12px!important;box-shadow:none!important;transition:box-shadow .15s}
.feed-item:hover,.client-card:hover,.work-item:hover,.outputs-card:hover{box-shadow:var(--g-elev-1)!important}

/* 選んでいる札・タブ（aria-pressed）は水色の地 */
:where(button[aria-pressed=true]):where(:not(.studio-specialists *,#my-office *,.office-rival-frontier *,.journey-band *,.flow-team-training *)){
 background:var(--g-selected);color:var(--g-on-selected);border-color:transparent}

/* スクロールバーは細く */
*{scrollbar-width:thin;scrollbar-color:#c4c7c5 transparent}

/* ── 別ページ（市場・競合／継続改善）── 濃い色の大きな帯は使わない。Google のツールの見出しは
   薄い面に濃い文字。色の置き換えで深緑の帯が一面の青になり、重く見えた */
.hero{background:var(--g-container)!important;background-image:none!important;color:var(--g-text)!important;border-radius:28px!important}
.hero h1{color:var(--g-text);font-weight:400}
.hero p{color:var(--g-text-2)!important}
.hero>small{color:var(--g-text-2)!important}
.hero label{color:var(--g-text-2)}
body>header:not(.app-header){background:var(--g-bg)!important;color:var(--g-text)!important;border-bottom:1px solid var(--g-outline-3)!important}
body>header:not(.app-header) a{color:var(--g-text-2)}