@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================
   ミリデス（millidesk.com）子テーマ 追記分
   swell_child/style.css の末尾に貼り付ける
   作成: 2026-09-06

   方針:
   - テンプレートの上書きはしない（親テーマ更新で壊れないため）
   - CSSとブロックスタイルの追加だけで独自性を出す
   - 色は変数で定義。ダークモード時の値は下部でまとめて上書き
   ========================================================== */

:root {
  /* 判定の色 */
  --md-ok:        #15694b;   /* 適正・一致 */
  --md-ok-bg:     #e6f4ee;
  --md-warn:      #8a6100;   /* 軽微なズレ */
  --md-warn-bg:   #fbf2df;
  --md-ng:        #b3261e;   /* 要改善 */
  --md-ng-bg:     #fceceb;

  /* 基本 */
  --md-num:       #16202c;   /* 数字の色 */
  --md-line:      #dde2e8;   /* 罫線 */
  --md-head-bg:   #eef1f5;   /* 表ヘッダー */
  --md-zebra:     #f8fafb;   /* 縞 */
  --md-panel-bg:  #f6f8fa;   /* 図解・囲みの背景 */
  --md-accent:    #2b6cb0;   /* アクセント */
}

/* ==========================================================
   1. 実測データ表  ブロックスタイル「実測データ表」
   表ブロック → スタイル → 実測データ表
   ========================================================== */

.wp-block-table.is-style-md-measure table {
  width: 100%;
  border-collapse: collapse;
  /* 数字の桁を揃える。実測値を並べるサイトなので必須 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.wp-block-table.is-style-md-measure th,
.wp-block-table.is-style-md-measure td {
  border: 1px solid var(--md-line);
  padding: 0.65em 0.8em;
  line-height: 1.6;
}

/* ⚠ 背景を指定したら文字色も必ず指定する。
   SWELL は thead th の色を白に固定しているため、
   color を書かないと「薄いグレー背景に白文字」で読めなくなる */
.wp-block-table.is-style-md-measure thead th {
  background: var(--md-head-bg);
  color: var(--md-num);
  font-weight: 700;
  text-align: center;
}

/* 1列目＝項目名は左寄せ、2列目以降＝数値は右寄せ */
.wp-block-table.is-style-md-measure td:first-child,
.wp-block-table.is-style-md-measure th:first-child {
  text-align: left;
  font-weight: 600;
}
.wp-block-table.is-style-md-measure td:not(:first-child) {
  text-align: right;
}

/* 縞（背景と文字色はペアで指定する） */
.wp-block-table.is-style-md-measure tbody tr:nth-child(even) td {
  background: var(--md-zebra);
  color: var(--md-num);
}
.wp-block-table.is-style-md-measure tbody td {
  color: var(--md-num);
}

/* 表内の強調（**太字**）は数字の強調に使うので、少し大きく */
.wp-block-table.is-style-md-measure td strong {
  color: var(--md-num);
  font-size: 1.08em;
}

/* ==========================================================
   2. 判定バッジ  表のセルや本文で使う
   使い方（表のセル内。コードエディターで入力）:
   <span class="md-ok">一致</span>
   絵文字（✅ ⚠️ ❌）で代用してもよい
   ========================================================== */

.md-ok,
.md-warn,
.md-ng {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.md-ok   { color: var(--md-ok);   background: var(--md-ok-bg); }
.md-warn { color: var(--md-warn); background: var(--md-warn-bg); }
.md-ng   { color: var(--md-ng);   background: var(--md-ng-bg); }

/* ==========================================================
   3. 実測ボックス  ブロックスタイル「実測ボックス」
   段落ブロック → スタイル → 実測ボックス
   決定的な数字を1つだけ置く場所。多用しない
   ========================================================== */

.is-style-md-number {
  margin: 1.8em 0;
  padding: 0.9em 1.1em;
  border-left: 5px solid var(--md-accent);
  background: var(--md-panel-bg);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--md-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ==========================================================
   4. 結論ボックス  ブロックスタイル「結論」
   段落／グループ → スタイル → 結論
   「机も椅子も買い替える必要はありませんでした」のような着地に使う
   ========================================================== */

.is-style-md-verdict {
  margin: 1.8em 0;
  padding: 1.1em 1.2em;
  border: 2px solid var(--md-num);
  border-radius: 4px;
  background: transparent;
  font-weight: 700;
  line-height: 1.8;
}
.is-style-md-verdict::before {
  content: "結論";
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.1em 0.7em;
  border-radius: 3px;
  background: var(--md-num);
  color: #fff;
  font-size: 0.78em;
  letter-spacing: 0.08em;
}

/* ==========================================================
   5. 図解枠  ブロックスタイル「図解」
   画像ブロック → スタイル → 図解
   人体シルエット＋寸法線の図を置く場所。寸法線が見えるよう背景を敷く
   ========================================================== */

.wp-block-image.is-style-md-diagram {
  margin: 2em 0;
  padding: 1.2em;
  background: var(--md-panel-bg);
  color: var(--md-num);          /* 背景を指定したら文字色も */
  border: 1px solid var(--md-line);
  border-radius: 4px;
}
.wp-block-image.is-style-md-diagram img {
  display: block;
  margin: 0 auto;
}
.wp-block-image.is-style-md-diagram figcaption {
  margin-top: 0.9em;
  padding-top: 0.7em;
  border-top: 1px dashed var(--md-line);
  font-size: 0.88em;
  text-align: left;
  opacity: 0.85;
}

/* ==========================================================
   6. 表の横スクロール（全ての表に適用）
   実測表は列が増えがち。モバイルで body ごと横に伸びるのを防ぐ
   ========================================================== */

.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .wp-block-table.is-style-md-measure table {
    font-size: 0.92em;
  }
  .wp-block-table.is-style-md-measure th,
  .wp-block-table.is-style-md-measure td {
    padding: 0.5em 0.55em;
    white-space: nowrap;
  }
}