/* ==========================================================================
   cookalc tools / gelling_agent.css
   凝固剤計算ツール 固有スタイル

   共通部分（.ca-*）は /assets/css/cookalc-ui.css を使う。
   ここに書くのは、このツール固有の見た目（特徴カードのグリッド・
   硬さの切り替えボタン・比較表など）だけ。
   ========================================================================== */

/* ---- 入力欄 ---- */
.ga-field { margin-bottom: 1.25rem; }
.ga-field:last-child { margin-bottom: 0; }
.ga-hint { font-size: .8125rem; color: var(--ca-muted); margin: .375rem 0 0; }

/* ---- 特徴の比較カード（全ティア共通で閲覧可） ---- */
.ga-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
  .ga-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.ga-info-card {
    background: var(--ca-accent-bg);
    border: 1px solid var(--ca-accent-line);
    border-radius: .6rem;
    padding: 1rem 1.1rem;
}
.ga-info-card h3 {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ca-ink);
}
.ga-info-card p {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: var(--ca-sub);
    line-height: 1.6;
}
.ga-info-pct {
    font-family: var(--ca-mono);
    font-weight: 700;
    color: var(--ca-accent-dark);
}
.ga-info-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--ca-sub);
    border: 1px solid var(--ca-accent-line);
    margin: 0 .25rem .25rem 0;
}
.ga-info-source {
    margin: .5rem 0 0;
    font-size: .7rem;
    color: var(--ca-muted);
    line-height: 1.5;
}

/* ---- 硬さの切り替え（3択） ---- */
.ga-seg {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ga-seg button {
    flex: 1 1 auto;
    min-width: 6rem;
}

/* ---- 結果表示（ca-dial の中） ---- */
.ga-result-big {
    font-family: var(--ca-mono);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .5rem;
}
.ga-result-unit { font-size: 1.1rem; opacity: .8; }
.ga-result-sub { font-size: .875rem; color: rgba(243,236,225,.8); margin: 0; }

/* ---- teaser（ロック表示） ---- */
.ga-teaser {
    text-align: center;
    padding: 1rem .5rem .5rem;
}
.ga-teaser-icon {
    width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
    background: var(--ca-accent-bg); color: var(--ca-accent-dark);
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.ga-teaser p { color: var(--ca-sub); font-size: .9rem; margin: 0 0 1rem; }

/* ---- 比較表（Pro専用） ---- */
.ga-compare-wrap { overflow-x: auto; }
.ga-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.ga-compare-table th, .ga-compare-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--ca-line);
    text-align: left;
}
.ga-compare-table th { color: var(--ca-sub); font-size: .8rem; }
.ga-compare-table td.ga-compare-amount {
    font-family: var(--ca-mono);
    font-weight: 700;
    color: var(--ca-accent-dark);
    white-space: nowrap;
}

/* ==========================================================================
   cookalc tools / bakers_percentage.css
   高機能ベーカーズパーセント計算ツール 固有スタイル

   共通部分（.ca-*）は /assets/css/cookalc-ui.css を使う。
   ここに書くのは、このツール固有の見た目（材料リストの表・計算方式の
   切り替えボタン・型サイズ入力・teaser等）だけ。
   ========================================================================== */

/* ---- 入力欄 ---- */
.bk-field { margin-bottom: 1.25rem; }
.bk-field:last-child { margin-bottom: 0; }
.bk-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.25rem;
}
@media (min-width: 640px) {
  .bk-field-row { grid-template-columns: repeat(2, 1fr); }
}
.bk-field-sub { margin-top: .75rem; }
.bk-hint { font-size: .8125rem; color: var(--ca-muted); margin: .375rem 0 0; }

/* ---- 材料リストの表 ---- */
.bk-table-wrap { overflow-x: auto; }
.bk-ing-table, .bk-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.bk-ing-table th, .bk-ing-table td,
.bk-result-table th, .bk-result-table td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--ca-line);
  text-align: left;
  vertical-align: middle;
}
.bk-ing-table th, .bk-result-table th { color: var(--ca-sub); font-size: .8rem; }
.bk-ing-table input[type="text"],
.bk-ing-table input[type="number"] {
  width: 100%; min-width: 5rem;
  font-size: .95rem; padding: .4rem .5rem;
}
.bk-ing-table select { min-width: 4.5rem; }
.bk-row-del {
  border: 0; background: none; cursor: pointer;
  color: var(--ca-warn); font-size: 1.15rem; font-weight: 700; line-height: 1;
  padding: .25rem .4rem;
}
.bk-row-del:hover { color: #9b2c2c; }

/* ---- 計算方式の切り替え（3択） ---- */
.bk-seg { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bk-seg button { flex: 1 1 auto; min-width: 8rem; }
.bk-seg button.bk-locked { opacity: .6; }

/* ---- 結果表示 ----
   ⚠️ 明るい文字色は「暗い背景の結果ダイヤル(#bk-result-dial)の中」だけに限定すること。
   .bk-result-table は発酵種カード（明るい背景の .ca-card）でも使っているため、
   スコープを付けずに color:#f3ece1 を当てると、そちらが白文字＋白背景で読めなくなる。
   （2026-08-28、実ブラウザのスクリーンショットで発覚。textContentを読むテストでは
   検出できなかった。）                                                        */
.bk-result-table td { font-family: var(--ca-mono); }
.bk-result-table td:first-child { font-family: var(--ca-font); }
#bk-result-dial .bk-result-table th,
#bk-result-dial .bk-result-table td { border-bottom-color: rgba(243,236,225,.18); }
#bk-result-dial .bk-result-table th { color: rgba(243,236,225,.75); }
#bk-result-dial .bk-result-table td { color: #f3ece1; }
.bk-result-note { font-size: .85rem; color: var(--ca-warn); margin: .75rem 0 0; }
#bk-result-dial .bk-result-note { color: #ffb4a1; }

/* ---- 前種・仕込み水温・型比容積の結果表示 ---- */
.bk-dt-result {
  font-size: 1.15rem; font-weight: 700; color: var(--ca-accent-dark);
  margin: .75rem 0 0;
}

/* ---- 型サイズの寸法入力 ---- */
.bk-dims {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  margin-top: .5rem;
}
.bk-dims label {
  display: inline-block; font-size: .8rem; margin: 0;
  color: var(--ca-sub); font-weight: 700;
}
.bk-dims input { width: 6rem; display: inline-block; }

/* ---- teaser（ロック表示） ---- */
.bk-teaser { text-align: center; padding: 1rem .5rem .5rem; }
.bk-teaser-icon {
  width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
  background: var(--ca-accent-bg); color: var(--ca-accent-dark);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.bk-teaser p { color: var(--ca-sub); font-size: .9rem; margin: 0 0 1rem; }

/* ==========================================================================
   2026-08-28 UI改善（認知負荷の軽減）
   ⚠️ このCSSはテーマ共通ファイル（code-editor-13.css）として全ページに配信される。
      他ツールに影響が出ないよう、汎用的なセレクタには必ず #bakers-tool を付けること。
   ========================================================================== */

/* ---- ヘルパーテキスト（控えめな補足説明） ----
   専門的な補足は本文と同じ強さで出さず、小さめ・グレーの「添え書き」にする。
   先頭の ℹ️ はCSSで付けるので、HTML側に絵文字を書かなくてよい。            */
#bakers-tool .bk-help {
  font-size: .8rem;
  line-height: 1.75;
  color: var(--ca-muted);
  margin: .5rem 0 0;
  padding-left: 1.5em;
  text-indent: -1.5em;   /* 2行目以降を絵文字の右に揃える（ぶら下げインデント） */
  max-width: 34em;       /* 長い説明文で視線が横に流れすぎないようにする */
}
#bakers-tool .bk-help::before {
  content: 'ℹ️';
  margin-right: .4em;
}

/* ---- 入力欄が横に広がりすぎないようにする ----
   .ca-tool は最大64remあるため、1カラムのときに入力欄が1000px近くまで伸びて
   視線移動の負担が大きかった。フォーム部品だけ上限を設ける。
   材料リストの表（.bk-ing-table）内の入力欄はセル幅に追従させたいので対象外。 */
#bakers-tool .bk-field > input[type="number"],
#bakers-tool .bk-field > input[type="text"],
#bakers-tool .bk-field > select {
  max-width: 20rem;
}
#bakers-tool .bk-field > .bk-hint { max-width: 34em; }

/* 発酵種の副材料の割り当て欄（JSで動的生成する .bk-field）にも同じ上限を効かせる */
#bk-preferment-shares input[type="number"] { max-width: 20rem; }

/* ---- 結果表示の行間を少し詰めて、カード内の情報密度を整える ---- */
#bakers-tool .bk-dt-result { line-height: 1.6; }

/* ---- 型の寸法入力は小さく、ラベルと横並びに ----
   .bk-dims input の width:6rem は cookalc-ui.css の
   `.ca-tool input[type="number"] { width:100% }`（詳細度0,2,1）に負けていて、
   実際には全幅に広がってしまっていた。#bakers-tool を付けて詳細度で勝たせる。 */
#bakers-tool .bk-dims {
  display: grid;                                  /* flexだとラベルと入力欄が別行に泣き別れる */
  grid-template-columns: auto minmax(0, 6rem);    /* 左=ラベル / 右=入力欄 で必ず対になる */
  gap: .5rem .75rem;
  align-items: center;
  justify-content: start;
}
#bakers-tool .bk-dims input[type="number"] { width: 6rem; max-width: 6rem; }
#bakers-tool .bk-dims label { margin-bottom: 0; }


/* ========== MembershipPro 申込み・更新ページ ========== */
body.com_osmembership .osm-container{max-width:900px;margin:0 auto 88px;padding:0 20px}
body.com_osmembership .osm-message{margin:0 0 22px}
body.com_osmembership .osm-message>p:first-child{margin:0 0 18px;font-size:15px;line-height:1.9;color:#5A4C44}
body.com_osmembership .osm-message>p:first-child strong{display:block;margin:0 0 10px;font-size:28px;font-weight:900;letter-spacing:-.01em;line-height:1.5;color:#2A211C}
/* 「すでにアカウントをお持ちですか？」はインラインstyle指定なので !important で上書き */
body.com_osmembership .osm-message>p:last-child{margin:0!important;padding:13px 18px!important;border-radius:12px!important;background:#F3E7DE!important;font-size:14px!important;line-height:1.8;color:#5A4C44;text-align:center!important}
body.com_osmembership .osm-message>p:last-child a{color:#C4741F;font-weight:700;text-decoration:underline}

/* フォーム全体をカードに */
body.com_osmembership #osm-signup-page-columns-form{background:#FFFDFB;border:1px solid rgba(42,33,28,.10);border-radius:18px;padding:34px 32px 30px}
body.com_osmembership #osm-signup-page-columns .col-md-6+.col-md-6>div{background:#FAF1EC;border-radius:14px;padding:24px 22px}
body.com_osmembership #osm-signup-page-columns .col-md-6+.col-md-6 .osm-heading{margin-top:0;border-bottom-color:rgba(42,33,28,.14)}
body.com_osmembership .osm-heading{margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid rgba(42,33,28,.10);font-size:15px;font-weight:700;letter-spacing:.04em;color:#2A211C;text-align:left}

/* ラベルを入力欄の上に。横並びだと日本語ラベルが折り返して読みにくい */
body.com_osmembership .form-group.form-row{display:block;margin:0 0 16px}
body.com_osmembership .form-control-label,
body.com_osmembership .eb-form-control{display:block;width:100%;max-width:100%;flex:none;padding-left:0;padding-right:0}
body.com_osmembership .form-control-label{margin:0 0 6px;font-size:13px;font-weight:700;color:#5A4C44;letter-spacing:.02em}
body.com_osmembership .form-control-label label{font-size:13px;font-weight:700;color:#5A4C44}

/* 入力欄（元は幅250px固定で途中で切れていた） */
body.com_osmembership .eb-form-control .form-control{width:100%;max-width:100%;height:auto;padding:12px 14px;font-size:16px;line-height:1.6;color:#2A211C;background:#fff;border:1px solid rgba(42,33,28,.18);border-radius:10px;box-shadow:none}
body.com_osmembership .eb-form-control textarea.form-control{min-height:96px;resize:vertical}
body.com_osmembership .eb-form-control .form-control:focus{border-color:#F2A03D;box-shadow:0 0 0 3px rgba(242,160,61,.18);outline:none}
body.com_osmembership .osm-payment-terms .eb-form-control{font-size:22px;font-weight:800;color:#2A211C;letter-spacing:.01em}

/* 申込みボタン（文字色 #B9A79B がオレンジ地に乗っていて読めなかった） */
body.com_osmembership .form-actions{margin:22px 0 0;padding:0;background:none;border:0;text-align:center}
body.com_osmembership input.btn-primary,
body.com_osmembership .btn.btn-primary{display:block;width:100%;padding:16px 24px;border:0;border-radius:999px;background:#F2A03D;color:#2A211C;font-size:16px;font-weight:700;letter-spacing:.02em;box-shadow:0 5px 14px rgba(242,160,61,.28);cursor:pointer}
body.com_osmembership input.btn-primary:hover{background:#E5912C;color:#2A211C}

@media (max-width:767px){
  body.com_osmembership #osm-signup-page-columns-form{padding:24px 18px}
  body.com_osmembership #osm-signup-page-columns .col-md-6+.col-md-6{margin-top:26px}
  body.com_osmembership .osm-message>p:first-child strong{font-size:23px}
}