/* 色のシミュレータ Web Edition（2026-10-30 に書き直し。Bootstrap・jQuery UI を外し、色は ui_style.css（shared の UiStyle から生成）を使う）。
   元の Web Edition からの変化は設計書 docs/cvs/design/cvs_web_edition_2026-10-30.md の一覧 */
/* 文字の段（大きい順。情報・設定・保存の画面で同じ変数を使う）: タイトル > 節の見出し > 項目の名前 > 説明の文 */
:root { --fs-title: 18px; --fs-section: 16px; --fs-item: 14px; --fs-text: 13px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", system-ui, sans-serif;
  color: #404040; font-size: 14px; line-height: 1.6; background: #fff;
}
a { color: #cd562c; }
button { font: inherit; }
[hidden] { display: none !important; }

.bar { background: linear-gradient(#404040, #c0c0c0); height: 44px; display: flex; align-items: center; justify-content: center; }
.brand { color: #fff; text-decoration: none; font-weight: normal; font-size: 16px; display: flex; align-items: center; gap: 8px; text-shadow: 0 -1px 0 rgba(0,0,0,.25); }
.brand img { height: 30px; width: 30px; border-radius: 6px; }

#main { padding: 12px 0 0; }
.toolbar { --cluster-gap: 26px; --slider-bar: clamp(90px, 16vw, 240px); max-width: 1200px; margin: 0 auto; padding: 0 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }   /* 2 行の時の行の間。--slider-bar は 2 本の棒の長さ（1 つの変数。1 行の時は main.js の fitToolbar が余りに合わせて入れる） */
.buttons, .sliders { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px var(--cluster-gap); }   /* まとまり（ボタンの組・スライダー）の間は同じ値 1 つ。折り返す時もまとまり単位 */
.cluster { display: flex; flex: none; gap: 6px; }
.group { display: flex; align-items: center; gap: 6px; }

/* 板（アプリのボタンと同じ: 灰の地・角丸・影。押した物は選択の青） */
.plate {
  width: 52px; height: 39px; padding: 0; border: 1px solid rgba(0,0,0,.35); border-radius: 7px;
  background: var(--ui-bar-gray); box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.plate img { width: 48px; height: 36px; display: block; pointer-events: none; }
.plate[aria-pressed="true"] { background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }
.plate:disabled, .plate.disabled { opacity: var(--ui-disabled-alpha); cursor: default; }
#btnSettings img { width: 24px; height: 24px; }   /* 歯車の絵は枠いっぱいなので、他の絵と同じ見た目の大きさに */
.plate.small { width: 36px; height: 27px; vertical-align: middle; } .plate.small img { width: 34px; height: 25px; }

/* 型の 4 連 */
.seg { flex: none; gap: 0; border: 1px solid var(--ui-segment-border); border-radius: 7px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.seg-btn {
  flex: none; width: clamp(36px, 5vw, 56px); height: 38px; border: 0; border-left: 1px solid var(--ui-segment-border); cursor: pointer; font-weight: bold; font-size: 18px;
  color: var(--ui-segment-text-off); background: linear-gradient(var(--ui-segment-off-top), var(--ui-segment-off-bottom));
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }

.slider { --slider-gap: 4px; display: grid; grid-template-columns: auto var(--slider-bar) auto; column-gap: var(--slider-gap); row-gap: 0; align-items: center; }
.slider .s-left { grid-column: 1; grid-row: 2; } .slider .lens { display: block; } .slider input[type="range"] { grid-column: 2; grid-row: 2; } .slider .s-right { grid-column: 3; grid-row: 2; }
.slider output { grid-column: 2; grid-row: 1; }   /* 数字は棒の上の中央 */   /* 部品どうし（札・つまみの棒・数字）の隙間。2 本のスライダーで同じ値（この 1 つの変数） */
.slider label { font-size: 13px; white-space: nowrap; }
.slider output { height: 5px; line-height: 5px; transform: translateY(-1px); font-size: 11px; text-align: center; font-weight: bold; color: var(--ui-selection-blue); }
.slider input[type="range"] { width: 100%; min-width: 0; accent-color: var(--ui-selection-blue); }
.slider input[type="range"]:disabled { opacity: var(--ui-disabled-alpha); }
.pill { width: 36px; height: 27px; }
.pill[hidden] { display: none; }
.lens { height: auto; } img[src$="btn_zoomSmall.svg"] { width: 13px; } img[src$="btn_zoomLarge.svg"] { width: 19.5px; }   /* 虫めがねは絵の余白を切ってあり、他の絵と同じ縮尺（0.9px／単位） */

/* 映像 */
#stage { position: relative; margin: 12px 0 0; background: var(--ui-screen-background); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#canvas { display: block; width: 100%; height: 100%; }
/* 型の名前・ズーム: アプリと同じ（白の太字に影。地の黒い板は無い。影は UiStyle の TEXT_SHADOW） */
#labels > div {
  position: absolute; color: #fff; font-weight: bold; line-height: 1.3; white-space: nowrap; pointer-events: none;
  text-shadow: 2px 2px 2.5px #000;
}
#labels > div.zoom { font-weight: normal; }
#msg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 90%; padding: 14px 18px; background: rgba(0,0,0,.75); color: #fff; border-radius: 8px; text-align: center; }
#video { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }


/* ダイアログ（保存・情報） */
dialog { border: 1px solid #aaa; border-radius: 8px; padding: 16px 20px; max-width: min(94vw, 560px); color: #404040; }
dialog.wide { max-width: min(94vw, 760px); max-height: 86vh; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 { margin: 0 0 10px; font-size: var(--fs-title); }
dialog h5, .tabpane h5 { margin: 14px 0 6px; font-size: var(--fs-section); }
.preview { text-align: center; } #saveimg { max-width: 100%; height: auto; background: #fff; }
.actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.actions button { min-width: 6em; padding: 6px 14px; border: 1px solid #999; border-radius: 6px; background: #f2f2f2; cursor: pointer; }
.actions button.primary { background: var(--ui-selection-blue); border-color: var(--ui-selection-blue); color: #fff; }
.actions button.disabled { opacity: var(--ui-disabled-alpha); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #aaa; margin-bottom: 8px; }
.tabs button { border: 1px solid transparent; border-bottom: 0; background: none; padding: 5px 14px; cursor: pointer; border-radius: 6px 6px 0 0; }
.tabs button[aria-selected="true"] { border-color: #aaa; background: #fff; font-weight: bold; position: relative; top: 1px; }
.tabpane dl { margin: 0; } .tabpane dt { font-weight: bold; font-size: var(--fs-item); margin-top: 8px; } .tabpane dd { margin: 0 0 0 1em; font-size: var(--fs-text); }
.tabpane p { font-size: var(--fs-text); }
.tabpane .cc { font-size: var(--fs-text); color: #777; }

/* 設定（アプリの設定画面に揃える: 見出し・行・戻る） */
dialog.settings { width: min(94vw, 460px); padding: 0 0 16px; }
.dhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 14px; border-bottom: 1px solid #ccc; background: #f4f4f4; position: sticky; top: 0; }
.dhead h3 { margin: 0; font-size: var(--fs-title); } .dhead button { justify-self: start; border: 0; background: none; color: var(--ui-selection-blue); font-size: 15px; cursor: pointer; padding: 4px 0; }
dialog.settings h4 { margin: 18px 16px 6px; font-size: var(--fs-section); color: #777; }
dialog.settings .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; background: #fff; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; margin-top: -1px; }
dialog.settings .list { display: flex; flex-direction: column; }
dialog.settings .list > * { text-align: left; padding: 10px 16px; border: 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; margin-top: -1px; background: #fff; font: inherit; color: var(--ui-selection-blue); cursor: pointer; text-decoration: none; }
.seg2 { display: flex; margin: 0 16px; border: 1px solid var(--ui-selection-blue); border-radius: 7px; overflow: hidden; }
.seg2 button { flex: 1; padding: 7px 0; border: 0; background: #fff; color: var(--ui-selection-blue); cursor: pointer; }
.seg2 button + button { border-left: 1px solid var(--ui-selection-blue); }
.seg2 button[aria-checked="true"] { background: var(--ui-selection-blue); color: #fff; }
.footer-note { margin: 6px 16px 0; font-size: var(--fs-text); color: #777; line-height: 1.5; } .footer-note.center { text-align: center; }
#setEmbed { width: 42px; height: 22px; accent-color: var(--ui-selection-blue); }
@font-face { font-family: "RobotoBoldLatin"; src: url("../fonts/roboto_bold_latin.ttf"); font-weight: bold; }
.tabpane .lic { margin: 4px 0 8px; padding-left: 1.2em; }
.license { font: 11px/1.35 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: #555; margin: 8px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 画面には出さず、読み上げには残す */
/* 色差モードの両端の札（アプリの DiffEndPill: 2:1 の丸い札。左半分が模擬の前、右半分が模擬の後の色。数字は白の太字に影） */
.diffpill, .endpill { flex: none; width: 34px; height: 17px; margin: 5px 1px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 10px; line-height: 1; text-shadow: 1px 1px 1.5px #000; }
/* 幅が広い時は 1 行（ボタン・スライダー 2 本）。入らなければ 2 行（main.js の fitToolbar が分かれ目を計算して one-row を付け外しする） */
.toolbar.one-row { max-width: none; flex-direction: row; justify-content: center; align-items: center; gap: var(--cluster-gap); }
.toolbar.one-row .buttons { flex-wrap: nowrap; flex: none; }
.toolbar.one-row .sliders { flex-wrap: nowrap; flex: none; gap: var(--cluster-gap); }
.toolbar.one-row .slider { flex: none; }
/* 情報の画面の項目の絵（画面と同じ絵・札。手で描き直さない）*/
.tabpane dt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ico { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.plate.demo, .seg.demo { cursor: default; pointer-events: none; }
.seg.demo { display: inline-flex; } .seg.demo .seg-btn { width: 36px; display: inline-flex; align-items: center; justify-content: center; }
.seg-btn.on { color: #fff; background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }
.plate.demo img.gear, .plate.demo .gear { width: 24px; height: 24px; }
.ico img.lens { height: auto; }
.tabpane dd { margin: 2px 0 6px 0; }
.tabpane .logo { display: block; width: 64px; height: 64px; border-radius: 14px; margin: 4px 0 6px; }
.tabpane .shot { display: block; width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; height: auto; border: 1px solid #bbb; border-radius: 4px; margin-top: 8px; margin-bottom: 4px; }   /* ページ全体の画面（tools/make_cvs_web_info_shots.mjs が撮る） */
dialog.settings .row, dialog.settings .list > *, .seg2 button { font-size: var(--fs-item); }
/* 使い方のページ（manual.html） */
body.manual { background: #fff; }
.manual .bar .brand { cursor: default; }
.manual-body { max-width: 1200px; margin: 0 auto; padding: 14px 16px 40px; }
.langs { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.langs button { padding: 5px 14px; border: 1px solid #aaa; border-radius: 6px; background: #f2f2f2; cursor: pointer; font-size: var(--fs-item); }
.langs button[aria-pressed="true"] { background: var(--ui-selection-blue); border-color: var(--ui-selection-blue); color: #fff; }
.copyline { margin: 0 0 8px; text-align: right; font-size: var(--fs-text); color: #404040; font-weight: bold; }   /* ロゴのすぐ下。説明の文と同じ大きさ・はっきりした色 */
dialog.settings .applink { display: flex; align-items: center; gap: 10px; }
dialog.settings .applink img { height: 22px; width: auto; border-radius: 4px; }
dialog.settings .row a { color: var(--ui-selection-blue); text-decoration: none; }   /* 著作権の行の作者名はサイトへのリンク */
.manual .about-title { text-align: center; }   /* 「…について」の見出しは中央寄せ */