/* 色のめがね Web Edition（色のシミュレータ Web Edition の作りを写した。色は 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; }

.plate.small { width: 36px; height: 27px; vertical-align: middle; } .plate.small img { width: 34px; height: 25px; }



/* 映像 */
#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); }
.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); }

/* 設定（アプリの設定画面に揃える: 見出し・行・戻る） */
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; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 画面には出さず、読み上げには残す */
dialog.settings .row, dialog.settings .list > *, .seg2 button { font-size: var(--fs-item); }
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; }   /* 著作権の行の作者名はサイトへのリンク */


/* ===== 色のめがね Web Edition だけ（ここから） ===== */
/* 画面: 上のメニューの下から下の帯の上まで、映像をいっぱいに（色のシミュレータ Web と同じ。部品の後ろに画像を隠さない） */
html { height: 100%; background: #000; }   /* 下の帯の下に白い線が出ない */
/* 映像の最小は 320×320（色のシミュレータ Web の MIN_STAGE と同じ決まり）。それより小さい窓は、ページがスクロールする */
body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(320px, 1fr) auto; min-width: 320px; height: 100vh; height: 100svh; background: #1c1c1e; }   /* 高さは窓の高さ（上限がある）。映像の行が 320 を下回る窓だけ、ページがスクロール */
#main { display: contents; }   /* 上のメニュー・ボタンの段・映像・下の帯を、body の格子の 1 行ずつに */
.toolbar { background: #fff; margin: 0; padding: 6px max(12px, calc((100% - 1200px) / 2)); }   /* 並べ方は ui-web/css/toolbar.css・ui-web/js/toolbar_fit.js（色のシミュレータ Web と共通） */
.work { min-height: 320px; display: flex; position: relative; }   /* 映像は全部使う */
#stage { flex: 1; min-width: 320px; min-height: 320px; margin: 0; }
#canvas { position: absolute; left: 0; top: 0; }   /* 描く面の大きさ（画素）が、映像の行の高さを押し広げない */
#video { position: fixed; }
.tabs button:focus-visible, .upbtn:focus-visible, .vseg button:focus-visible { outline: 3px solid #f5c518; outline-offset: 2px; }

/* 映像の上の文字・色度図の印・基本 11 色の帯。重なり順: カーソル・図の印（6）が帯（2）の文字より手前（モバイルは色名のカーソルを最後に重ねる。Web は DOM の順で帯の後ろに回っていた） */
#labels > div { position: absolute; top: 6px; color: #fff; font-weight: bold; font-size: 13px; line-height: 1.3; white-space: pre; pointer-events: none; text-shadow: 2px 2px 2.5px #000; }
#lbLeft { left: 8px; } #lbCenter { left: 50%; transform: translateX(-50%); text-align: center; } #lbRight { right: 8px; text-align: right; }
#chartMark { z-index: 6; position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000; pointer-events: none; }
#munsell { z-index: 2; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; }   /* 位置と高さは overlay.js の layoutStrip（モバイルの munsellBand と同じ決まり）が上書きする */
#munsell button { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font-weight: 600; font-size: 13px; color: rgba(0,0,0,.75); cursor: pointer; touch-action: manipulation; }
#munsell button:focus-visible { outline: 3px solid #f5c518; outline-offset: -3px; }

/* 狭い窓（映像が 520px 以下）: 上の文字が横に並ぶと重なるので、中央（型とズーム）は 2 段目に下げる */
@media (max-width: 520px) { .tabs button { font-size: 10px; } }   /* 上の 3 つの文字（左・中央・右）はどの幅でも同じ高さ（モバイルと同じ）。以前ここに中央だけ下げる規則があったのを外した */

/* 右の ▲ のポップアップ（型の切り替えと円形スライダー）。映像の大きさは変えず、映像の上に重ねて出す */
.side { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
body:not(.sub-open) .side { display: none; }
.circle { flex: none; line-height: 0; }
.vseg { display: flex; flex-direction: column; border: 1px solid #6a8fb8; border-radius: 15px; overflow: hidden; background: #1c1c1e; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
.vseg button { width: 52px; height: 39px; border: 0; background: none; color: #9a9a9a; font-weight: bold; font-size: 16px; cursor: pointer; }
.vseg button[aria-checked="true"] { color: #fff; background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }
/* シミュレーションの帯（モバイルの simulationBar と同じ）: 左に C・P・D・T の 4 連（択一）、その右に強さのスライダー（C の時は薄く押せない）。▲ と右のポップアップは出さない */
.hseg { flex: none; display: flex; border: 1px solid #6a8fb8; border-radius: 10px; overflow: hidden; background: #1c1c1e; }
.hseg button { width: 52px; height: 39px; border: 0; background: none; color: #9a9a9a; font-weight: bold; font-size: 16px; cursor: pointer; }
.hseg button + button { border-left: 1px solid #3a5a80; }
.hseg button[aria-checked="true"] { color: #fff; background: linear-gradient(var(--ui-selection-blue-light), var(--ui-selection-blue)); }
.hseg button:focus-visible { outline: 3px solid #f5c518; outline-offset: -3px; }
body:not([data-tab="2"]) #simSeg { display: none; }
body[data-tab="2"] #btnPopup, body[data-tab="2"] #btnSub, body[data-tab="2"] .side { display: none; }
.rangebox.disabled { opacity: var(--ui-disabled-alpha); pointer-events: none; }

/* 下の帯: 範囲スライダーの帯（▲ 範囲 ▲）とモードのタブ */
.bottom { flex: none; background: linear-gradient(#404040, #000); color: #fff; display: flex; flex-direction: column; }
.barrow { display: flex; align-items: center; gap: 8px; padding: 4px 10px; min-width: 0; }
.rangebox { flex: 1; min-width: 0; }
.upbtn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid #8c8c8c; background: radial-gradient(#e8e8e8, #a0a0a0); color: #1a1a1a; font-size: 15px; cursor: pointer; }
#btnSub[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }
.tabs { display: flex; margin: 0; border: 0; background: linear-gradient(#404040 50%, #000 50%); }   /* 設定の中のタブ用の規則（下の線・余白）は、写し元にあった物を消した（このアプリに設定のタブは無い）。タブバーに線・余白を付けない */   /* タブの帯はアプリと同じ上下 2 色 */
.tabs button { flex: 1; min-height: 44px; border: 0; background: none; color: #bdbdbd; font-weight: bold; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; border-radius: 5px; }
.ti { display: block; width: 22px; height: 22px; background: #9a9a9a; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tabs button[aria-selected="true"] { color: #fff; background: rgba(128,128,128,.25); }
.tabs button[aria-selected="true"] .ti { background: linear-gradient(#8ccaff, #2d8be6); }   /* 選択中は青の階調（2.21）、ほかは灰 */
/* 下の帯: 縦 2 段（モバイルと同じ）。帯が上、タブが下 */


/* プリセット・基本色のポップアップ（アプリの PopupList: 白の枠・題・項目の一覧） */
.popup { position: fixed; z-index: 20; background: #fff; color: #404040; border: 2px solid #fff; border-radius: 7px; box-shadow: 2.5px 2.5px 6px rgba(0,0,0,.5); min-width: 220px; max-width: min(94vw, 380px); max-height: 70vh; display: flex; flex-direction: column; }
.popup h5 { margin: 0; padding: 6px 10px; font-size: 14px; background: linear-gradient(#f4f4f4, #dadada); border-radius: 5px 5px 0 0; }
.popup ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.popup li button { width: 100%; text-align: left; min-height: 44px; padding: 0 10px; border: 0; border-top: 1px solid #e4e4e4; background: #fff; font-size: 14px; color: #404040; cursor: pointer; }
.popup li button:active, .popup li button:hover { background: #dcdcdc; }
.popup .hint { font-size: 11px; color: #777; padding: 4px 10px 6px; }
.presets { display: flex; flex-direction: column; }
.presets .prow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 16px; background: #fff; border-top: 1px solid #e4e4e4; }
.presets .prow input[type=text] { width: 100%; padding: 7px 8px; border: 1px solid #bbb; border-radius: 6px; font: inherit; }
.presets .prow .pb { display: flex; gap: 6px; flex-wrap: wrap; }
.presets .prow button { padding: 7px 10px; border: 1px solid #999; border-radius: 6px; background: #f2f2f2; cursor: pointer; font-size: 13px; }
.seg2.col { flex-direction: column; } .seg2.col button + button { border-left: 0; border-top: 1px solid var(--ui-selection-blue); }
.presets details { font-size: 13px; } .presets details summary { cursor: pointer; padding: 4px 0; min-height: 32px; } .presets details label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; } .presets details input[type=number] { width: 6em; padding: 5px; border: 1px solid #bbb; border-radius: 6px; font: inherit; }