@charset "utf-8";

/* ==========================================================
   色の微調整パネル（site-b-color 専用・お客様には見せない）

   B案の藍色を、明るさ（輝度）と あざやかさ（彩度）のスライダーで
   その場で変えて見るためのもの。触った結果は :root の CSS 変数に
   流し込むので、ページ全体が同時に変わる。

   🔴 白文字とのコントラストを常に出している。
      4.5 を下回ると、青地に白の文字（ボタン・ヘッダー・フッター）が
      読みにくくなる（WCAG AA の基準）。明るくしすぎの歯止め。
   ========================================================== */

.tune{
  position:fixed; right:16px; top:16px; z-index:900;
  width:320px; max-width:calc(100vw - 32px);
  background:#ffffff; color:#22272e;
  border:1px solid #c8ced6; border-radius:6px;
  box-shadow:0 6px 24px rgba(20,40,60,.18);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:14px; line-height:1.6;
}
.tune__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-bottom:1px solid #e4e8ed;
}
.tune__ttl{ font-weight:700; font-size:14px; }
.tune__toggle{
  border:1px solid #c8ced6; background:#f4f6f8; color:#22272e;
  border-radius:4px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer;
}
.tune__toggle:hover{ background:#e9edf1; }
.tune__body{ padding:14px; }
.tune.is-closed .tune__body{ display:none; }

/* 見本 */
.tune__swatch{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:4px; color:#fff; margin-bottom:14px;
}
.tune__swatchT{ font-weight:700; font-size:15px; }
.tune__swatchS{ font-size:12px; opacity:.92; }

/* スライダー */
.tune__row{ margin-bottom:14px; }
.tune__lbl{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:13px; font-weight:700; margin-bottom:5px;
}
.tune__val{ font-weight:400; color:#5b6570; font-variant-numeric:tabular-nums; }
.tune__row input[type=range]{ width:100%; margin:0; }
.tune__hint{ font-size:12px; color:#5b6570; margin:4px 0 0; }

/* コントラストの表示 */
.tune__cr{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:4px; margin-bottom:12px;
  font-size:13px; line-height:1.5;
}
.tune__cr--ok{ background:#e8f4ec; border:1px solid #b6d9c4; }
.tune__cr--warn{ background:#fdf3e0; border:1px solid #e8cd9a; }
.tune__cr--ng{ background:#fbeaea; border:1px solid #e5b4b4; }
.tune__crNum{ font-weight:700; font-variant-numeric:tabular-nums; }

/* プリセット */
.tune__presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tune__preset{
  border:1px solid #c8ced6; background:#fff; color:#22272e;
  border-radius:4px; padding:6px 10px; font:inherit; font-size:12px; cursor:pointer;
}
.tune__preset:hover{ background:#f2f5f8; }
.tune__preset.is-on{ border-color:#22272e; background:#22272e; color:#fff; }

/* 決めた色の書き出し */
.tune__out{
  width:100%; box-sizing:border-box; resize:vertical;
  font-family:"Consolas","Menlo",monospace; font-size:12px; line-height:1.6;
  border:1px solid #c8ced6; border-radius:4px; padding:8px; background:#f7f9fb; color:#22272e;
}
.tune__acts{ display:flex; gap:6px; margin-top:8px; }
.tune__acts button{
  flex:1; border:1px solid #c8ced6; background:#fff; color:#22272e;
  border-radius:4px; padding:8px 6px; font:inherit; font-size:13px; cursor:pointer;
}
.tune__acts button:hover{ background:#f2f5f8; }
.tune__msg{ font-size:12px; color:#2f7d4f; margin:6px 0 0; min-height:1.2em; }

@media (max-width:760px){
  .tune{ right:8px; left:8px; top:8px; width:auto; }
  .tune.is-closed{ left:auto; }
}
@media print{ .tune{ display:none; } }